Cascading Style Sheets - Part 01

1.
Cascading Style SheetsHatem Mahmoud [email_address]

2.
Part 1

3.
Introduction

4.
What is CSS?

5.
What is CSS?Every web page is composed of HTML (HyperText Mark-up Language) code that describes the content

6.
Example: <p> An<strong> important </strong><font color="#FFFF00"> paragraph </font> . </p> Displays: An important paragraph . Repetitive and hard to maintain

7.
What is CSS?Layers of a web page: Content: Text, images, animation, video, etc.

8.
Presentation: How thecontent will appear to a human through a web browser, text reader, etc.

9.
Behavior: Real-time userinteraction with the page: validation, sorting, drag-n-drop, etc.

10.
What is CSS?CSS separates the presentation from the content

11.
Versions 1996 -CSS1 became a W3C recommendation: fonts, alignment, margins, borders, backgrounds, floating, etc.

12.
1998 – CSS2with advanced features: table cell display, sheets could import others, targeted different output media, etc.

13.
Some parts ofCSS2 were very difficult to implement, so the W3C decided to revise the specification

14.
Versions The nameof the revised version was “Cascading Style Sheets, Level 2 Revision 1”

15.
References to CSS2usually mean CSS2.1

16.
CSS2.1 is thelatest and current revision of the CSS2 specification

17.
CSS3 specification isstill in draft but some parts have been implemented by some browsers

18.
Linking CSS toHTML 1) Inline Styles: Using the style attribute which is supported by every HTML tag: <h1 style="color:red;"> My Headline </h1> The simplest way but repetitive across multiple HTML elements

19.
Linking CSS toHTML 2) Embedded Styles: Using the style tag: <style type="text/css"> h1{ font-family:Verdana } //all h1 tags .warning{ color:red } //tags with this class #footer{ font-size:10px } //tag with this id </style> <h1> My Header </h1> <p class=”warning” > WARNING </p> <div id=”footer” > eSpace 2008 </div> Repetitive across multiple pages

20.
Linking CSS toHTML 2) External Styles: Using separate files: mypage.html <head> <link type= "text/css" href= "nice.css" /> </head> nice.css h1{ font-family:Verdana } .warning{ color:red } #footer{ font-size:10px }

21.
Linking CSS toHTML Now, multiple HTML pages can share the same CSS file.

22.
Why CSS? Flexible,can be applied in several ways

23.
Easy to maintain

24.
Accessibility to differentusers with different devices.

25.
CSS caching =less bandwidth + fast loading

26.
CSS Syntax

27.
General Syntax Styledefinition: body{font-family:Verdana; font-size:9pt;}

28.
General Syntax Caseinsensitive

29.
Whitespace and linebreaks have no semantic value

30.
Comments: /* This is a comment */

31.
Properties Font: div{ color: black; } span { color: #00003D; font-size: 24px; font-family: Verdana, Arial; font-style: italic; font-weight: bold; text-decoration: underline; text-align:justify; ... }

32.
Properties Size units( relative and absolute ): px = Pixels on the screen em = Current font size ex = Height of lowercase "x" mm = Millimeters cm = Centimeters in = Inches (1 inch = 2,54 centimeters) pt = Points (1 point = 1/72 inches) pc = Picas (1 pica = 12 points)

33.
Properties Backgrounds: div{ background-color: Black; } body { background-image: url(logo.gif); background-color: white; background-attachment: fixed; background-position: right top; background-repeat: no-repeat; } body { background: white url(logo.gif) repeat-x fixed right top; }

34.
Selectors 1) Universalselector: * { margin: 0; padding: 0; } 2) Element type selector: span { font-family: Verdana } 3) Class selector: p.big { font-weight: bold; }

35.
Selectors 4) IDselector: #menu { font-size: 22pt; } // unique id 5) Attribute selector: input[type="submit"] { color: blue; }

36.
Selectors CSS3 newattribute selectors: a[href ^ ="http:"] { ... } /* matches a elements whose href attribute value starts with "http:" */ img[src $ =".png"] { ... } /* matches img elements whose src attribute value ends with ".png" */ div[id * ="foo"] { ... } /* matches div elements whose id attribute value contains "foo" */

37.
Selectors Grouping: div,p { font-family: Verdana } a img { border: none } ul li ol li { color: blue } #menu a, div li, .note { color: red }

