CHAPTER FOUR

CSS
Cascading Style Sheet

Compiled By: Seble N.

 Introduction to CSS
 What is CSS?
 Why CSS?
 History of CSS
 CSS syntax
 Types of Selectors
 Attaching Style definitions
 Cascading Rules
 CSS Comments
 Common CSS properties
 What is CSS?

 is a language used to specify the formatting of an

HTML document
 have a large set of style attributes that can be used to
style HTML elements

 Why CSS?
 Because it helps to separate content of an HTML
document from its presentation
 example.html

 before we had CSS all style information was encoded

directly into HTML documents
 example.html

style.css
 CSS saves time:
 You can write CSS once and then reuse same sheet in multiple HTML
pages.
 Pages load faster :
 If you are using CSS, you do not need to write HTML tag attributes every
time. less code means faster download times.
 Easy maintenance:
 To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.
 Superior styles to HTML:
 CSS has a much wider array of attributes than HTML
 Multiple Device Compatibility:
 Style sheets allow content to be optimized for more than one type of
device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell
phones or for printing.
 Cascading Style Sheets, level 1 (CSS1) was came out of
W3C as a recommendation in December 1996. This
version describes the CSS language as well as a simple
visual formatting model for all the HTML tags.

 CSS2 was became a W3C recommendation in May 1998

and builds on CSS1. This version adds support for media-
specific style sheets e.g. printers and aural devices,
downloadable fonts, element positioning and tables.

 CSS3 was became a W3C recommendation in June 1999

and builds on older versions CSS. it has divided into
documentations is called as Modules and here each
module having new extension features defined in CSS2.
 A CSS rule set consists of a selector and a declaration
block:
 Selector
 points to the HTML element you want to style.
 Declaration Block
 contains one or more declarations separated by semicolons

 Property
 is a type of attribute of HTML tag
 Value
 Values are assigned to properties.
 The Element Selector
 used to select an HTML element by its tag name

p{color:green;}
 The ID Selector
 used to select an HTML element by its id

#paraone{color:green;}
 The Class Selector
 define generic styles that can be applied to different HTML elements

.firstclass{color:green;}

 To select

 s p.firstclass{color:red;}
 The Universal Selectors
 matches the name of any element type

*{color:green;}

 The Descendant Selectors

 to select an element only when it lies inside a
particular element.
ul em{color:green;}

 The Child Selectors

 to select direct child of a particular element

body > p{color:green;}

 The Attribute Selectors
 to select HTML elements with particular attributes.

input[type]{color:green;}

input[type="text"]{color:green;}

 Grouping Selectors
 to apply style to many selectors, just separate the
selectors with a comma
h1,h2,h3,#para,.classone{color:green;}
 A combinator is something that explains the

relationship between the selectors.

 There are four different combinators in CSS3:

 descendant selector

 child selector

 adjacent sibling selector

 general sibling selector

 Descendant Selector
 Used to match all elements that are descendants of a specified
element.
 To select all <p> elements inside <div> elements:
 div p { background-color: yellow; }

 Child Selector
 Used to select all elements that are the immediate children of a
specified element.
 To select all <p> elements that are immediate children of a <div>
element:
 div > p {background-color: yellow; }
 Adjacent Sibling Selector
 Used to select all elements that are the adjacent siblings of a
specified element.
 Sibling elements must have the same parent element, and
"adjacent"
 To select all <p> elements that are placed immediately after
<div> elements:
 div + p { background-color: yellow; }

 General Sibling Selector

 Used to select all elements that are siblings of a specified
element.
 To select all <p> elements that are siblings of <div> elements:
 div ~ p { background-color: yellow; }
 There are three ways of embedding a style

definition to an HTML document

 External style sheet

 Internal style sheet

 Inline style
 External style sheet
 you can change the look of an entire website by changing just
one file!
 Each page must include a reference to the external style sheet
file inside the <link> element
<link rel="stylesheet" type="text/css" href="mystyle.css">

 can be written in any text editor

 the style sheet file must be saved with a .css extension

body {
background-color: lightblue;
s
}
h1 { mystyle.css
color: navy;
margin-left: 20px;
}
 Internal style sheet

 can be used if one single page has a unique style.

 Internal styles are defined within the <style>

