21
ECA 228 Internet/Intranet Design I Cascading Style Sheets
ECA 228 Internet/Intranet Design I
Cascading Style Sheets
ECA 228 Internet/Intranet Design I
CSS rules
RULE
h1 { color: red; }
Declaration
Selector Property Value
ECA 228 Internet/Intranet Design I
CSS rules cont …
each rule has 2 parts– selector: determines to which element a rule is applied– declaration: the rules to apply to the selector
property: the name of the CSS property that describes the formatting being applied
value: an allowable option to set or describe the property
a rule may have more than one declaration– semicolon must end declarations– semicolon is optional for the last pair
ECA 228 Internet/Intranet Design I
Applying CSS
can be applied three ways: 1. Internal 2. External 3. Inline
Internal– rules are placed inside <style> tags in <head> section
<style type=“text/css”>
h1 { color: red; }
</style>
ECA 228 Internet/Intranet Design I
CSS Internal Example
<html><head>
<title>CSS Example</title><style type=“text/css”>
h1 { color: red;
}
</style></head>
<body> . . .
ECA 228 Internet/Intranet Design I
Selectors
element type
to apply a rule to more than one element, separate them with a comma
h1 { color: red; }
h1, h2 { color: red; }
<h1>This will be red></h1>
<h2>So will this</h2>
ECA 228 Internet/Intranet Design I
Selectors cont …
class– can be used more than once in HTML– case sensitive– prefixed with dot
.redText { color: red; }
<h1 class=“redText”>This will be red</h1>
ECA 228 Internet/Intranet Design I
Selectors cont …
class cont …
– can be used alone or contextually with elements
h1.redText { color: red; }
<h1 class=“redText”>This will be red</h1>
<h2 class=“redText”>This will not</h2>
ECA 228 Internet/Intranet Design I
Selectors cont …
id– unique identifier – can only be used once in HTML– prefixed with hash or pound sign #
#redText { color: red; }
<h1 id=“redText”>This will be red</h1>
<h2 id=“redText”>This will be red</h2> ILLEGAL
ECA 228 Internet/Intranet Design I
Selectors cont …
context– nested elements can be considered as parent/child– nested relationship is indicated without use of
comma
h1 em { color: red; }
<h1>This word is <em>red</em></h1>
ECA 228 Internet/Intranet Design I
Selectors cont …
context cont …
– many properties are inherited ie, if a property belongs to the parent, it also applies to the
child
#div1{ color: red; }
<div id=“div1”>
<h1>This is my header</h1>
</div>
ECA 228 Internet/Intranet Design I
Selectors cont …
context cont …
– other properties, such as borders, are not inherited
#border1{ border-style: double;
border-width: thin; }
<div id=“border1”>
<h1>This is my header</h1>
<p>This is my paragraph</p>
</div>
ECA 228 Internet/Intranet Design I
Selectors cont …
context cont …
– classes or ids can be nested inside one another
#contentArea .green{ color: green; }
<div id=“contentArea”>
<h1>This is <span class=“green”>green</span></h1>
<p>This is <span class=“green”>green</span> </p>
</div>
ECA 228 Internet/Intranet Design I
Selectors cont …
pseudo-class– special type of class that allows formatting based on
a state or condition if a link has been visited or not if the mouse passes over the link when the link is clicked
a:link{ color: blue; text-decoration: none; }
a:visited{ color: pink; text-decoration: none; }
a:hover{ color: purple; text-decoration: underline; }
a:active{ color: red; text-decoration: underline; }
ECA 228 Internet/Intranet Design I
Selectors cont …
pseudo-class– special type of class that allows formatting based on
a state or condition first letter of every paragraph first line of every paragraph
p:first-line{ font-size: 120%; }
p:first-letter{ font-size: 150%; font-weight: bold; }
ECA 228 Internet/Intranet Design I
Applying CSS
can be applied three ways: 1. Internal 2. External 3. Inline
External– external stylesheet is a separate document– to apply the same stylesheet to more than one page
of a website– provides consistent look– to modify look of site, make changes in one place
ECA 228 Internet/Intranet Design I
Applying CSS
External cont …
– no HTML in external stylesheet– no <style> tags in external stylesheet– save as text file, with .css extension– to apply external stylesheet to an HTML document,
link the document from inside the <head> section
<link rel=“stylesheet” type=“text/css” href=“myStyle.css” />
ECA 228 Internet/Intranet Design I
Applying CSS
External cont …
– an HTML document can link to more than one external stylesheet at a time, as well as an internal sheet
– if a conflict occurs, precedence is given to the rule defined last
– URLs in an external stylesheet are relative to the location of the stylesheet, not the document linking to it
ECA 228 Internet/Intranet Design I
Applying CSS
Inline– used to apply style locally– within an HTML tag use style as an attribute, the rule
as the value– separate definitions with a semicolon
<h1>This word is <span style=“color:red;”>red<span>.</h1>
ECA 228 Internet/Intranet Design I
Comments
CSS comments
/* This is a comment */
– using comments is a good way to debug a stylesheet which is not working
– do not confuse /* */ with <! – – – – >
ECA 228 Internet/Intranet Design I
Box Model
OUR CONTENTmargin
border
padding
