Get documents about "Lecture
Shared by: 5iC78p6
-
Stats
- views:
- 2
- posted:
- 11/29/2011
- language:
- English
- pages:
- 33
Document Sample
Lecture
CSS: Cascading Style Sheets
What are Styles?
• Set of formatting rules
• Defines how a website is rendered
• Available Properties:
– Font and Text
– Paragraph and Margin
– Borders
– Backgrounds
– and more...
Types of Styles
1. Inline Styles – Styles that you type “inline”
with each tag
<h1 style="text-align: center;">
2. Internal Style sheets: Styles are defined for
each page
<style type="text/css">
h1 {
color: purple;
}
</style>
3. External style sheets: Styles are defined
and linked to the entire site.
<link rel="stylesheet" type="text/css" href="style.css">
Inline Styles
tag attribute property value
<h1>style=" color: green"
Welcome!</h1>
Welcome!
Or: Old School styles:
<h1 align=“center”>
Current Method
Inline Styles (cont)
tag attribute property value
<h1 style="margin: 20px;
font-family: 'Arial';
text-align: center;
border-style: double">
This is my new heading.</h1>
Inline Styles (cont)
attributes quotes for
one pair ofare separated
by whole style
thesemicolons
<h1 style="margin: 20px;
font-family: 'Arial';
text-align: center;
border-style: double">
This is my new heading.</h1>
Waste of Time
<h1 style="color: red"> Local </h1>
...
<h1 style="color: red"> County </h1>
...
<h1 style="color: red"> State </h1>
...
<h1 style="color: red"> Federal </h1>
...
External Style Sheets
• Link pages to external definition of
styles
• Keep entire site matching
• Easier to change style definitions all at
once
• Can also create special styles for
mobile devices, accessibility devices,
and printers
Style Sheet Syntax
tag (selector)you are defining, followed by {
p{
declarer margin-left: 2em;
font-family: 'Trebuchet MS';
color: white; list of attributes
} separated by ;
closing } attribute name: value
Rule Structure
• Rule Structure
Linking to External Style Sheet
Link goes inside
<head> element
href
must match
style sheet
filename
<link rel="stylesheet" type="text/css" href="style.css">
The Style Sheet File
tag redefined
End Result
SAMPLES: Text Properties
•Color
•Letter-spacing
•Word-spacing
•Text-align
•Font
•Text-Transform
•Text-Decoration
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Letter-Spacing
The letter-spacing property creates more white
space between letters in words.
H1 { color: red; }
H1 { color: red; letter-spacing: 5px;}
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Word-Spacing
The word-spacing property creates more white spac
between words.
H1 { color: #FF0000; letter-spacing: 5px;}
H1 { color: #FF0000; letter-spacing: 5px; word-spacing:
15px;}
Text-Align
The text-align property can center, justify, or align
text to the right or left.
H1 { color: #FF0000; letter-spacing: 5px; word-
spacing: 15px;}
H1 { color: #FF0000; letter-spacing: 5px; word-spacing:
15px; text-align: center;}
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Font
The font property defines the family, size, style, weight, and
variants of fonts.
H1{
Font-family: (“Times New Roman,” Courier, Arial, Helvetica, serif, sans-serif,
fantasy, cursive, monospace)
Font-size: (percentage, small medium, large, x-small, xx-small, x-large, xx-large)
Font-style: (normal, italic)
Font-weight: (normal, bold)
} Note: color is a text characteristic not font – so no font-color !!! Just color:
{Font: italic bold serif;}
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Text-Transform
The text-transform property allows
switching between uppercase,
lowercase, and capitalized words
without regard for how the words are
typed in HTML.
H3 { text-transform:capitalize;}
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Text-Decoration
The text-decoration property allows the text to be
underlined, overlined, or line-throughed.
h2 {text-decoration: line-through}
h2 {text-decoration: underline}
h2 {text-decoration: overline}
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Links
The links property defines how inactive, hovered,
active, and visited links appear to the user.
a:link {color: silver;}
a:visited {color: yellow;}
a:active {color: green;}
a:hover {color: orange; background: black; font-weight: bold;
font-size: 150%;}
You may use all the font properties for links, too, and the background
property.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Including Images
Properties for working with images
include:
•Background-image
•Background-repeat
•Background-position
•Background-attachment
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Background-Image
The background-image property sets an
image in the background of an element.
Body {background-
image:url(mountainsandsky.jpg);}
•Background images
and colors are layered.
•If not transparent, the
last one listed is visible.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Background-Repeat
The background-repeat property sets an image in the
background of an element and tiles, or repeats, it. Tiling is
the default.
main {background-
image:url(fairytransparent.gif); background-
repeat:no-repeat;}
Possible Values repeat
•Repeat
•Repeat-x (horizontal)
•Repeat-y (vertical)
•No-repeat
no-repeat
Background-Attachment
The background-attachment property fixes or
scrolls an image in the browser window.
Values include fixed and scroll.
Background-attachment: fixed;
Image Positioning
Image positioning is accomplished
using two properties:
•Background-position
•Background-attachment
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Background-Position
The background-position
property positions the
image using either
combined keywords top,
bottom, left, right, and
center; length values; or
percentage values.
Background-position: right top;
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Border Properties
Border-color Border-style
•Blue •None
•#ff0000 •Solid
•rgb(250,0,255) •Double
•Dotted
•Dashed
Border-width
•Groove
•Thin
•Ridge
•Medium
•Inset
•Thick
•Outset
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Border Properties
Border-color Border-style
•Blue •None
•#ff0000 •Solid
•rgb(250,0,255) •Double
•Dotted
•Dashed
Border-width
•Groove
•Thin
•Ridge
•Medium
•Inset
•Thick
•Outset
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Margin, Border, Padding
Standard image of
margins, borders,
and padding.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Padding
Padding is the space between the text/content and
the border. You can use padding for all around the
element or padding-right, padding-left, padding-top,
and padding-bottom.
Padding: 1em;
Padding-left: 1em;
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Margin
Margin is the space around
Margin: 1em; an element. You can use
margin for all around the
Margin-right: 1em; element or you may use
margin-left, margin-right,
margin-top, and margin-
bottom.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Cascading Style Sheets (CSS)
More Specific =
Higher Priority
• Inline Styles
• Internal Style Sheets
• External Style Sheets
