Cascading Style Sheets CSS - PowerPoint PPT Presentation

cascading style sheets css n.
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets CSS PowerPoint Presentation
Download Presentation
Cascading Style Sheets CSS

play fullscreen
1 / 24
Cascading Style Sheets CSS
Download Presentation
Download Presentation

Cascading Style Sheets CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Cascading Style SheetsCSS

  2. CSS • All web pages can be broken down into content areas • These areas can updated by changing the code on every page (in the HTML file) - or - • By using cascading style sheets!

  3. Advantages of Style Sheets • Saves time • Easy to change • Keep consistency • Give you more control over layout • Make it easy to create a common format for all the Web pages regardless if your website is 1 page or 10,000 pages

  4. Applying a single style sheet to multiple documents

  5. Basic Structure of a Style • Each definition contains: • A property • A colon • A value • A semicolon to separate two or more values • Can include one or more values • h1 { font-size:12pt; color:red }

  6. Style Precedence • External style sheet • Embedded styles • Inline styles

  7. Three Style Types • Inline styles • Add styles to each tag within the HTML file • Use it when you need to format just a single section in a web page • Example <h1 style=“color:red; font-family: sans-sarif”>IU</h1>

  8. Three Style Types • Embedded or internal styles • A style is applied to the entire HTML file • Use it when you need to modify all instances of particular element (e.g., h1) in a web page • Example <style> h1 {color:red; font-family:sans-serif} </style>

  9. Creating an Embedded Style <head> <title>Embedded Example</title> <style> (default is “text/css”) Style declarations </style> </head> • A style declaration: • Selector {attribute1:value1; attribute2:value2; …} • Selector = an element in a document (e.g., a header or paragraph)

  10. An Example of an embedded style (p. 353 Fig 7-2) <head> <title>Getting Started</title> <style type=“text/css”> h1 {font-family: sans-serif; color: organge} </style> </head>

  11. Three Style Types • External style sheets • An external style sheet is a text file containing the style definition (declaration) • Use it when you need to control the style for an entire web site • Example • h1, h2, h3, h4, h5, h6 {color:red; font-family:sans-serif} • Save this in a new document using a .css extension

  12. Creating an External Style Sheet • Open a new blank document in Notepad or TextEdit • Type style declarations • h1 {color:red; font-family:sans-serif;} • Do not include <style> tags • Save the document as style.css

  13. Linking to Style Sheets 1 • Open an HTML file • Between <head> and </head> add <link href=URL rel=“relation_type” type=“link_type”> • URL is the style.css • Relation_type=“stylesheet” • Link_type=“text/css” • Save this file and the .css file in the same web server directory

  14. <head> <title>Getting Started</title> <link href=“style.css” rel=“stylesheet” type=“text/css” /> </head> h1 {font-family: sans-serif; color: orange} b {color: blue} An example of an external style sheet with an original html file Text file of css named “stylesheet” html file

  15. Standard CSS Practices • Wherever possible, place your styles in external style sheets • Take advantage of the power of CSS to have control over an entire Web site

  16. Style Sheet Strategies • At the top level of your web site: define a global cascading style sheet • Refine styles at sublevels with a local cascading style sheet • Try to avoid using styles in tags

  17. Using IDs and Classes • Use an id to distinguish something, like a paragraph, from the others in a document. • For example, to identify a paragraph as “head”, use the code: <p id=“head”>… </p>

  18. Working With Ids • To create an ID for a specific tag, use the property: <element id=“id_name”> For example: <p id=“main_content”> • To apply a style to a specific ID, use: #id_name { style attributes and values } For example: #main_content { color: red }

  19. Classes • HTML and XHTML require each id be unique– therefore an id value can only be used once in a document. • You can mark a group of elements with a common identifier using the class attribute. <element class=“class”> … </element>

  20. Applying a style to a class

  21. Working With Classes • To create a class, enter the following in the HTML tag: <element class=class_name> <h1 class=class_name>something</h1> • class_name is a name to identify this class of tags • To apply a style to a class of tags, use: .class_name {style attributes}

  22. Working With Classes and Ids • The difference between the Class property and the ID property is that the value of the ID property must be unique: • you can’t have more than one tag with the same ID value • You can apply the same Class value to multiple document tags

  23. Working With DIV • <div> tag is used for blocks of content, e.g., paragraphs, block quotes, headers, image areas • To create a container for block-level elements, use: • <div class=class_name> • Block-level elements • </div> • Class_name is the name of the class • You can substitute the ID proper for the Class property (with ID, the syntax for CSS style, #id_name {style attributes and values}

  24. Working With <div> (p. 372) div.sitetitle {font-weight:bold} style Welcome Resulting text <div class=sitetitle>Welcome</DIV> HTML code