24
Cascading Style Sheets CSS
Cascading Style SheetsCSS
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!
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
Applying a single style sheet to multiple documents
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
}
Style Precedence
1. External style sheet2. Embedded styles3. Inline styles
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>
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>
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)
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>
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
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
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
An example of an external style sheet with an original html file
<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}
html file
Text file of css named “stylesheet”
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
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
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>
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 }
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>
Applying a style to a class
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}
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
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}
Working With <div> (p. 372)
div.sitetitle {font-weight:bold}
<div class=sitetitle>Welcome</DIV>
style
HTML code
Welcome
Resultingtext
