ECA 228 Internet/Intranet
Design I
Cascading Style Sheets
CSS rules
RULE
Declaration
h1 { color: red; }
Selector
Property
ECA 228 Internet/Intranet Design I
Value
CSS rules
each rule has 2 parts
–
–
selector: determines to which element a rule is applied
declaration: the rules to apply to the selector
cont …
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
h1 { color: red; }
to apply a rule to more than one element,
separate them with a comma
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
class
–
cont …
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
context
–
cont …
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
context
–
cont …
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
context
–
cont …
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
margin
border
padding
OUR CONTENT
ECA 228 Internet/Intranet Design I
© Copyright 2026 Paperzz