38.
Selectors Child selector:ul>li { ... } <ul> <li> <ol> <li> Will not be matched. </li> </ol> </li> </ul>

39.
Selectors Adjacent siblingselector: - sibling = has the same parent element - adjacent = immediately following h2+p { ... } <div> <h2> Heading </h2> <p> Will be matched. </p> <p> Will not be matched. </p> </div>

40.
Selectors General siblingselector: - sibling = has the same parent element - general = just following h2~p { ... }

41.
Selectors Example: h2~p { ... } <p> Will not be matched. </p> <h2> Heading </h2> <p> Will be matched. </p> <div> <p> Will not be matched. </p> </div> <p> Will be matched. </p>

42.
Pseudo-classes (implicit) a:link{ ... } //Normal a:visited { ... } //Visited a:hover { ... } //Mouse hovers a.menu:hover { ... } a:active { ... } // Clicking textarea:focus { ... } li:first-child { ... } :lang(fr) { ... }

43.
Pseudo-classes (implicit) Newin CSS3 :nth-child(N) :nth-last-child(N) :nth-of-type(N) :nth-last-of-type(N) :last-child :first-of-type :last-of-type :only-child :only-of-type :root :empty :target :enabled :disabled :checked :not(S)

44.
Pseudo-elements (virtual) InCSS1 p :first-letter { ... } p :first-line { ... }

45.
Pseudo-elements (virtual) Newin CSS2 #breadcrumbs :before { content : "You are here:"; margin-right: 0.5em; } span.centimeters :after { content : "cm"; color: #cccccc; }

46.
Pseudo-elements (virtual) Newin CSS3 :: selection { ... } //represents a part of the document that’s been highlighted by the user, including text in editable text fields

47.
The Cascade

48.
The Cascade Styledeclarations cascade down to elements from many origins.

49.
The cascade combinesthe importance, origin, specificity, and source order of the style declarations to determine which declaration should be applied to a given element.

50.
The Cascade

51.
The Cascade Importance://Normal declaration p {font-size: 1em} //Important declaration p {font-size: 1em !important ;}

52.
The Cascade Importanceand origins priorities (low to high): 1. User agent declarations 2. Normal declarations in user style sheets 3. Normal declarations in author style sheets 4. Important declarations in author style sheets 5. Important declarations in user style sheets

53.
The Cascade Specificity:When multiple declarations (with the same importance and origin) try to set the same property to an element, the declaration with the most specific selector will take precedence.

54.
The Cascade Calculatingspecificity: 1. Inline styles (highest specificity) 2. Count ID selectors 3. Count class selectors ( .test ), attribute selectors ( [type="submit"] ), and pseudo-classes ( :hover ) 4. Count element type selectors ( div ) and pseudo-elements ( :first-letter )

55.
The Cascade Theprocess of the cascade: 1. For a given property, find all declarations that apply to a specific element. (user agent, author, user-defined). 2. Sort according to levels of importance and origins. 3. Sort declarations with the same level of importance and origin by selector specificity. 4. If declarations have the same level of importance, origin, and specificity, sort them by the order in which they’re specified

56.
Inheritance The processby which properties are passed from parent to child elements without explicit definition div { font-size: 20px; } <div> <p> My <em> cool </em> paragraph is <a href="#"> here </a>. </p> </div>

57.
Inheritance Exceptions (borders, backgrounds, etc.)

58.
But you canenforce it: p { background-image: inherit ; }

59.
CSS Layout

60.
Block vs Inline1) HTML block-level elements: May contain inline elements and other blocks

61.
Begin on newlines

62.
Examples: <h1>..<h6>, <p> , <ul> , <ol> , <li> , <table> , <tr> , <th> , <td> , <form> , <select> , <input> , <div> , etc.

63.
Block vs Inline2) HTML Inline (text-level) elements: Must be nested within blocks

64.
May contain onlytext and other inline elements

65.
Don't begin onnew lines

66.
Examples: <em>, <strong> , <a> , <img> , <abbr> , <span> , etc.

67.
Block vs InlineUsing the display property: #menu li { display: inline ; } #menu a { display: block ; } CSS does not affect the markup: Setting the display property to block for a span element doesn’t allow you to nest an h1 element inside it, because the HTML document type definition forbids that.

68.
Browser Work 1)Parsing: The browser reads the markup and builds a document object model (DOM) tree of nodes.

69.
Browser Work DOMTree:

