Tutorial #3 Cascading Style Sheets
Review: Last Class
 Image sizing
 Pathnames Project
 Default Path
 Relative Path
 Absolute Path
 Blackboard Homework Submission
Tutorial #2 Review - Anchors
 Links to Site
 <a href = http://www.dmacc.edu>DMACC </a>
 Internal Links
 <section id = “top”> </section>
 <a href=“#top”>Go to Top <a/>
 Mail To
 <a href=“mailto:lehall@dmacc.edu”>Email me </a>
 Local Links
 <a href=“page2.html”> Page2</a>
Cascading Style Sheets (CSS)
 CSS – Used to format the web page
 Bold, Italics, fonts, outlining, highlighting, positioning
 Advantages
 Consistency
 Easy modification of a lot of code
 More flexible formatting.
CSS – Style Rule
 A style sheet is a collection of rules
 Format
Selector {
property1: value1;
property2: value2;
property3: value3;
…
}
CSS – Style Rule
 h1{
color: yellow;
text-align: center;
}
 Colors (color: color_value;)
 Name, Hex code, RGB triplet
 Black, #000000, RGB(0,0,0)
 Page 141 has a list.
 On the web http://www.w3.org/TR/css3-color/#svgcolor
CSS
 Inline Style Sheet
<h1 style = “color: orange;”> Orange </h1>
 Embedded Style Sheet
 Wrapped in <style> tags
 Put in the head section
<style type= “text/css”>
style rules
</style>
CSS – Embedded Style
<style type = "text/css">
h1 {
color: blue;
text-align: center;
}
h2 {
color: green;
}
</style>
CSS – Lab
Modify Firstpage.html – Add Color to h1 and h2 tags
using CSS
2. Move“hello world” inside of a paragraph tag if it’s not
already there.
<style type = "text/css">
h1 {
color: blue;
}
h2 {
color: green;
}
</style>
1.
External Style Sheets
 Styling across multiple pages can be handled with
external css
 Used a link element in the head section
 Same code but in its own file
<link href= “url” rel=“stylesheet” type=“text/css” />
 Good practice for styling to build it locally then
copying the CSS to an external file
The Link Element
 Link element is used to link an external style sheet into
a web page.
 Placed in the head section
<link href=“url” rel=“stylesheet” type =“text/css” />
CSS - Comments
 Comments
 In CSS comments are wrapped in /* */
/*
Everything
In here
Is a CSS
Comment
*/
CSS Background Color
 In CSS background-color
h1{
background-color: gray;
color: blue;
}
CSS
 CSS styles can be applied for all HTML elements
a{
color: orange;
}
body{
background-color: white;
}
Fonts
 Font is a distinct set of characters
 Font Family – A set of fonts with similar characteristics
 In CSS the font-family property can be used change
the font.
Font-family: Font1, Font2, …, GenericFont;
Font-family: “Times New Roman”, Times, serif;
 Fonts with spaces need to be in quotes.
Fonts - Size
 Font-size: size;
 Unit of Measurements
 Absolute units
 Relative units
 Centimeters (cm)/Millimeters (mm)
 Inches (in)
 Points (pt) – 1/72 of one inch
 Pixels (px)
 Em – Roughly equal to the size of the letter M
 Percent
CSS – More text formatting
 Italic – In CSS use font-style
 Bold – In CSS use font-weight
h2{
font-style: italic;
font-weight: bold;
}
HTML5
CSS
<strong>
Font-weight: bold;
<em>
Font-style: italic;
Transforming Text
 Capitalize – Capitalized the first letter of each word
 Lowercase
 Uppercase
 None – Removes and of the other values
h1
{
text-transform: uppercase;
}
Transforming Text
Other text options:
 Letter-spacing
 White space between letters
 Word-spacing
 White space between words
 Text-indent
 How much to indent the first line of each paragraph
 Line-height
 White space between lines.
Text Transform - Lab
Modify your firstpage to have
1. h1 tags in uppercase
2. h2 in lowercase
3. Change the paragraph font to "Courier new",
monospace
4. Change paragraph font size to 2em;
5. Add a CSS Comment at the start of the style saying
This style provided by: <your name>
6. Add letter spacing to h4 to 25px;
CSS – Font Shorthand
 For fonts you could type out all properties or use the
shorthand
 Does not have to have all but needs to be in order
 Font style
 Font weight
 Font variant
 Font size
 Font family
h3{
font: italic bold 1em Courier monospace;
}
CSS- Text Alignment
Can use text-align property
 Left
 Right
 Center
 Justify
h1{
text-align: center;
}
CSS – Anchor Underline
 Anchor tags (links) can be modified with CSS
 Text-decoration can be used to modify the default
underline of a link
 Options are none, underline (done by default),
overline or line-through
a{
text-decoration: none;
}
This can be useful for setting up a menu of links where
you don’t want the line.
CSS - Lab
Modify firstpage_css.hml:
1. Make the h4 tag in italics (Using CSS)
2. Add a link to http://www.dmacc.edu (if it’s not
there)
3. Modify the link to have an overline style
4. Modify the link to have a font-size of 3em;
5. Change the background-color of the body to be
#00FFFF and paragraph to #90EE90
CSS Validation
 Validate the CSS similar to the way we did the HTML
 Can alert of possible errors
http://jigsaw.w3.org/css-validator/