element, inside the head section of an HTML

<head>
page:
<style>
body {
background-color: linen;
}
</style>
</head>
 Inline Styles

 can be used to apply a unique style for a single

element
 To use inline styles, add the style attribute to the

relevant tag
<h1 style="color:blue;margin-left:30px;">
This is a heading.
</h1>
  Which style will be used when there is more than one style
specified for an HTML element?

 Cascading order
 Rules of precedence application:
 Inline styles
 Internal styles
 External styles
 Browser default
 Comments are ignored by browsers.

 A CSS comment starts with /* and ends with */.

Comments can also span multiple lines:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
 Colors in HTML can be specified by the

following methods:
 a color name - like "red"

 a HEX value - like "#ff0000"

 an RGB value - like "rgb(255,0,0)"

h1 {color: orange;}

p {color: rgb(255,125,0);}

div {color: #b0c4de;}

Unit Description Example

Defines a measurement in points. A point is defined as

Pt body {font-size: 18pt;}
1/72nd of an inch.

Px Defines a measurement in screen pixels. img {width: 25px;}

Defines a measurement as a percentage relative to p {font-size: 16pt;

%
another value, typically an enclosing element. line-height: 125%;}

Cm Defines a measurement in centimeters. div {width: 2cm;}

In Defines a measurement in inches. p {word-spacing: .15in;}

Mm Defines a measurement in millimeters. p {word-spacing: 15mm;}

Relative to the font-size of the element (2em means 2

Em p {font-size: 7em;}
times the size of the current font)
 CSS background properties are used to define background effects of an
element.
 The background-color property
 is used to set the background color of an element.
 The background-image property
 is used to set the background image of an element.
 The background-repeat property
 is used to control the repetition of an image in the background.
 The background-position property
 is used to control the position of an image in the background.
 The background-attachment property
 is used to control the scrolling of an image in the background.
 The background property
 is used as a shorthand to specify a number of other background properties.
Background Example Possible
Properties Values

background-color background-color: #b0c4de;

background-image background-image: url("/css/images/css.jpg");

background-color: #cccccc;

background-repeat background-image: url("/css/images/css.jpg"); repeat

no-repeat
background-repeat: repeat; repeat-x
repeat-y

background- background-image: url("/css/images/css.jpg"); right top

position background-position:100px 200px; left top
…

background- background-image: url('/css/images/css.jpg'); fixed

attachment background-attachment: fixed; scroll
Shorthand background: #ffffff url("img_tree.png") no-repeat right
property top fixed;
 You can set following font properties of an element
 font-family property
 is used to specify font face of an element
 font-style property
 is used to make a font italic or oblique.
 font-variant property
 is used to create a small-caps effect.
 font-weight property
 is used to increase or decrease how bold or light a font appears.
 font-size property
 is used to increase or decrease the size of a font.
 font property
 is used as shorthand to specify a number of other font
properties.
 font-family property
 In CSS, there are two types of font family names:
 generic family - a group of font families with a similar
look (like "Serif" or "Monospace")
 font family - a specific font family (like "Times New
Roman" or "Arial“)

Generic Family Font Family Description

Serif Times New Roman Serif fonts have small lines at the
Georgia ends on some characters
Sans-serif Arial "Sans" means without - these
Verdana fonts do not have the lines at the
ends of characters
Monospace Courier New All monospace characters have
Lucida Console the same width
Font Properties Example Possible Values
font-family font-family: "Times New Roman",
Times, serif;
font-style font-style:italic; normal
italic
oblique
font-variant font-variant:small-caps; small-caps
normal
font-weight font-weight:bold; normal, bold, bolder,
lighter, 100, 200, 300,
400, 500, 600, 700,
800, 900
font-size font-size:20px; xx-small, x-small,
small, medium,
large, x-large, xx-
large, smaller, larger,
size in pixels or in %
Shorthand property font:italic small-caps bold 15px georgia;
 You can set following text properties of an element −
 color property
 is used to set the color of a text.
 direction property
 is used to set the text direction.
 letter-spacing property
 is used to add or subtract space between the letters that make up a word.
 word-spacing property
 is used to add or subtract space between the words of a sentence.
 text-indent property
 is used to indent the text of a paragraph.
 text-align property
 is used to align the text of a document.
 text-decoration property
 is used to underline, overline, and strikethrough text.
 text-transform property
 is used to capitalize text or convert text to uppercase or lowercase letters.
 text-shadow property
 is used to set the text shadow around a text.
Text Properties Example Possible Values
color color:red;
text-align text-align:right; left, right, center, justify
text-decoration text-decoration:underline; none, underline, overline, line-
through, blink
text-transform text-transform:capitalize; none, capitalize, uppercase,
lowercase.
text-indent text-indent:1cm; % or a number specifying
indent space
word-spacing word-spacing:5px; normal or a number specifying
space
letter-spacing letter-spacing:5px; normal or a number specifying
space
direction direction:rtl; ltr or rtl

text-shadow text-shadow:4px 4px 8px blue;

 Links can be styled with any CSS property (e.g. color,
font-family, background, etc.).
a{color: #000000; text-decoration:none;}

 In addition, links can be styled differently depending on

what state they are in. a:link {color: #000000}
 The four links states are: a:visited {color: #006600}
a:hover {color: #FFCC00}
 a:link - a normal, unvisited link
a:active {color: #FF00CC}
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

 When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover
 List Property Types
 The list-style-type
 used to control the shape or appearance of the marker
 The list-style-image
 to set an image as a marker rather than a bullet or number
 The list-style-position
 specifies whether a long point that wraps to a second line
should align with the first line or start underneath the start of
the marker.
 The marker-offset
 specifies the distance between a marker and the text in the list
 The list-style
 serves as shorthand for the preceding properties
Image Properties Example Possible
Values
list-style-type list-style-type:decimal; None, disc,
circle, square
list-style-type:square; decimal,
lower-alpha,
upper-alpha,
lower-roman,
upper-roman

list-style-image list-style-image:url(/images/bullet.gif)
list-style-position list-style-position : outside; inside, outside

marker-offset marker-offset:2em;
Shorthand property list-style: square inside
url(“bullet.jpg”);
1. Specify the role of HTML and also CSS in a given
HTML document.

2. List 3 attribute types any HTML element can have

3. How many ways are their to attach a style

definition to an HTML document? And list each.

4. Give one example of a CSS rule definition

 All HTML elements can be considered as boxes

 The CSS box model is essentially a box that wraps

around HTML elements, and it consists of:

 margins,

 borders,

 padding, and

 the actual content

 Content
 The content of the box, where text and images appear
 Padding
 Clears an area around the content. The padding is transparent
 Border
 A border that goes around the padding and content
 Margin
 Clears an area outside the border. The margin is transparent
 Width and height attributes are used to set the width and height of an
element content
 Total element width = width + left padding + right padding + left border +
right border + left margin + right margin
 The margin property

 defines the space around an HTML element

 it is possible to use negative values to overlap content

 Margin Property Types

 The margin-bottom: specifies the bottom margin of an element

 The margin-top: specifies the top margin of an element

 The margin-left: specifies the left margin of an element

 The margin-right: specifies the right margin of an element

 The margin: specifies a shorthand property for setting the margin

properties in one declaration
Margin Properties Example Possible Values
margin-bottom margin-bottom: 15px; length or %
margin-top margin-top: 15px; length or %
margin-left margin-left: 15px; length or %
margin-right margin-right: 15px; length or %
margin: 15px; All margin=15px
margin:10px 2%; top=bottom=10px
left=right=2%
Shorthand Property margin: -10px 2% 10px; top=-10px
left=right=2%
bottom=10px
margin: -10px 2% 10px auto; top=-10px
right=2%
bottom=10px
left=set by the browser
margin: auto; auto, inherit
margin: inherit;
 Border Properties

 The border-color
 specifies the color of a border

 The border-style
 specifies whether a border should be solid, dashed
line, double line, or one of the other possible values
 The border-width
 specifies the width of a border
Border Properties Example Possible
Values
border-color border-bottom-color:#009900;
OR
border-color: red;
border-color: red green;
border-color: red green yellow;
border-color: red green yellow blue;
border-style border-bottom-style: solid; dotted, solid,
OR double,
border-style: groove; dashed
Border-style: dotted solid;
Border-style: dotted solid groove;
border-width border-bottom-width:4px; thin, thick,
border-left-width: thin; medium,
border-right-width: medium; length or %
OR
border-width: thick medium;
Shorthand property border:4px solid red;
 The padding property
 used to specify how much space should appear between the
content of an element and its border

 Padding Property Types

 padding-bottom: specifies the distance between content of an
element and its bottom border
 padding-top : specifies the distance between content of an
element and its top border
 padding-left: specifies the distance between content of an
element and its left border
 padding-right: specifies the distance between content of an
element and its right border
 padding: serves as shorthand for the preceding properties
Padding Properties Example Possible Values
padding-bottom padding-bottom: 15px; length or %
padding-top padding-top: 15px; length or %
padding-left padding-left: 15px; length or %
padding-right padding-right: 15px; length or %
padding: 15px; All padding =15px
padding:10px 2%; top=bottom=10px
left=right=2%
padding: 10px 2% 20px; top=10px
Shorthand Property left=right=2%
bottom=20px
padding: 10px 2% 20px -30px; top=10px
right=2%
bottom=20px
left=30px
padding: auto; auto, inherit
padding: inherit;
 The position property
 specifies the type of positioning method used for an
element
 There are four different position values:
 static
 relative
 fixed
 absolute

 Elements are then positioned using the top, bottom,

left, and right properties.
 Static Positioning
 HTML elements are positioned static by default.
 Static positioned elements are not affected by the top, bottom, left… properties.
 An element with position: static; is not positioned in any special way

 Relative Positioning
 sets the position of an HTML element relative to where it normally appears
 Fixed Positioning
 to fix the position of an element to a particular spot on the page, regardless of
scrolling.
 Specified coordinates will be relative to the browser window

 Absolute Positioning
 is positioned relative to the nearest positioned ancestor
 A "positioned" element is one whose position is anything except static.
 if an absolute positioned element has no positioned ancestors, it uses the
document body,
 div.relative {
position: relative;
<body> width: 400px;
<img src=“bird3.png” id=“fixed”/> height: 200px;
<div class="relative"> border: 3px solid #8AC007;
relative div }
<div class="absolute"> div.absolute {
absolute div position: absolute;
<div> top: 80px;
</div> right: 0;
width: 200px;
</body> height: 100px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #8AC007;
}
 When elements are positioned, they can overlap
other elements.
 The z-index property
 specifies the stack order of an element (which
element should be placed in front of, or behind, the
others).

 An element with greater stack order is always in front

of an element with a lower stack order

 An element can have a positive or negative stack order

<body>
<div style="background-color:lightblue; width:300px; height:100px;
position:relative; top:10px; left:80px; z-index:2">
</div>

<div style="background-color:yellow; width:300px; height:100px;

position:relative; top:-60px; left:35px; z-index:1;">
</div>

<div style="background-color:lightgreen; width:300px; height:100px;

position:relative; top:-220px; left:120px; z-index:3;">
</div>
</body>
 Visibility allows you to hide an element from view

 Used along with JavaScript to create very complex

menu and very complex webpage layouts

 Example

 To hide answers to a question until the user selects an

option
  visible
 The box and its contents are shown to the user.
 hidden
 The box and its content are made invisible, although they still
affect the layout of the page.
 collapse
 This is for use only with dynamic table columns and row
effects.
 Initial
 Sets this property to its default value.
 Inherit
 Inherits this property from its parent element.

<p style=" visibility: hidden;">

A hidden paragraph content
</p>
 The display Property
 is CSS's most important property for controlling layout.

 specifies if/how an element is displayed

 Every HTML element has a default display value depending on

what type of element it is.
 The default display value for most elements is block or inline.

 only changes how the element is displayed, NOT what kind of

element it is. So, an inline element with display: block; is not
allowed to have other block elements inside it.
 Display: none;

 The element will not be displayed at all (has no effect on layout)

 Display: inherit;

 Inherits this property from its parent element.

 Display: inline-block;

 This value causes an element to generate an inline-level block container. The inside
of an inline-block is formatted as a block box, and the element itself is formatted as
an atomic inline-level box.

 Display: table;

 Let the element behave like a <table> element

 Display: table-row;

 Let the element behave like a <tr> element

 Override the Default Display Value

display: inline | block | list-item | inline-block |

table | inline-table | table-row-group | table-header-
group | table-footer-group | table-row | table-column-
group | table-column | table-cell | table-caption | none
| inherit
 What are Pseudo-classes?
 A pseudo-class is used to define a special state of an
element.
 For example, it can be used to:
 Style an element when a user mouses over it

 Style visited and unvisited links differently

 A simple syntax of pseudo-classes is as follows −

 selector:pseudo-class {property: value}

 CSS classes can also be used with pseudo-classes

 selector.class:pseudo-class {property: value}
Selector Example Example description

Selects every <p> elements that is the first child

:first-child p:first-child
of its parent

Selects every <p> elements that is the last child

:last-child p:last-child
of its parent

:not(selector) :not(p) Selects every element that is not a <p> element

Selects every <p> element that is the second

:nth-child(n) p:nth-child(2)
child of its parent

:visited a:visited Selects all visited links

:empty p:empty Selects every <p> element that has no children

Selects <input> elements with no "required"

:optional input:optional
attribute
 :active  :in-range  :only-of-type
 :any  :invalid  :optional
 :checked  :lang()  :out-of-range
 :default  :last-child  :read-only
 :dir()  :last-of-type  :read-write
 :disabled  :left  :required
 :empty  :link  :right
 :enabled  :not()  :root
 :first-child  :nth-child()  :scope
 :first-of-type  :nth-last-child()  :target
 :fullscreen  :nth-last-of-type()  :valid
 :focus  :nth-of-type()  :visited
 :hover  :only-child
 :indeterminate
 What are Pseudo-Elements?
 A CSS pseudo-element is used to style specified parts
of an element.
 For example, it can be used to:
 Style the first letter, or line, of an element

 Insert content before, or after, the content of an element

 A simple syntax of pseudo-elements is as follows −

 selector::pseudo-element {property: value}
 Selector Example Example description

::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

Selects the first letter of every <p>

::first-letter p::first-letter
element

Selects the first line of every <p>

::first-line p::first-line
element

Selects the portion of an element that is

::selection p::selection
selected by a user

The double colon replaced the single-colon notation for pseudo-elements in CSS3 to
distinguish pseudo-classes from pseudo-elements.
 p::first-line { text-decoration: underline; }
p.noline::first-line { text-decoration: none; }
p::first-letter { font-size: 5em; }
p::before { content: url(/images/bullet.gif); }
p::after { content: “Thank you”; color:red; font-size:34px;}
<body>
<div>
<p>First paragraph in div</p>
<p class=“noline”>Second paragraph in div. </p>
</div>
</body>
 The overflow property

 specifies what happens if content overflows an

element's box
 CSS Syntax

overflow: visible|hidden|scroll|auto|initial|inherit;
 visible
 The overflow is not clipped. It renders outside the element's box. This
is default
 hidden
 The overflow is clipped, and the rest of the content will be invisible
 scroll
 The overflow is clipped, but a scroll-bar is added to see the rest of the
content
 auto
 If overflow is clipped, a scroll-bar should be added to see the rest of the
content
 initial
 Sets this property to its default value.
 inherit
 Inherits this property from its parent element.
 The float Property

 Specifies an element should float or not.

 In its simplest use, the float property can be used to wrap

text around images.
 float: none|left|right|initial|inherit;

<style>
img {width:100px;
height:100px;
float: left;
margin: 5px;}
</style>
 s
<body>
<img src="bird3.png"/>
<p>Lorem ipsum dolor sit
amet, ……p>
</body>
 Aside from the simple example of wrapping text

around images, floats can be used to create

entire web layouts.
  The clear Property

 is used to control the behavior of floating elements.

 To avoid elements after a floating element to float.

 specifies on which sides of an element floating

elements are not allowed to float:
 clear: none|left|right|both|initial|inherit;

img {width:100px; height:100px; float: right; margin: 5px;}

 s p{clear:right;}
<body>
<img src="bird3.png"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit….p>
</body>
 Setting the width of a block-level element will prevent it
from stretching out to the edges of its container.
 Use margin: auto;, to horizontally center an element
within its container.
 The element will then take up the specified width, and the
remaining space will be split equally between the two
margins:

 s
 Width: prevent it from stretching out to the edges
of its container
 Margin: auto; centers the element within its
container
 Problem: when the browser window is smaller
than the width of the element. The browser will
add a horizontal scrollbar to the page.

 Using max-width instead, in this situation, will

improve the browser's handling of small windows.
 CSS3
 is the latest standard for CSS.
 is completely backwards-compatible with earlier versions of CSS
 has been split into "modules". It contains the "old CSS specification“ .
In addition, new modules are added.
 Some of the most important CSS3 modules are:
 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface
Property Description

A shorthand property for setting all the four border radius

border-radius
properties

border-top-left-radius Defines the shape of the border of the top-left corner

border-top-right-radius Defines the shape of the border of the top-right corner

border-bottom-right-radius Defines the shape of the border of the bottom-right corner

border-bottom-left-radius Defines the shape of the border of the bottom-left corner

 CSS3 border-radius - Specify Each Corner
 Four values:
 first value applies to top-left, second value
applies to top-right, third value applies to
bottom-right, and fourth value applies to
bottom-left corner
 Three values:
 first value applies to top-left, second value
applies to top-right and bottom-left, and
third value applies to bottom-right
 Two values:
 first value applies to top-left and bottom-
right corner, and the second value applies to
top-right and bottom-left corner
 One value:
 all four corners are rounded equally
Property Description Possible Values

A shorthand property for setting all

background the background properties in one
declaration

Specifies the painting area of the border-box, padding-box,

background-clip
background content-box

background- Specifies one or more background

image images for an element

background- Specifies where the background border-box, padding-box,

origin image(s) is/are positioned content-box

in lengths, percentages, auto

Specifies the size of the background
background-size or by using one of the two
image(s)
keywords: contain or cover.
 The opacity property

 sets the opacity level for an element.

 describes the transparency-level, where 1 is not transparent at

all, 0.5 is 50% see-through, and 0 is completely transparent

 CSS Syntax

 opacity: number|initial|inherit;

 Property Values

 number: Specifies the opacity 0,0.1,0.2-1

 initial: Sets this property to its default value

 inherit: Inherits this property from its parent element

 Web fonts

 allow Web designers to use fonts that are not installed on

the user's computer.
 When you have found/bought the font you wish to use, just
include the font file on your web server, and it will be
automatically downloaded to the user when needed.

 Your "own" fonts are defined within the CSS3 @font-face

rule.
 In CSS3 @font-face rule you must first define a

name for the font (e.g. myFirstFont), and then

point to the font file.
 CSS3 transforms allow you to translate, rotate,

scale, and skew elements.

 A transformation is an effect that lets an element

change shape, size and position.

 CSS3 supports 2D and 3D transformations.

 translate()
 moves an element from its current position (according to the parameters given
for the X-axis and the Y-axis).

 rotate()
 rotates an element clockwise or counter-clockwise according to a given degree.
Using negative values will rotate the element counter-clockwise.

 scale()
 increases or decreases the size of an element (according to the parameters given
for the width and height).

 skew()
 skews an element along the X and Y-axis by the given angles.

 matrix()
 combines all the 2D transform methods into one.
 CSS3 allows you to format your elements using 3D
transformations
 3D transformation methods:
 rotate3d(x,y,z)
 rotateX(), rotateY(), rotateZ()

 scale3d(x,y,z)
 scaleX(), scaleY(), scaleZ()

 translate3d(x,y,z)
 translateX(), translateY(), translateZ()

 Perspective(n)
 Set the perspective from where an element is viewed

 perspective: length|none;
 CSS3 transitions

 allows you to change property values smoothly (from one

value to another), over a given duration

 To create a transition effect, you must specify two things:

 the CSS property you want to add an effect to

 the duration of the effect

 Note: If the duration part is not specified, the transition

will have no effect, because the default value is 0.
Property Description

A shorthand property for setting the four transition properties into a single
transition
property

transition-delay Specifies a delay (in seconds) for the transition effect

Specifies how many seconds or milliseconds a transition effect takes to

transition-duration
complete

transition-property Specifies the name of the CSS property the transition effect is for

Specifies the speed curve of the transition effect

ease - specifies a transition effect with a slow start, then fast, then
end slowly (this is default)
transition-timing- linear - specifies a transition effect with the same speed from start
function to end
ease-in - specifies a transition effect with a slow start ease-out -
specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
 CSS3 animations allows animation of most HTML elements without
using JavaScript or Flash!
 What are CSS3 Animations?
 An animation lets an element gradually change from one style to
another.
 You can change as many CSS properties you want, as many times you
want.
 To use CSS3 animation, you must first specify some keyframes for the
animation.
 Keyframes hold what styles the element will have at certain times.
 Without the CSS3 box-sizing

Property
 By default, the width and

height of an element is
calculated like this:
 width + padding + border =

actual width of an element

 height + padding + border =

actual height of an element

 With the CSS3 box-sizing
Property
 you will be able to include the
padding and border in an
element's total width and height.

 If you set box-sizing: border-box;

on an element padding and
border are included in the width
and height:
 The @media rule
 Allows to define different style rules for different media types.
 Examples: You could have one set of style rules for computer screens,
one for printers, one for handheld devices, one for television-type
devices, and so on.

 Media queries can be used to check many things, such as:

 width and height of the viewport

 width and height of the device

 orientation (is the tablet/phone in landscape or portrait

mode?)
 resolution
 A media query consists of
 a media type and

 can contain one or more expressions, which resolve to either

true or false
 @media not|only mediatype and (expressions) {
CSS-Code;
}

 You can also have different stylesheets for different media:

 <link rel="stylesheet" media="mediatype and|not|only
(expressions)" href="print.css">
 all
 Used for all media type devices

 print
 Used for printers

 screen
 Used for computer screens, tablets, smart-phones etc.

 speech
 Used for screen readers that "reads" the page out loud
 Incorrect (or no) DOCTYPE

 Lack of Valid HTML / CSS

 Vendor Specific CSS Styles

 Use a CSS Reset

 Using Cross Browser Testing Tools

 BrowseEmAll

 Browserling

 CrossBrowserTesting.com

 Browsershots
 Incorrect (or no) DOCTYPE

 Doctype should always be the very first line in your

html
 This simple one-line of code can make all the
difference between a cleanly rendered website and
a strange rendering
 So if some browsers acts up in any way check your
Doctype first!
 Lack of Valid HTML / CSS
 Different browsers interpret HTML and CSS differently
 For example
 if you forgot to close one <div> in your code. Now maybe Chrome
and Firefox will just add the missing </div> and it will render
correctly. Other browsers may not be so forgiving and the rendering
will look different without so much as a hint on what might be
wrong.
 And finding the missing closing tab manually can be quite
frustrating, especially on a larger web project.

 Luckily you can automatically validate your code using the

W3C Validators for HTML and CSS.
 Vendor Specific CSS Styles
 Whenever a browser vendor implements a new CSS functionality they
will often hide it behind a so called vendor specific CSS style.
 After the style has been standardized the vendor will often remove the
vendor specific version or add a modified version without the vendor prefix.
 Vendor Specific Prefixes types:
-moz-transform: skewX(-50deg);
 -ms- for Microsoft (Internet Explorer) -webkit-transform: skewX(-50deg);
 -moz- for Mozilla Foundation (Firefox) -ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
 -o- for Opera transform: skewX(-45deg);
 -webkit- for Safari and Chrome

 So to make sure your code works in all browsers you’ll need to add the
unprefixed version alongside all prefixed one’s
 Using CSS Resets
 What Is A CSS Reset?
 is a short, often compressed (minified) set of CSS rules that resets the
styling of all HTML elements to a consistent baseline.
 Every browser comes with a different set of internal, basic CSS styles
which apply if the current website does not override them
 For Example
 Margin- and padding-related differences that occur across different
browsers

 A few commonly used reset style sheets are:

 Normalize.css

 HTML5Reset

 Eric Meyers CSS Reset

 CSS attribute types  CSS3 Texts
 CSS-Float vs inline-block  CSS3 border-image
 CSS Navigation Bar Property
 CSS Image Gallery
 CSS3 colors
 Image Transparency -
Hover Effect  CSS3 Gradients
 opacity  CSS3 Shadow
 img:hover
 CSS3 Multi-column
 Image Sprites Layouts
 CSS-Outlines
 Google Fonts
 CSS-Dimensions
 Media Queries
 CSS-Scrollbars
 Text and box shadow  Quirk Mode