Embed Size (px)
Citation preview
Today’s objectives
Presentational | Inline | Block | Validate
CSS | Rules | Declarations
CASCADING STYLE SHEETS
CSS
CSS Level 1 – CSS1
First version of CSS (CSS Level 1 - CSS1) in 1996.
Included properties for font, color, and spacing instructions to page elements.
Lack of browser support prevented widespread use of CSS.
CSS2
CSS Level 2 (CSS2) released in 1998.
Added positioning properties allowed CSS to be used for page layout.
Introduced styles for other media types (such as print).
CSS2
CSS Level 2, Revision 1 (CSS2.1) minor adjustments to CSS2 and is currently a working draft or a Candidate Recommendation (W3C).
CSS2.1 and CSS3
CSS 2.1 builds on CSS2 which builds on CSS1.
Supports media-specific style sheets - authors may tailor presentation of documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.
CSS 2.1 is derived from and will replace CSS2.
CSS3 specification – Working draft
CSS
Most browsers support majority of CSS1, CSS2, and CSS2.1 specifications.
Some browsers already support features from CSS Level 3 (CSS3) - still in development.
Source : www.w3.org/Style/CSS.
CSS
CSS3 adds support for: vertical text improved handling of tables improved integration with XML
technologies multiple background images Etc.
Source : www.w3.org/Style/CSS.
The Benefits of Using CSS
Better type and layout controls. Less work. Change appearance of
site by editing one style sheet. Potentially smaller file sizes and
faster download.
The Benefits of Using CSS
More accessible sites. Meaningfully marking up content makes it more accessible for nonvisual or mobile devices.
Reliable browser support. Almost all browsers support all of CSS1 and most of CSS2.
WAYS TO INCLUDE STYLES IN DOCUMENTS
CSS
Inline Styles
<h1 style="color: #C7AA8D;">Heading 1</h1>
Internal Style Sheets
<head>
<style type="text/css">
h1 { color : #C0C0C0; }
font-family: Arial; font-size: 1.5em; }
p { font-size: small;
font-family: sans-serif; }
</style>
</head>
External Style Sheets | Linked with HTML | 1 or more sheets
<head>
<link rel="stylesheet" type="text/css" href=“myStylesA.css“ />
<link rel="stylesheet" type="text/css" href=“myStylesB.css“ />
</head>
rel="stylesheet" | identifies the type of link, link to a style sheet.
type="text/css" tells browser what type of data, a text file with CSS.
External Style Sheets | Link with CSS
<style type="text/css">@import
url(myStyle.css);</style>
External Style Sheets | Link with CSS
<style type="text/css">
@import url(bodyCss.css);@import url(paragraphsCss.css);p { color:red; }
</style>
Link to Master External Style Sheets with @import directives
<head>
<link rel="stylesheet" type="text/css" href=“Import.css“ />
</head>
Import.css file contains@import url(bodyCss.css);
@import url(paragraphsCss.css);
Link to Master External Style Sheets with @import directives Benefit of using single external style
with @import directives :
Do not need to modify html in pages, when adding or removing sheets.
If you divide styles or add additional styles sheets, just open the main style sheet containing the @import directives and add or remove @import url(fileName.css).
RULES, SELECTORS, DECLARATIONS
CSS
CSS Grammer
Made up of one or more style instructions (called rules).
Rules describe how elements get displayed.
h1 { color: green; } or h1 {color : rgb(255, 0,0);}
p { font-size: small; font-family: sans-serif; }
Style sheet | Rules
p { font-family: sans-serif; }
Rule
Style sheet | Rules
p { font-size: small; font-family: sans-serif; }
Rule
Style sheet | Rules
p { font-size: small; font-family: sans-serif; }
Rule Can be written this way
Cascading Style Sheets
Style is set of one or more rules that attached to elements in document (<h1>, <p>…)
h1 { color: #000000; }
The Rule
h1 { color : #C0C0C0; }
Rule
The Rule
h1 {color : #c0c0c0;}
Selector Declaration
Rule
(What to format)
The Rule
h1 { color : #c0c0c0;
font-family : Arial;
font-size : 2em;
}
Selector
Declaration block
Rule
The Declaration
h1 { color : #C0C0C0; }
Property
Declaration has two parts separated by a colon:
Property - part before the colon Value - part after the colon
Value
The Declaration
h1 { color : #C0C0C0; }
Property
Property is a quality or characteristic that something possesses (e.g., color, size, style).
Value
The Declaration
h1 { color : #C0C0C0; }
Property
Values get assigned to CSS properties, a color, length, URL, or keyword (small).
Value
The Declaration
h1 { color : #c0c0c0; font-size : 2em;
}
p { font-family : Arial;}
Brackets distinguish declarations | rules
Colon separates property and values
Semicolon separates declarations
TYPES OF SELECTORS
CSS
Types of selectors
Tag or HTML Selectors: Page-Wide Styling
Class Selectors: Pinpoint Control ID Selectors: Specific Page Elements The Universal Selector (Asterisk)
* { font-weight: bold; }
Types of selectors | HTML | Tag
h1 {color : #c0c0c0;}body {background-color : #FFFFFF;}p {padding : 10px;}
Types of selectors | Classes
Classes (applies to more than one type of element)
.mytext {font-family: Verdana; font-size: 14px;}
<p class=“mytext”>Hello World</p>
<span class=“mytext”>Learning CSS</span>
Dependent Classes (when the class is applied to a specific tag - .hiLight only applies to h1 element)
h1.hiLight {background-color : blue;}
<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>
Types of selectors | Dependent Classes
Types of selectors | Dependent Classes Dependent Classes (when the class is applied
to a specific tag.)
.hiLight {background-color : yellow;}h1.hiLight {background-color : blue;}
<h1 class=“hiLight”>Hello World</h1><h2 class=“hiLight”>Hello World</h2><p class=“hiLight”>Hello World</p>
Types of selectors | multiple classesMultiple classes applied to the same tag. Add two or more class names to tag. List more
than two classes but need space between class names.
.hiLight {color : blue;}
.banner {font-family : Arial, sans-serif;}
<p class=“hiLight banner">Hello world</p>
Types of selectors | Class NamesClass names Use meaningful names Start with period Class name must always start with a letter.
.3Rivers is invalid .threeRivers is valid | .p3Rivers is valid
Can contain any letter, number, hyphen or underscore
Can NOT contain symbols like &, *, or !. Case sensitive – mytext is different from myText
Types of selectors | Class NamesName classes (and IDs) by purpose
not appearance Use names that describe purpose of the
style. If red is used to highlight errors in a
report, then: .redColor – is a poor name
.showErrors – is a better name
Types of selectors | ID
ID selectors identify: Major sections Unique content | a rule to ONE element on a page. Configured with #idname
#banner { background-color : #FF00FF;}
<div id=“banner”></div>
Types of selectors | ID
Creates a rule for an id titled “banner”.
Red, large, italic font.
Applies to ID “banner”<style type="text/css">
#banner { color : #FF0000;font-size:2em; font-style: italic;
}
</style>
<h1 id=“banner”>Hello world!
</h1>
Classes versus IDs
Identify sections that occur once per page.
Identify the unique parts of a page (e.g. branding).
.classes #IDs A style is
needed several times on a page.
ID selectors have priority over classes.
ID selectors have priority over class selectors. If browser finds two styles that specify
different colors to the same tag, ID styles apply.
.bigtext { background-color : red; }#hiLight { background-color : blue; }
<p class="bigtext" id="hiLight" >Hello world</p>
Types of selectors | ID NamesDon’t use ID names based on position Use name based on purpose of content:
Poor#topright#colMid#top#bottom#sideNav
Better#events#mainNav#branding#siteInfo#news
Combining Rules | Group Selectors
h1 { color : #F1CD33; } h2 { color : #F1CD33; } h3 { color : #F1CD33; } h4 { color : #F1CD33; } h5 { color : #F1CD33; } h6 { color : #F1CD33; }
OR Styling Groups of Tags
h1, h2, h3, h4, h5, h6 { color : #F1CD33; }
Combining Rules | Group Selectors Tags only
h1, h2, h3, h4, h5, h6 { color : #F1CD33; }
Combination of selector types in a group selector.
h1, p, .copyright, #banner { color: #CCCCCC; }
(sets color of tags, class, ids to #CCCCCC)
