Cascading Style Sheets CSS CSS All web pages
Cascading Style Sheets CSS
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 • h 1 { font-size: 12 pt; color: red }
Style Precedence 1. External style sheet 2. Embedded styles 3. 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 <h 1 style=“color: red; font-family: sanssarif”>IU</h 1>
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. , h 1) in a web page • Example <style> h 1 {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 {attribute 1: value 1; attribute 2: value 2; …} – 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”> h 1 {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 – h 1, h 2, h 3, h 4, h 5, h 6 {color: red; fontfamily: 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 Text. Edit • Type style declarations – h 1 {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> h 1 {font-family: sansserif; color: orange} b {color: blue} Text file of css named “stylesheet” html file
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> <h 1 class=class_name>something</h 1> – 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} style Welcome <div class=sitetitle>Welcome</DIV> HTML code Resulting text
- Slides: 24
