Web Pages Week 10 This week: CSS Next week: CSS – Part 2 Two Weeks - November 26th.
Download
Report
Transcript Web Pages Week 10 This week: CSS Next week: CSS – Part 2 Two Weeks - November 26th.
Web Pages
Week 10
This week: CSS
Next week: CSS – Part 2
Two Weeks - November 26th
CSS
CSS = Cascading Style Sheets.
Add style to web documents
fonts, colors, spacing, size, links
CSS
May be in the webpage or in a “Master List”
CSS = Cascading Style Sheets.
Separates the style and the layout of a web page.
• The Style is defined in one place
• The Layout is defined in the web pages
CSS
A “Master List” allows the
CSS
= Cascade
Cascading
Style
Sheets.
Style to
throughout
the web
pages.
Separates the style and the layout of a web page.
• The Style is defined in one place
• The Layout is defined in the web pages
CSS
• Easier updating & maintenance
• Coding is reduced
• Pages are more efficient, require less bandwidth
• Standardized layout
• Greater control
<font size=“1…7”>
Hello
Hello
Hello
Hello
Hello
• Greater control
Hello
Hello
• Greater control
<font size=“1…7”>
CSS
• Greater control
<font size=“1…7”>
CSS
Font Size
Number of Pixels
Number of Centimeters, Millimeters, Inches
Points ( 1/72”)
EM ( size of upper case “M”)
Ex ( size of a lower case “x” )
Box Model
outer edge
Top
margin
Border
Padding
Width
Height
Padding
Right
margin
Bottom
margin
Left
margin
Positioning
• Static
• Relative
• Absolute
• Fixed
• Letter Spacing
• Word Spacing
• List Style
• Line Height
Pseudo-selectors
• First Line
• First Letter
• Link
• Hover
• Visited
Basic Syntax of a CSS Rule
Rule
Selector { property: value; }
HTML,
Class or
ID
DECLARATION
Basic Syntax of a CSS Rule
Rule
Selector { property: value; }
DECLARATION
Basic Syntax of a CSS Rule
Rule
Selector { property: value; }
DECLARATION
Basic Syntax of a CSS Rule
Rule
Selector { property: value;
property: value;
property: value; }
DECLARATION
Basic Syntax of a CSS Rule
Example
Selector { property: value; }
h1 { font-size: 20px; }
Basic Syntax of a CSS Rule
Example
Selector { property: value; }
h1
{ font-size: 20px;
color: red; }
Basic Syntax of a CSS Rule
Example
Selector { property: value; }
h1
{ font-size: 20px;
color: red;
border: 2px solid blue;}
Basic Syntax of a CSS Rule
CSS Rules may be:
• Inline
• Embedded
• External
Basic Syntax of a CSS Rule
CSS Rules may be:
• Inline
HTML
<h1> <font color=“red”>My Dog Fido</font></h1>
CSS
<h1 style=“color: red;”> My dog Fido</h1>
Basic Syntax of a CSS Rule
CSS Rules may be:
• Inline
HTML
<h1> <font color=“red”>My Dog Fido</font></h1>
CSS
<h1 style=“color: red;”> My dog Fido</h1>
CSS
<h1 style=“color: red; font-size: 20px;”> My dog Fido</h
Basic Syntax of a CSS Rule
CSS Rules may be:
• Inline
• Embedded
Basic Syntax of a CSS Rule
<html>
<head>
<title> My web site </title>
</head>
Style Info Here!
<body>
<h1> <font color=“red”>My Dog Fido</font></h1>
</body>
</html>
Basic Syntax of a CSS Rule
<html>
<head>
<title> My web site </title>
<style type=“text/css”>
h1 {color: red; font-size: 20px; background-color: blue;}
</style>
</head>
<body>
<h1>My
Dog color=“red”>My
Fido</h1>
<h1> <font
Dog Fido</font></h1>
</body>
</html>
HTML only
<html>
<head>
<title> My web site </title>
</head>
<body>
<h1> <font color=“red”>Adam</font></h1>
<h1> <font color=“red”>Billy</font></h1>
<h1> <font color=“red”>Charlie</font></h1>
<h1> <font color=“red”>David</font></h1>
<h1> <font color=“red”>Edward</font></h1>
<h1> <font color=“red”>Frank</font></h1>
<h1> <font color=“red”>George</font></h1>
</body>
</html>
With embedded CSS
<html>
<head>
<title> My web site </title>
<style type = “text/css”>
h1 { color: red;}
</style>
</head>
<body>
<h1>Adam</h1>
<h1>Billy</h1>
<h1>Charlie</h1>
<h1>David</h1>
<h1>Edward</h1>
<h1>Frank</h1>
<h1>George</h1>
</body>
</html>
Basic Syntax of a CSS Rule
CSS Rules may be:
• Inline
• Embedded
• External
pets.html
pets.css
h1 { color: red; font-size: 20px; }
h2 { color: green; font-size: 30px; }
h3 { color: blue; font-size: 50px; }
p { color: black; font-size: 10px;
background-color: white;
border: 5px dotted green;
}
<html>
<head>
<title> My web site </title>
<style type=“text/css”>
@import url(pets.css)
</style>
</head>
<body>
<p>Important people</p>
<h1>Adam</h1>
<h2>Billy</h2>
<h3>Charlie</h3>
<h2>David</h2>
<h2>Edward</h2>
<h3>Frank</h3>
<h1>George</h1>
</body>
</html>
Basic Syntax of a CSS Rule
CSS Rules may be:
• Inline
• Embedded
• External
Priority
CSS Shortcuts
p { color: red; }
p { color: #FF0000; }
FF 00 00
F
0 0
p { color: #F00; }
CSS Shortcuts
<h1>My Dog Fido</h1>
My Dog Fido
Border-right
Border
• width
• style
• color
h1 { border-right-width: 5px;
border-right-style: dotted;
h1 {border-right-color:
border: 5px dotted
#F00;
}
red; }
CSS Shortcuts
<h1>My Dog Fido</h1>
My Dog Fido
Padding
h1 { padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
1
4 My Dog Fido 2
3
Padding
CSS ORDER
1. Top
2. Right
3. Bottom
4. Left
h1 { padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
1
2
3
4
h1 { padding: 5px 5px 5px 5px; }
1
4 My Dog Fido 2
3
Padding
CSS ORDER
1. Top & bottom
2. Right & Left
1&3
2&4
h1 { padding: 10px 5px; }
1
4 My Dog Fido 2
3
Padding
All four sides are equal
h1 { padding: 5px; }
1
4 My Dog Fido 2
3
Separate Declaration
Quick Review
h1 { padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
Shorthand Declaration
h1 { padding: 5px 5px 5px 5px; }
Top/bottom right/left
h1 { padding: 5px 5px; }
All four sides equal
h1 { padding: 5px; }
CSS
Cascading Style Sheets.
Class website