Cascading Style Sheets:
Basics
I450 Technology Seminar
What is CSS?
A set of rules for displaying markup
What is CSS?
A set of rules for displaying markup
content
Cascading:
What is CSS?
A set of rules for displaying markup
content
Cascading:
Display rules “cascade” down
The most specific rule is used
Styles Sheet:
The Need for CSS
The Need for CSS
Fixing kludges in HTML
The Need for CSS
Fixing kludges in HTML
The Need for CSS
Fixing kludges in HTML
CSS Example
Visual Display in HTML
<h1>
<font color=‘red’ face=“Georgia, Times New Roman, Times, serif”>
This will be a heading 1 in red Georgia font</font></h1>
<h1><font color=‘red’ face=“Georgia, Times New Roman, Times, serif”>
Every time I want my text to look the same,
Style Rules
CSS style rules look like this:
Selector {
CSS Reference
Inline Style Sheet
Using a Style Attribute
<h1 style=“color:red; font-family: Georgia, Times New Roman, Times, serif”>
This also shows up as heading 1 in red Georgia font. I don’t have to use the font tag any more. </h1>
<h1 style=“color:red; font-family: Georgia, Times New Roman, Times, serif”> However, I still have to retype or cut and paste the markup every time I want to use the same style.</h1>
Inline Style Sheet
Using a Style Attribute
In-Class exercise:
Inline Style Sheet
In-Class exercise:
Create an inline stylesheet that makes all paragraph text black,
centered, and 12 pixels in size.
<html>
<head><title>black, centered, 12px text</title></head>
<body>
<p style=“color:black; text-align:center; font-size:12px”>
This is black, 12px, centered text.</p>
Embedded Style Sheet
Using a Style Element
<html>
<head><title>Embedded style sheet</title>
<style type=“text/css”>
h1 {color:red; font-family: Georgia, Times New Roman, Times, serif;} </style>
</head><body>
<h1>This will also appear as a heading 1 in red Georgia font. In the head of this document, I declared an embedded style sheet that will make all h1 tags in this document red with Georgia font</h1>
Embedded Style Sheet
Using a Style Element
In-Class exercise:
Embedded Style Sheet
Using a Style Element
In-Class exercise:
Create an embedded stylesheet that makes all paragraph text blue,
background-color #777777, and 14 pixels in size.
<html>
<head><title>Embedded style sheet</title> <style type=“text/css”>
p {color:blue; background-color:#777777; font-size:14px;} </style>
</head><body>
Class Selectors
<html><head><title>Embedded style sheet</title>
<style type=“text/css”>
.red {color:red; font-family: Georgia, Times New Roman, Times, serif;} </style>
</head><body>
<h1 class=“red”>This will also appear as a heading 1 in red Georgia font. In the inline style sheet I declared a generic class style that applies red Georgia to ANY element declared as class red. I simply change a value in the style element in the head and all elements using that style will change to match</h1>
<p class=“red”>
This will also be in red Georgia font. Now I can be very specific when I apply styles, but I still have to add the same markup in the HEAD to each of my pages. How do I make all my pages use the same styles without copying markup to each page?
Linked Style Sheets
<html>
<head><title>Linked style sheet</title>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
</head><body>
<h1 class=“red”>This will also appear as a heading 1 in red Georgia font. In the head of this document I declared a link to an outside stylesheet named
“mystyle.css”. In that external stylesheet I place all of the style declarations I was using in my inline stylesheet</h1>
<p>
Now I can change the way all of my pages display simply by modifying a value in my single external stylesheet. How efficient!
Example External Stylesheet
h1.redH1 {color:red;
Linked Style Sheet
Using an External Stylesheet
In-Class exercise:
Linked Style Sheet
Using an External Stylesheet
In-Class exercise:
Create an external stylesheet that defines a new style named
phunky that makes text pink, centered, and bold. The sheet
should also make the background color of the page
Cascading revisited
When using multiple styles that
Cascading revisited
When using multiple styles that
conflict, which will be displayed?
Order:
1.
Inline style sheet
Style Rule Values
Colors:
Names for some:
blue, red, green, pink
Hexadecimal
#0000FF, #FF0000, #00FF00, #FF3399
RGB
rgb(0,0,255), rgb(255,0,0), rgb(0,255,0)
RGB%
Style Rule Values
Font size:
px for pixels (a dot on the screen)
font-size: 12px
pt for point (1/72 of an inch)
font-size: 12pt
pc for pica (12 points)
Modifying Hyperlinks
We can modify the way hyperlinks appear
by creating style rules modifying the
<a> tag with the following
“pseudo-classes”:
link
Modifying Hyperlinks
a:link {color:#0000ff}
a:visited {color: #00ff00}
a:hover {color:fuschia; font-weight:bold}
a:active {font-size:30pt}
Modifying Hyperlinks
You can also combine a class selector
with a pseudo-class:
a.outsidelink:link {color:#0000ff}
a.insidelink:visited {color: #00ff00}
a.fun:hover
Span and Div
<span> and <div> are tags that let you
select a group of elements and apply styles to
them
<span> is an inline tag
no breaks are added before or after
<span></span>
<div> is a block tag
a break is usually added by the browser before
Span and Div
<html><head><title>Span and Div</title>
<style type=“text/css”>
.red {color:red; font-family: Georgia; font-weight:bold;} </style>
</head><body>
<p>This will also appear as normal paragraph text except <span class=“red”>here because I made the text red,bold, and Georgia font without breaking up the paragraph.</span> Now I am back to normal... </p>
<p>
I start off as normal paragraph text here as well. However, when I use a div tag to apply a style, my paragraph is broken like <div class=“red”>this. You can see that the browser sets off this text from the text before and </div> after it. Now I am back to normal again.
</p>
Putting it all together
In-class exercise:
Create a web page with an external style sheet that
does the following:
All paragraph text is white with a blue background
and centered.
All links get bigger and change colors when hovered
over
Background color is “aliceblue”
