Week 2 Power Point Slides
Download
Report
Transcript Week 2 Power Point Slides
Cascading Style Sheets (CSS)
Tag related instructions to browsers
Why do we need them?
• Separate structure from browser presentation
• There are many HTML presentation attributes
– We want to eliminate the need for these attributes
– We want the HTML tags to focus on document structure
– We want to standardize HTML specifications
• Define an entire site’s look and feel in one file
– Maintenance is much easier
– One change can apply to the whole site
– Achieve consistency across the web site
Types of Cascading Style Sheets
• In-line level
– Apply to content (e.g. <b> content </b>) of a single tag
– How To: use the style attribute in any tag
• Document level
– Apply to an entire web page
– How To: Insert a style tag into the head section
• External level
– Apply to a group of web-pages
– How To: Use the link tag to reference a style sheet file
Note: In-line styles override document and external styles;
document styles override external styles.
Hence they cascade.
Style Sheet Syntax
Examples will follow on subsequent slides
• Inline: <tag style="styletype:value" >
• Document Level (The <style> tag must be in <head> section)
<style type="text/css">
<!– comment so non CSS browsers will ignore
tag
{ styletype:value; … styletype:value;}
tag.stylename {styletype:value; … styletype:value;}
.stylename {styletype:value; … styletype:value;}
--> </style>
• External Level (document level syntax without the <style> tag)
<link rel= "stylesheet" type= "text/css" href= "filename.css" />
In-line CSS Example
These apply to the content of a single tag
• <p style="text-transform:uppercase; color:red;">
This paragraph is uppercase and red.</p>
• Style types used in this example
– text-transform has a value of uppercase
– color has a value of red
• Syntax
– Style Type : style value
– Separate style specifications using semicolons.
– Enclose the style attribute value in quotes.
Document Level CSS Example
• Insert style tag into the head section
<style type="text/css">
p {font-size:20pt; font-family: "courier";
text-align:center; font-weight:bold; }
</style>
• Paragraph tags now use the style
specifications
<p>font size 20 in courier
center this paragraph and display
bolded</p>
Font Families
• Separate a series of fonts with commas
<style type="text/css">
p {font-family: Lucida, Arial;}
</style>
• Which font will browsers use?
– The first one that it knows about
– A default if none in the list exists
• Default families that all browsers recognize
– Monospace: all letters have the same width
– Others: serif, sans-serif, cursive, or fantasy
HTML Colors
• Color:#A06033; (A0 red, 60 green, 33 blue)
– Value range: ‘00’ to ‘ff’; smaller values are darker
• Specify colors with hexadecimal (hex) numbers
– Hex numbers digits range from 0 to f, not 0 to 9
– A=10, B=11, C=12, D=13, E=14, F=15
– Examples: F9 = 15*16 + 9, 37 = 3*16 + 7
• There are web color palettes on the web
– Web safe colors look the same on all monitors
– Useful so hex codes don’t need to be memorized
Built In HTML Colors
Color
Black
Gray
Silver
White
Red
Maroon
Magenta
Purple
Number
#000000
#808080
#C0C0C0
#FFFFFF
#FF0000
#800000
#FF00FF
#800080
Color
Blue
Navy
Aqua
Teal
Green
Olive
Lime
Yellow
Number
#0000FF
#000080
#00FFFF
#008080
#008000
#808000
#00FF00
#FFFF00
Example with Colors
• Style tag in the head section
<style type="text/css">
h2 {color:red;}
h3 {color:#d61130;}
</style>
• Utilize the specifications in the HTML body
<h2>red text</h2>
<h3>darker red</h3>
Example with Fonts
• Style Tag in head section
<style type="text/css">
p {font-style:italic; font-weight:500;
font-variant:small-caps; font-size:14pt;
line-height:24pt; font-family:Lucida, Arial; }
</style>
• Shorter way to write the same thing
<style type="text/css">
p {font: italic 500 small-caps 14pt/24pt
Lucida, Arial; }
</style>
Other Style Sheet Syntax
Style Sheet Specification
Applies To
h1,h2,h3 {font-size:large;}
h1, h2, and h3 tags
h1#large {font-size:30pt;}
<h1 id="large">
#notLarge{font-size:20pt;}
Any tag with id="notLarge"
a:visited{color:red;}
Hyperlink already visited
a:link {color: #FF0000;}
Unvisited hyperlink
a:active {color: #0000FF;}
Selected hyperlink
a:hover {color: #FF00FF;}
Mouse over a hyperlink
Some CSS Styles and Values
Type
Value
font-family
Verdana, Arial, Serif, "Times New Roman"
font-size
xx-small, x-small, small, medium, large, x-large, xxlarge larger, smaller, 10px, 20pt, 0.5in
font-style
normal, italic, oblique
font-weight
normal, bold, bolder, lighter, 100, 300
font-variant
small-caps, none
text-indent
10%, 20cm, 15pt, .5in
text-decoration
underline, overline, line-through, blink, none
text-transform
uppercase, lowercase, capitalize, none
text-align
left, right, center justified
Reference: http://www.htmlhelp.com/reference/css/properties.html
More CSS Styles and Values
Type
Value
word-spacing
3pt,1cm,.25in
letter-spacing
3pt, 1cm, .25in
margin-top
12pt, 2.5cm, 1in
margin-bottom
12pt, 2.5cm, 1in
margin-left
12pt, 2.5cm, 1in
margin-right
12pt, 2.5cm, 1in
color
red, #FF0000
background-color
red, #FF0000
background-image
url(picture.gif`)
background-attachment
scroll, fixed
Reference: http://www.htmlhelp.com/reference/css/properties.html
CSS Classes
Style Sheet
<style type="text/css">
h1 {font-size:xx-large;}
h1.small
{font-size:xx-small;}
.allTags
{font-size:large;}
</style>
Usage
<h1>
Displays xx-large
</h1>
<h1 class="small">
Displays be xx-small
l</h1>
<h2 class="allTags">
Any tag can be large
</h2>
The <div> and <span> tags
• These tags exist because of CSS
– Generic tags that CSS can customize
– We can make tags to our own specifications
– Eliminate the need for browsers to define new tags
• <div> tag
– Block tag that applies to sections of a document
– Example: <div style="color:red;">Displays Red</div>
• <span> tag
– Inline tag that applies to text in a document section
– Example: <span class="doIt" >Use doIt style</span>
External Style Sheets
• Create a text file (Name it with a css extension)
• Type in the style sheet specifications
– Don’t include the style tag
– Don’t include HTML comments
– CSS comments: /* This is a CSS-comment */
• Use link tag in HTML document headers
<link rel="stylesheet" type="text/css" href="style.css" />
• An HTML document can have
– More than one link tag
– Can have both external and document specifications
More HTML and CSS Help
• Lots of examples:
http://www.w3schools.com/css/css_examples.asp
• Documentation
– Site for web specification
http://www.w3schools.com/css/
– Site for tutorials and lots of help
http://www.htmlhelp.com
Some Review Questions
•
•
•
•
•
•
•
•
What is a Monospace font? Give an example?
What is the advantage of using the font property?
How do you use the id attribute with style sheets?
How do you change the color of a hyperlink that
was already visited?
What are differences between inline, document
level, and external style sheets?
What is a css class?
When would you use the <span> and <div> tags?
What is a font family?