Cascading Style Sheets - Part 01

44 %
56 %
Information about Cascading Style Sheets - Part 01
Design

Published on January 27, 2009

Author: HatemMahmoud

Source: slideshare.net

Description

Introduction to CSS

Cascading Style Sheets Hatem Mahmoud [email_address]

Part 1

Introduction

What is CSS?

What is CSS? Every web page is composed of HTML (HyperText Mark-up Language) code that describes the content Example: <p> An <strong> important </strong><font color=&quot;#FFFF00&quot;> paragraph </font> . </p> Displays: An important paragraph . Repetitive and hard to maintain

Every web page is composed of HTML (HyperText Mark-up Language) code that describes the content

Example:

Displays:

Repetitive and hard to maintain

What is CSS? Layers of a web page: Content: Text, images, animation, video, etc. Presentation: How the content will appear to a human through a web browser, text reader, etc. Behavior: Real-time user interaction with the page: validation, sorting, drag-n-drop, etc.

Content: Text, images, animation, video, etc.

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

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

What is CSS? CSS separates the presentation from the content

CSS separates the presentation from the content

Versions 1996 - CSS1 became a W3C recommendation: fonts, alignment, margins, borders, backgrounds, floating, etc. 1998 – CSS2 with advanced features: table cell display, sheets could import others, targeted different output media, etc. Some parts of CSS2 were very difficult to implement, so the W3C decided to revise the specification

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

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

Some parts of CSS2 were very difficult to implement, so the W3C decided to revise the specification

Versions The name of the revised version was “Cascading Style Sheets, Level 2 Revision 1” References to CSS2 usually mean CSS2.1 CSS2.1 is the latest and current revision of the CSS2 specification CSS3 specification is still in draft but some parts have been implemented by some browsers

The name of the revised version was “Cascading Style Sheets, Level 2 Revision 1”

References to CSS2 usually mean CSS2.1

CSS2.1 is the latest and current revision of the CSS2 specification

CSS3 specification is still in draft but some parts have been implemented by some browsers

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

The simplest way but repetitive across multiple HTML elements

Linking CSS to HTML 2) Embedded Styles: Using the style tag: <style type=&quot;text/css&quot;> 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

Repetitive across multiple pages

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

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

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

Why CSS? Flexible, can be applied in several ways Easy to maintain Accessibility to different users with different devices. CSS caching = less bandwidth + fast loading

Flexible, can be applied in several ways

Easy to maintain

Accessibility to different users with different devices.

CSS caching = less bandwidth + fast loading

CSS Syntax

General Syntax Style definition: body{font-family:Verdana; font-size:9pt;}

Style definition:

General Syntax Case insensitive Whitespace and line breaks have no semantic value Comments: /* This is a comment */

Case insensitive

Whitespace and line breaks have no semantic value

Comments:

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; ... }

Font:

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

Size units ( relative and absolute ):

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; }

Backgrounds:

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

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

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

CSS3 new attribute selectors:

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

Grouping:

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

Child selector:

Selectors Adjacent sibling selector: - 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>

Adjacent sibling selector:

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

General sibling selector:

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>

Example: h2~p { ... }

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) { ... }

Pseudo-classes (implicit) New in 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)

New in CSS3

Pseudo-elements (virtual) In CSS1 p :first-letter { ... } p :first-line { ... }

In CSS1

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

New in CSS2

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

New in CSS3

The Cascade

The Cascade Style declarations cascade down to elements from many origins. The cascade combines the importance, origin, specificity, and source order of the style declarations to determine which declaration should be applied to a given element.

Style declarations cascade down to elements from many origins.

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

The Cascade

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

Importance:

The Cascade Importance and 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

Importance and origins priorities (low to high):

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.

Specificity:

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

Calculating specificity:

The Cascade The process 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

The process of the cascade:

Inheritance The process by 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=&quot;#&quot;> here </a>. </p> </div>

The process by which properties are passed from parent to child elements without explicit definition

Inheritance Exceptions ( borders, backgrounds, etc.) But you can enforce it: p { background-image: inherit ; }

Exceptions ( borders, backgrounds, etc.)

But you can enforce it:

CSS Layout

Block vs Inline 1) HTML block-level elements: May contain inline elements and other blocks Begin on new lines Examples: <h1>..<h6> , <p> , <ul> , <ol> , <li> , <table> , <tr> , <th> , <td> , <form> , <select> , <input> , <div> , etc.

May contain inline elements and other blocks

Begin on new lines

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

Block vs Inline 2) HTML Inline (text-level) elements: Must be nested within blocks May contain only text and other inline elements Don't begin on new lines Examples: <em> , <strong> , <a> , <img> , <abbr> , <span> , etc.

Must be nested within blocks

May contain only text and other inline elements

Don't begin on new lines

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

Block vs Inline Using 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.

Using the display property:

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.

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

Browser Work DOM Tree:

DOM Tree:

Browser Work 2) Rendering: Each node in the DOM tree is rendered as zero or more boxes Inline elements generate inline boxes Block elements generate block boxes

Each node in the DOM tree is rendered as zero or more boxes

Inline elements generate inline boxes

Block elements generate block boxes

CSS Box Box Model (for block-level elements):

Box Model (for block-level elements):