70.
Browser Work 2)Rendering: Each node in the DOM tree is rendered as zero or more boxes

71.
Inline elements generateinline boxes

72.
Block elements generateblock boxes

73.
CSS Box BoxModel (for block-level elements):

74.
CSS Box InternetExplorer box model bug:

75.
CSS Box Dimensions:width = 352px

76.
height = 252px

77.
CSS Box Takecare: width=100%

78.
Any margin, padding,or border will damage the layout

79.
Solutions: 1. Leavewith the default value: width=auto (doesn't work with a floated element) 2. Use a fixed width: width=500px 3. Apply the margin, padding, or border to a nested element

80.
CSS Box Borders:div { border-style: solid; border-width: 1px; border-color: black; } div { border: dashed 1px black; } div { border-left: dotted 1px black; }

81.
CSS Box Marginsand paddings: div { margin: 10px } div { padding-right: 10px } div { margin: 10px 5px 0 3px } //top right bottom left div { padding: 10px 5px 3px } //top right-left bottom div { margin: 10px 3px } //top-bottom right-left

82.
CSS Box Collapsingmargins :

83.
when the verticalmargins of two elements are touching, only the margin of the element with the largest margin value will be honored

84.
If one elementhas a negative margin, the margin values are added together

85.
If both arenegative, the greater negative value is used.

86.
CSS Box Example: h1 { margin: 0 0 25px 0; } p { margin: 20px 0 0 0; } <h1> Heading Content </h1> <p> Paragraph content </p>

87.
CSS Box Toavoid collapsing, use a border or padding: h1 { margin: 0; } div { margin: 40px 0 0 0; border: 1px solid #000; } p { margin: 20px 0 0 0; } <h1> Heading Content </h1> <div> <p> Paragraph content </p> </div>

88.
Positioning The CSS position property takes the values: static The default position in the page flow relative Relative to its normal position in the flow absolute Relative to its containing block (the first ancestor that is not static ) fixed Relative to the browser window (regardless of scrolling) To change the position of a box, use the top, left, bottom, right properties (no effect with static )

89.
Positioning Boxes arepositioned in three dimensions

90.
To change thestack level, use z-index (default value is 0 ) img.bg{ position: absolute ; left:50px; top:0; z-index: 1 }

91.
Floating A floatedelement is one whose float property has the value right or left (the default is none )

92.
Floating an elementconverts it to a block

93.
A floated boxis shifted to the left or right as far as possible

94.
A floated boxmust have an explicit width. Otherwise, the results can be unpredictable

95.
Floating Elements belowa floated element will wrap around it:

96.
Floating To avoidthis, you can apply the clear property to the following element using: clear:left , clear:right or clear:both p2{ clear: left ; }

97.
Interaction If display:none , no box is generated, so float and position are ignored

98.
If position:absolute or position:fixed , float is ignored

99.
Workarounds and Hacks

100.
IE Conditional CommentsConditional comments are Microsoft’s recommended mechanism for delivering targeted CSS to Internet Explorer

101.
IE Conditional Comments

102.
Star Selector HackUsing the * html selector

103.
Should apply therule to any html element that’s the descendant of any other element

104.
As html is the root element, it’s never a descendant of any other element

105.
IE 6 andearlier versions don't understand this!

106.
Star Selector HackExample: .test {position: fixed;} * html .test {position: absolute;} Only IE 6 and earlier versions will apply the latter rule; other browsers will ignore it

107.
Backslash Hack Browsersshould ignore a backslash character in a property name: .test { height: 500px; he\ight: 400px; } IE 5.5 and earlier versions will ignore the whole declaration!

108.
Underscore Hack Browsersshould ignore the declaration of a property that starts with an underscore because it becomes an unknown property: .test { position: fixed; _position: absolute; } IE 6 and earlier versions will ignore the underscore and apply the declaration!

109.
Tools

110.
Tools Adobe Dreamweaver

111.
Tools Firebug (Firefoxextension)

112.
References

113.
References http://www.w3.org/

114.
http://reference.sitepoint.com/css/

115.
http://www.w3schools.com/css/

116.
http://css.maxdesign.com.au/

117.
Thank You! HatemMahmoud [email_address]

Cascading Style Sheets - Part 01

In this document

More Related Content

What's hot

Viewers also liked

Similar to Cascading Style Sheets - Part 01

Recently uploaded

Cascading Style Sheets - Part 01