Cascading Style Sheets CSS
Cascading Style Sheets CSS
Mar 19, 2016
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 - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