CSS Box Internet Explorer box model bug:

Internet Explorer box model bug:

CSS Box Dimensions: width = 352px height = 252px

Dimensions:

width = 352px

height = 252px

CSS Box Take care: width=100% Any margin, padding, or border will damage the layout Solutions: 1. Leave with 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

Take care: width=100%

Any margin, padding, or border will damage the layout

Solutions:

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

Borders:

CSS Box Margins and 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

Margins and paddings:

CSS Box Collapsing margins : when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored If one element has a negative margin, the margin values are added together If both are negative, the greater negative value is used.

Collapsing margins :

when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored

If one element has a negative margin, the margin values are added together

If both are negative, the greater negative value is used.

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

Example :

CSS Box To avoid 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>

To avoid collapsing, use a border or padding:

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 )

The CSS position property takes the values:

To change the position of a box, use the top, left, bottom, right properties (no effect with static )

Positioning Boxes are positioned in three dimensions To change the stack level, use z-index (default value is 0 ) img.bg{ position: absolute ; left:50px; top:0; z-index: 1 }

Boxes are positioned in three dimensions

To change the stack level, use z-index (default value is 0 )

Floating A floated element is one whose float property has the value right or left (the default is none ) Floating an element converts it to a block A floated box is shifted to the left or right as far as possible A floated box must have an explicit width. Otherwise, the results can be unpredictable

A floated element is one whose float property has the value right or left (the default is none )

Floating an element converts it to a block

A floated box is shifted to the left or right as far as possible

A floated box must have an explicit width. Otherwise, the results can be unpredictable

Floating Elements below a floated element will wrap around it:

Elements below a floated element will wrap around it:

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

To avoid this, you can apply the clear property to the following element using: clear:left , clear:right or clear:both

Interaction If display:none , no box is generated, so float and position are ignored If position:absolute or position:fixed , float is ignored

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

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

Workarounds and Hacks

IE Conditional Comments Conditional comments are Microsoft’s recommended mechanism for delivering targeted CSS to Internet Explorer <!--[if IE 7]> <link href=&quot;ie7.css&quot; type=&quot;text/css&quot;> <![endif]--> <!--[if !IE 6]> <p> Other than IE 6 </p> <![endif]-->

Conditional comments are Microsoft’s recommended mechanism for delivering targeted CSS to Internet Explorer

IE Conditional Comments <!--[if gte IE 6]> <p> Greater than or equal </p> <![endif]--> <!--[if (IE 6)|(IE 7)]> <p> IE 6 or IE 7 </p> <![endif]-->

Star Selector Hack Using the * html selector Should apply the rule to any html element that’s the descendant of any other element As html is the root element, it’s never a descendant of any other element IE 6 and earlier versions don't understand this!

Using the * html selector

Should apply the rule to any html element that’s the descendant of any other element

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

IE 6 and earlier versions don't understand this!

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

Example:

Only IE 6 and earlier versions will apply the latter rule; other browsers will ignore it

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

Browsers should ignore a backslash character in a property name:

IE 5.5 and earlier versions will ignore the whole declaration!

Underscore Hack Browsers should 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!

Browsers should ignore the declaration of a property that starts with an underscore because it becomes an unknown property:

IE 6 and earlier versions will ignore the underscore and apply the declaration!

Tools

Tools Adobe Dreamweaver

Adobe Dreamweaver

Tools Firebug (Firefox extension)

Firebug (Firefox extension)

References

References http://www.w3.org/ http://reference.sitepoint.com/css/ http://www.w3schools.com/css/ http://css.maxdesign.com.au/

http://www.w3.org/

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

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

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

Thank You! Hatem Mahmoud [email_address]

#menu presentations

Add a comment

Related presentations

Related pages

CSS Standard - Cascading Style Sheets

Cascading Style Sheets ... CSS Cascading and Inheritance Level 3: CR: PR: ... A part of the CSS WG in November 2010.
Read more

Cascading Style Sheets, level 1 - World Wide Web ...

Cascading Style Sheets, ... This document specifies level 1 of the Cascading Style Sheet mechanism ... the part of the UA's drawing surface onto which ...
Read more

Learn Cascading Style Sheet (CSS)- 01 inline style - YouTube

Learn Cascading Style Sheet (CSS)- 01 inline style ... CASCADING STYLE SHEETS (CSS) TUTORIAL PART ONE - Duration: 1:12:15. Debasis Paul 376 views.
Read more

Cascading Style Sheets - Wikipedia, the free encyclopedia

Cascading Style Sheets; Style sheet CSS Zen Garden; The ... selectors are used to declare which part of the markup a style applies to by matching tags and ...
Read more

Using Cascading Style Sheets - miva.com

... WHETHER OR NOT ARISING IN WHOLE OR PART FROM MIVA ... MM1074-01 2 The Cascading Style Sheet ... Using Cascading Style Sheets.book
Read more

Cascading Style Sheets (CSS) - Yola

matting and presenting information using a W3C technology called Cascading Style Sheets ... (part 1 of 2). ... Cascading style sheets are “cascading ...
Read more

Cascading Style Sheets Class Usage in SharePoint Foundation

Cascading style sheets ... Cascading style sheets (CSS) define style rules that a developer can ... Sets span styles on the Web Part selection ...
Read more