Resources wwww3schoolscomcsscssreferenceasp list of all CSS properties wwww3schoolscomcss wwwglishcomcss wwwhtmlnettutorialscss bloghtmlit layoutgala Great Book ID: 481369
Download Presentation The PPT/PDF document "CSS Cascading Style Sheets" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CSS
Cascading Style SheetsSlide2
Resources
www.w3schools.com/css/css_reference.asp
(
list of all CSS properties)
www.w3schools.com/css
/
www.glish.com/css
/
www.html.net/tutorials/css
/
blog.html.it/
layoutgala
/
Great Book
“CSS: The Missing Manual” -
by David Sawyer
McFarlandSlide3
Style and CSS Basics
Goal is to separate Style from StructureStyle rules express the style characteristics of an element
A set of style rules in an external document is a style sheet
Example of Style Section (sets <p> elements in the document to 24 point blue)
<head>
<style>
P {color: blue; font-size: 24pt;}</style>…
3Slide4
Style and CSS Basics
A style rule is composed of two parts
Selector
Declaration
h1 {color: red;}
4
Declaration
SelectorSlide5
Style and CSS Basics
A declaration is composed of two parts
Property
Value
Syntax is Property and colon, then value and semicolon to allow multiple declaration
h1 {color: red;}
5
Value
PropertySlide6
Style and CSS Basics
Style rules can be applied to an element
Style rules can be a section in a document
Style rules can be in a document external to the Web pages to which it can be applied
6Slide7
Style and CSS Basics
Style rules can be applied to an element similar to an element attribute
Example
<div style="font-family: 'Trebuchet MS'; Color: Navy; ">
7Slide8
Style and CSS Basics
Example of a Style Section to be used for a Web page that sets h1 and h2 to a particular font and color of navy—
Type Selector
<style>
h1 , h2
{ font-family: 'Trebuchet MS'; Color: Navy; }
</style>
8Slide9
Style and CSS Basics
Example of an external style sheet—referred to as a cascading style sheet—note that the content is the same as a Style Section but in a file with a .
css
extension
<style>
h1 , h2 { font-family: 'Trebuchet MS'; example.css Color: Navy;
}
</style>
9Slide10
Style and CSS Basics
Referencing an external cascading style sheet
<head>
<title….
<link
href="example.css" rel="stylesheet
"
type="text/
css
" />
</head>10Slide11
Style and CSS Basics
Grouping Selectors
h1 {color: red;}
h2 {color: red;}
can be grouped with elements separated by commas h1, h2 {color: red;}
11Slide12
Style and CSS Basics
Combining Declarations
p {color: blue;}
p {font-size: 12pt;}
can be expressed as follows p {color: blue; font-size: 12pt;}
12Slide13
Style and CSS Basics
Using Descendant Selectors
Selects only <b> elements that are within <p> elements
p b {color: blue;}
can be more than 2 selector elements ul
li
b {color: blue;}
13Slide14
Style and CSS Basics
Using the Class Attribute Selector
.quote {color: blue; margin: 30px;}
Reference the class
<p class=
"
quote
"
> This….
Note that this allows any element to use the style whereas a general style for an element applies to every instance of the element
14
Class Name
Flag Character
DeclarationSlide15
Style and CSS Basics
Making Class Selectors More Specific
h1.quote {color: blue; margin: 30px;}
restricts the use of the quote to the <h1> element
15Slide16
Style and CSS Basics
Using the id Attribute Selector
#preface {color: blue; margin: 30px;}
reference the element
<p id=
"
preface
"
> This….
Note that the id value uniquely identifies this
one
<p> element to which the rule applies16
Class Name
Flag Character
DeclarationSlide17
Style and CSS Basics
CSS font measurement units
17
Absolute Units
Unit Abbrev
Description
Centimeter
cm
Standard
metric cm
Inch
inStandard US inchMillimetermmStandard metric mm
PicapcEqual to 12 points
Point
Pt
72 points / inchSlide18
Style and CSS Basics
CSS font measurement units (cont)
18
Relative Units
Unit Abbrev
Description
Em
em
The width
of a capital M in the current font—usually the same as the font size
Ex
ex The height of the letter x in the current fontPixelpx The size of a pixel on the current monitorPercentage
150%Sets a font size relative to the base font sizeSlide19
Style and CSS Basics
Absolute Font Size Keywords
xx-small
x-small
small
medium
largex-largexx-largeRelative Font Size Keywordssmallerlarger
19Slide20
Style and CSS Basics
Fonts
Family {font-family: san-serif;}
arial
, courier …..
Shortcut property designation
p {font: 12pt arial bold;}Text Spacing Propertiestext-aligntext-indent…Text –decoration properties
none, underline,
overline
, line-through, blink
20Slide21
Style and CSS Basics
Fonts
Vertical alignment
{vertical-align: super;}
baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage
Transforming case {text-transformation: uppercase}
capitalize, uppercase, lowercase, none
21Slide22
Style and CSS Basics
Visual Formatting Model
Block elements
<body> ,<h1>, <div> <p>…
Allows specification of margin, border, and padding for all block-level elements
Inline elements
List-item
22Slide23
Style and CSS Basics
23Slide24
Style and CSS Basics
Box specification example
p {margin-left; 2
em
;
margin-right; 2 em; padding-left; 2
em
;
padding-right; 2
em
; border-right; solid thin black; background: white}
24Slide25
Style and CSS Basics
Special Box Properties
width
height
float
clear
div {float: left; width: 200px;}
25Slide26
CSS for Styling
CS380
26Slide27
The good, the bad and the… ugly!
Tags
such as b, i, u, and font are discouraged in strict XHTML
Why is this bad
?
CS380
27
<p>
<font face="Arial
">
Shashdot
.</font>
News for <b>nerds!!</b> You will
<i>never
</i>
,
<u>
EVER
</u
>
be
<font size="+4" color="red
">
BORED
</
font>
here!
</p>
HTML
Slashdot
. News for
nerds!!
You will never,
EVER
be
BORED
here!
outputSlide28
Cascading Style Sheets (CSS)
Describes the appearance
, layout, and presentation of information on a web page
HTML describes
the content
of the
pageDescribes how information is to be displayed, not what is being displayedCan be embedded in HTML document or placed into separate .css file
CS380
28Slide29
Basic CSS rule syntax
A
CSS file consists of one or more
rules
E
ach
rule starts with a selector A selector specifies an HTML element(s) and then applies style properties to thema selector of * selects all elements
29
selector
{
property
:
value;property: value;...p
roperty: value;}
CSS
p {
font-family: sans-serif;
color: red;
}
CSSSlide30
Attaching a CSS file <link>
A page can link to multiple style sheet files
I
n
case of a
conflict (two sheets define a style for the same HTML element), the latter sheet's
properties will be usedCS38030
<head>
...
<link
href
="filename
" type="text/css" rel="stylesheet" />
...</head>
HTML
<link
href
="style.css" type="text/
css
"
rel
="
stylesheet
" />
<link
href
="http://www.google.com/uds/css/gsearch.css"
rel
="
stylesheet
" type="text/
css
"
/>
HTMLSlide31
Embedding style sheets: <style>
CSS code can be embedded within the head of an HTML pageB
ad
style
and should be avoided when possible
(why?)
CS38031
<head>
<style type="text/
css
">
p { font-family: sans-serif; color: red; }h2 { background-color: yellow; }
</style></head> HTMLSlide32
Inline styles: the style attribute
Higher
precedence than embedded or linked styles
U
sed
for one-time overrides and styling a particular element
Bad style and should be avoided when possible (why?)CS38032
<p
style="font-family: sans-serif; color: red;"
>
This is a paragraph</p>
HTMLThis
is a paragraph
outputSlide33
CSS properties for colors
CS380
33
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style
above output
property
description
color
color of the element's text
background-color
color that will appear behind the element Slide34
Specifying colors
color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple
, red, silver, teal, white (white), yellow
RGB codes: red, green, and blue values from 0 (none) to 255 (full)
hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
34
p { color:
red
; }
h2 { color:
rgb(128, 0, 196); }h4 { color:
#FF8800; } CSS
This paragraph uses the
first style above
This h2 uses the second style above
.
This h4 uses the third style above.
outputSlide35
Grouping styles
A style can select multiple elements separated by commas
T
he
individual elements can also have their own styles
CS380
35
p
, h1, h2
{
color: green;
}h2 {background-color: yellow;
} CSS
This paragraph uses the above style
.
output
This h2 uses the above styles.Slide36
CSS comments /*…*/
CSS (like HTML) is usually not commented as rigorously as programming languages such
as Java
T
he
// single-line comment style is NOT supported in CSS
The <!-- ... --> HTML comment style is also NOT supported in CSSCS38036
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
}
CSSSlide37
CSS properties for fonts
property
description
font-family
which font will be used
font-size
how large the letters will be drawn
font-style
used to enable/disable italic style
font-weight
used to enable/disable bold style
CS380
37Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#font)Slide38
font-family
Enclose multi-word font names in quotes
CS380
38
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
}
CSSThis paragraph uses the first style above.
This h2 uses the second style above.
outputSlide39
More about font-family
We can
specify multiple fonts from highest to lowest priority
G
eneric
font names:
serif, sans-serif, cursive, fantasy, monospaceIf the first font is not found on the user's computer, the next is tried
Placing
a generic font name at the end of your font-family
value,
ensures that
every computer will use a valid fontCS38039
p {font-family: Garamond, "Times New Roman", serif;}
CSS
This paragraph uses the above style.
outputSlide40
font-size
units: pixels (
px
) vs. point (
pt
) vs. m-size (
em)16px,
16pt
,
1.16em
vague font sizes:
xx-small, x-small, small,
medium, large, x-large, xx-large, smaller
, larger
percentage
font sizes,
e.g
.:
90%
,
120
%
CS380
40
p {
font-size: 24pt;
}
CSS
This paragraph uses the style above.
outputSlide41
font-size
pt
specifies number of point, where a point is 1/72 of an inch onscreen
px
specifies a number of pixels on the screenem specifies number of m-widths, where 1
em
is equal to the font's current size
CS380
41
p {
font-size: 24pt;} CSS
This paragraph uses the style above.
outputSlide42
font-weight, font-style
Either
of the above can be set to normal to turn them off (e.g. headings)
CS380
42
p {
font-weight: bold;
font-style: italic;
}
CSS
This paragraph uses the style above.
outputSlide43
CSS properties for text
property
description
text-align
alignment of text within its element
text-decoration
decorations such as underlining
line-height,
word-spacing,
letter-spacing
gaps between the various portions of the text
text-indent indents the first letter of each paragraph
CS38043Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)Slide44
text-align
text-align can be
left, right, center, or justify
CS380
44
blockquote
{
text-align: justify;
}
h2 {
text-align: center;
}
CSSThe Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us. Sneaky little hobbitses
. Wicked,
tricksy
, false!
outputSlide45
text-decoration
can also be
overline
,
line-through
, blink, or none
effects can be combined:text-decoration: overline
underline
;
CS380
45
p {
text-decoration: underline;} CSS
This paragraph uses the style above.
outputSlide46
The list-style-type property
Possible values:
i
.
none
: No marker ii. disc (default), circle, square iii.
Decimal
:
1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc. v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc. vii. lower-alpha: a, b, c, d, e, etc. viii.
upper-alpha: A, B, C, D, E, etc.
x
.
lower-greek
:
alpha, beta, gamma, etc.
others
:
hebrew
,
armenian
,
georgian
,
cjk
-ideographic,
hiragana…
CS380
46
ol
{
list-style-type: lower-roman;
}
CSSSlide47
Body styles
Applies a style to the entire body of your
page
S
aves
you from manually applying a style to each element
CS38047
body {
font-size: 16px;
}
CSSSlide48
Cascading Style Sheets
P
roperties
of an element
cascade
together in
this order:browser's default stylesexternal style sheet files (in a <link> tag)internal style sheets (inside a <style> tag in the page's header)inline style (the style attribute of the HTML element)CS380
48Slide49
Inheriting styles
when multiple styles apply to an element, they are inherited
a more tightly matching rule can override a more general inherited
rule
CS380
49
body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS
This is a heading
A bulleted list
output
A styled paragraph.
Previous slides
are available on the website.Slide50
Styles that conflict
when two styles set conflicting values for the same property, the latter style
takes precedence
CS380
50
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above
.
output
This heading uses both styles above.Slide51
W3C CSS Validator
jigsaw.w3.org/css-validator/
checks your CSS to make sure it meets the official CSS
specifications
CS380
51
<p>
<a
href
="http://jigsaw.w3.org/
css
-validator/check/
referer"><img src="http://jigsaw.w3.org/
css-validator/images/vcss
"
alt="Valid CSS!" /></a>
</p>
CSS
outputSlide52
CSS properties for backgrounds
property
description
background-color
color to fill background
background-image
image to place in background
background-position
placement of bg image within element
background-repeat
whether/how
bg image should be repeated background-attachment whether
bg image scrolls with page background shorthand to set all background properties CS38052Slide53
background-image
background image/color fills the element's content area
CS380
53
body {
background-image:
url
("images/draft.jpg");
}
CSSSlide54
background-repeat
can be repeat (default), repeat-x, repeat-y, or no-repeat
CS380
54
body {
background-image:
url
("images/draft.jpg");
background-repeat: repeat-x;
}
CSSSlide55
background-position
value consists of two tokens, each of which can be top, left, right,
bottom, center
, a percentage, or a length value in
px
,
pt, etc.value can be negative to shift left/up by a given amountCS38055
body {
background-image:
url
("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;} CSSSlide56
Aside: Favorites icon ("favicon")
The link tag, placed in the HTML page's head section, can specify an icon
this icon will be placed in the browser title bar and bookmark/favorite
CS380
56
<link
href
="
filename
" type="
MIME type
"
rel="shortcut icon" /> HTML
<link
href
="yahoo.gif" type="image/gif"
rel
="shortcut icon" />
HTMLSlide57
More CSS
<link
href
="
filename
" type="text/
css" rel
="
stylesheet
" />
CS380
57Slide58
HTML id attribute
A
unique ID
for an
element on a page
E
ach ID must be unique; can only be used once in the pageCS38058
Coding Horror! Coding Horror!
Our mission is to combine programming and “human” factors with
geekiness
!
output
<p>Coding Horror! Coding Horror!</p>
<p id="mission">Our mission is to combine programming and <q>human</q> factors with
geekiness
!</p>
HTMLSlide59
Linking to sections of a web page
L
ink
target can include an ID at the end, preceded by a #
B
rowser
will load that page and scroll to element with given IDCS38059
Visit
textpad.com
to get the
TextPad
editor
.View our Mission Statement output
<p>Visit <a href
=
"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the
TextPad
editor.</p>
<p><a
href
="#mission">View our Mission Statement</a></p>
HTMLSlide60
CSS ID selectors
Applies style only to the paragraph that has the ID of
mission
CS380
60
#mission {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
}
CSS
Coding Horror! Coding Horror!
Our mission is to combine programming and “human” factors with geekiness
!
outputSlide61
HTML class attribute
A
way to group some elements and give a style to only that
group
Unlike
an id, a class can be reused as much as you like
on the pageCS380
61
Coding Horror! Coding Horror!
See our special deal on Droids!
Today only!
output
<p
class="shout
">Coding Horror! Coding Horror!</p>
<p
class="special
">See our special deal on Droids!</p>
<p
class="special
">Today only!</p>
HTMLSlide62
CSS class selectors
CS380
62
Coding Horror! Coding Horror!
output
.special
{
background-color: yellow;
font-weight: bold;
}
p.shout
{
color: red;
font-family: cursive;
}
CSS
See our special deal on Droids!
T
oday only! Slide63
CSS class selectors
CS380
63
Coding Horror! Coding Horror!
output
See our special deal on Droids!
T
oday only!
<p
class="shout
">Coding Horror! Coding Horror!</p>
<p
class="special
">See our special deal on Droids!</p>
<p
class="special shout">
Today
only!</
p>
HTMLSlide64
CSS ID selectors
CS380
64
a:link { color: #FF0000; } /* unvisited link */
a:visited { color: #00FF00; } /* visited link */
a:hover { color: #FF00FF; } /* mouse over link */
CSS
Buy Early Buy Often
!
outputSlide65
CSS ID selectors
CS380
65
class
description
:active
an activated or selected element
:focus
an element that has the keyboard focus
:hover
an element that has the mouse over it
:link a link that has not been visited
:visited a link that has already been visited :first-letter the first letter of text inside an element :first-line the first line of text inside an element :first-child an element that is the first one to appear inside another Slide66
Styling
Page Sections
CS380
66Slide67
Why do we need page sections?
Style individual elements, groups of
elements, sections
of text or of the
page
C
reate complex page layoutsCS38067Slide68
Sections of a page <div>
Tag
used to indicate a logical section or area of a page
H
as
no appearance by default, but you can apply styles to it
CS38068
Coding Horror! Coding Horror!
We’ll beat any advertised price!
output
<div class="shout">
<h2>Coding Horror! Coding Horror!</h2>
<p
class="special
">See our special deal on Droids!</p> <p>We'll beat any advertised price!</p>
</div>
HTML
See our special deal on Droids!Slide69
Inline Sections <span>
has no onscreen appearance, but you can apply a style or ID to it, which will be applied
to the
text inside the span
CS380
69
Coding Horror! Coding Horror!
See our
spectacular
deal on Droids!
We’ll beat
any advertised price
! output
<h2>Coding Horror! Coding Horror!</h2>
<p>See our
<span class="special“>
spectacular
</span>
deal on Droids!</p>
<p>We'll beat
<span class="shout“>
any advertised price
</span>
!</p>
HTMLSlide70
CSS context selectors
applies the given properties to selector2 only if it is inside a selector1 on the page
CS380
70
selector1 selector2 {
properties
}
CSS
selector1
>
selector2 {
properties}
CSS
applies the given properties to selector2 only if it is
directly
inside a selector1 on the
pageSlide71
Context selector example
CS380
71
Eat at
Greasy’s
Burger
…
The
greasiest
burgers in town!
Yummy and greasy at the same time!
output
<p>Eat at <strong>
Greasy's Burger</strong>...</p>
<
ul
>
<li>The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and greasy at the same time!</li>
</
ul
>
HTML
li strong
{ text-decoration: underline; }
CSSSlide72
More complex example
CS380
72
Eat at
Greasy’s
Burger
…
The
greasiest
burgers in town!
Yummy and
greasy at the same time
! output
<div id="ad">
<p>Eat at <strong>
Greasy's
Burger</strong>...</p>
<
ul
>
<li class="important">The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and <strong>greasy at the same time </strong>!</li>
</
ul
>
</div>
HTML
#ad
li.important
strong
{ text-decoration: underline; }
CSSSlide73
The CSS Box Model
Every element composed
of:
c
ontent
a
border around the elementpadding between the content and the bordera margin between the border and other contentCS380
73Slide74
The CSS Box Model (cont.)
width = content width + L/R padding + L/R
border +
L/R margin
height = content height + T/B padding + T/B
border +
T/B marginIE6 doesn't do this rightCS38074Slide75
Document Flow – block elements
CS380
75Slide76
Document
flow - inline elements
CS380
76Slide77
Document
flow - a larger example
CS380
77Slide78
CSS properties for borders
78
output
h2 {
border: 5px solid red; }
CSS
This is a heading.
property
description
border
thickness/style/size of border on all 4 sides
Thickness:
px
,
pt
,
em
, or
thin, medium,
thick
Style:
none
, hidden, dotted, dashed, double, groove, inset, outset, ridge,
solid
colorSlide79
More border properties
property
description
border-color, border-width,
border-style
specific properties of border on all 4 sides
border-bottom, border-left,
border-right, border-top
all properties of border on a particular side
border-bottom-color, border-bottom-style,
border-bottom-width, border-left-color,
border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color,
border-top-style, border-top-width properties of border on a particular side Complete list of border properties http://www.w3schools.com/css/css_reference.asp#border
79Slide80
Another border example
CS380
80
output
h2 {
border-left: thick dotted #CC0088;
border-bottom-color:
rgb
(0, 128, 128);
border-bottom-style: double;
}
CSS
This is a heading.
each side's border properties can be set individually
if you omit some properties, they receive
defaultSlide81
CSS properties for padding
property
description
padding
padding on all 4 sides
padding-bottom
padding on bottom side only
padding-left
padding on left side only
padding-right
padding on right side only
padding-top padding on top side only Complete list of padding
propertieshttp://www.w3schools.com/css/css_reference.asp#paddingCS38081Slide82
Padding example 1
CS380
82
This is a first paragraph.
This is a second paragraph.
output
p {
padding: 20px;
border: 3px solid black; }
h2 {
padding: 0px;
background-color: yellow; }
CSS
This is a heading Slide83
Padding example 2
83
This is a first paragraph.
output
p {
padding-left: 200px; padding-top: 30px;
background-color: fuchsia;
}
CSS
This is a first paragraph
This is a second paragraph
each side's padding can be set individually
notice that padding shares the background color of the elementSlide84
CSS properties for margins
property
description
margin
margin on all 4 sides
margin-bottom
margin on bottom side only
margin-left
margin on left side only
margin-right
margin on right side only
margin-top margin on top side only
Complete list of margin propertieshttp://www.w3schools.com/css/css_reference.asp#marginCS38084Slide85
Margin example 1
CS380
85
output
p {
margin: 50px;
background-color: fuchsia;
}
CSS
notice that margins are always
transparent
This is a second paragraph
This is a first paragraphSlide86
Margin example
2
CS380
86
output
p {
margin-left
: 8em;
background-color: fuchsia;
}
CSS
each side's margin can be set individually
This is a second paragraph
This is a first paragraphSlide87
CSS properties for dimensions
87
output
p {
width: 350px;
background-color: yellow; }
h2 {
width: 50%;
background-color: aqua; }
CSS
An h2 heading
This paragraph uses the first style above
property
description
width, height
how wide or tall to make this element
(block elements only)
max-width, max-height,
min-width, min-height
max/min size of this element in given dimension Slide88
Centering a block element: auto margins
CS380
88
Lorem
ipsum
dolor sit
amet
,
consectetur
adipisicing
elit, sed do eiusmod
tempor
incididunt
ut
labore
et
dolore
magna
aliqua
.
output
p {
margin-left: auto;
margin-right: auto;
width: 750px;
}
CSS
works best if
width
is set (otherwise, may occupy entire width of page)
to center inline elements within a block element, use
text-align: center;