CSS Cascading Style Sheets

CSS
Cascading Style Sheets
CSS
CSS is the style language used with
XHTML. XML is also compatible with
CSS.
CSS emphasis on style separation
allows design freedom in site
presentation and decreases time spent
on site editing and maintenance.
2
CSS Files
With CSS, rules communicate how a
browser should present the site
content.
Two files are created:
fileName.html
and
fileName.css
3
CSS Files
The XHTML file recognizes XHTML
structure and presents the content.
The CSS file informs the browser how
and where to present the content.
CSS Syntax
CSS is case-insensitive, however XML
is case sensitive and, as such, CSS is
written in lower case, following XML
syntax rules.
CSS Identifiers
CSS identifiers (element names,
classes, ids, selectors) cannot begin
with a hyphen or digit. Typically
identifiers begin with an alpha
character, followed by digits or
additional alpha characters.
CSS Rules
CSS style sheets contain rules. These
rules consist of a selector, followed by
a declaration block:
h1{color:red;}
CSS Rules
The selector is the XHTML or XML
element name:
h1{color:red;}
The declaration block (referred to as a
block) opens with a left curly brace and
closes with a matching right curly
brace.
h1{color:red;}
8
CSS Rules
In between the braces, any characters
are allowed including ( ), [ ], { }.
Additional braces must occur in
matching pairs and are said to nest
inside the blocks opening and closing
brace.
h1{color:red;}
9
CSS Declarations
Between the blocks opening and
closing brace there must be zero or
more declarations, each separated by
semicolons:
h1{fontfamily:serif;
color:red;}
10
CSS File
A CSS file, saved as an example, as
movie.css may be as simple as:
body{backgroundcolor:
black;color:white;}
which outputs all body elements will
contain a black background and white
font.
11
CSS Link
The CSS style sheet is linked to the
XHTML document with the following
element which typically appears within
<head> in the .html file:
<linkrel="stylesheet"
type="text/css"
href="example.css">
12
CSS Link
The CSS file name must match the
CSS file the .html file links to:
href="example.css">
13
CSS Syntax
The .css file is simply a collection of
CSS rules. The XHTML document
reads the rules by referencing to the
XHTML selector, the element name:
h1{color:green;}
14
Multiple Selectors
CSS supports applying the same rule
to multiple selectors, by separating
them with a comma:
h1,h2,h3{color:green;}
15
Declaration Block
The declaration block consists of the
property and its value:
selector{property:value;}
h1{color:green;}
Around each part of the declaration
there may be white space
16
Declaration Block
A selector always goes together with a
declaration block. If the selector cannot
be parsed, the declaration block will be
ignored. Multiple declarations may be
applied to one or more selectors:
h1,h2,h3{color:green;
fontfamily:Arial;font
style:italic;}
17
Declaration Block
Properties and their values are always
separated by a colon (:)
Sets of properties and values are
always separated by a semicolon (;)
18
Comments
Comments begin with /* and end with */
Comments may not be nested,
although any amount of text may occur
between /* and */
/*commentsareoftenusedto
notifyauthorshipanduse
privilegesofcode.*/
19
Cascading
Cascading means that style sheets
may have three different points of
origin, for the same XHTML or XML
document, and are said to cascade
when they overlap.
Author-typically the developer
User
User Agents
20
Cascading Order
When several styles apply, the one with
the greatest weight takes precedence
1. Author style carries more weight
2. This is reversed for !important
rules
3. @import style sheets also cascade.
Their weight depends on their import
order
21
!important
The keywords !andimportant
form an !importantdeclaration and
take precedence over a normal
declarations. Author and user style
sheets may contain !important
declarations
22
important
P{color:black!important;
fontsize:18pt!important;}
results in all text with the p selector
returned as black and 18 pt font for
users who do not want to read text in
color and need a larger sized font.
23
@import
@import, an alternative to linking to an
external style sheet, allows users to
import style rules from other style
sheets. Any @import rules must
precede all rule sets in a style sheet
and are followed by the URI of the style
sheet.
24
@import
@import"food.css"
or
@importurl("food.css")
are placed within a style tag such as:
<styletype="text/css">
@import"food.css"
</style>
25
import
Multiple @import declarations may be
used. The first takes precedence over
the balance. You will typically use the
link element, @import works well
when referring to multiple style sheets
within one XHTML or XML document.
26
CSS Sorting Order

User agents must apply the following
sorting order to find the value for an
element/property combination:
Find all declarations that apply to the
element and property for the target
media type. Apply declarations if
associated with selectors that match
the element.
27
CSS Sorting Order

2. The primary sort of declarations is by
weight and origin. Author declarations
override users except in the case of !
importantwhere users override
authors. An imported style sheet has
the same origin as the style sheet that
imported it.
28
CSS Sorting Order

3. More specific selectors override
more general selectors at the
secondary sort level. Pseudo-elements
and pseudo-classes count as normal
elements and classes.
29
CSS Sorting Order

4. Sort by order specified, if two rules
have the same weight, origin, and
specificity; specificity overrides. Rules
in imported spreadsheets are
considered before rules in the style
sheet.
30
CSS Sorting Order

Consider the users needs and design
accordingly.
User centered design eliminates much
of the need for overriding and presents
the user with a site that meets
expectations.
31
CSS Absolute Values

Absolute values do not need
computation to determine the
computed value. As an example, blue
is an absolute value. No computation
needs to take place for the color blue
to be presented.
32
CSS Absolute Values

Absolute length units are only useful
when the physical properties of the
output medium are known:
in: inches
cm: centimeters
mm: millimeters
pt: points (in CSS2=1/72 of an inch)
pc: picas (1 pica=12 pts)
33
CSS Absolute Values

If absolute length cannot be supported,
user agents will approximate actual
value.
34
CSS Relative Values

Relative values are specified relative
to another value. As an example, the
value 12% must be transformed into a
computed value. It must be multiplied
by a reference value, 12% of something
= the computed value.
Computed values can be used as long
as the user agent is able to present the
value in the specific environment.
35
CSS Relative Values

em: the "font-size" of the relevant font
ex: the "x-height" of the relevant font
px: pixels, relative to the viewing device
li{lineheight:1.25cm;}
will result in the list line-height to be
25% greater than the font-size of the list
elements.
36
CSS Inheritance
Inheritance for a document is defined
in the document tree. Computed values
are inherited, specified percentage
values are not. Style applied, as an
example, to <body>, results (in
XHTML) in that style applied to all
children in the body element.
37
CSS Inheritance
Elements such as <h1> may have
additional or different applied style.
Inheritance can be used to apply one
style to body and another to h1, without
affecting other elements.
body{color:green;}
h1{color:navy;}
38
CSS Integers and Real Numbers

Integers and real numbers
Integer values, <integer>, consist of
one or more digits 0 to 9.
Real number values, <number>, can
either be an <integer>, or zero or
more digits followed by a dot (.),
followed by one or more digits.
39
CSS Integers and Real Numbers

<integer> and <number> values
may be preceded by a + or - to
indicate sign, although some properties
restrict value to positive values or a
range of negative or positive values.
40
CSS Lengths
Lengths refer to horizontal (x-axis) or
vertical (y-axis) measurements.
The format of a <length> value is an
optional sign character (+ or -, with +
as the default) immediately followed by
a <number> immediately followed by a
unit identifier (i.e. 5px) or a range of
negative or positive values.
41
CSS Percentages
Percentages <percentage> are
formatted with an optional sign
character (+ or -, with + as the
default) immediately followed by a
<number>. Percentage values are
relative to another value. Properties
that allow percentages define the value
to which the percentages refer.
42
W3C and Font Properties

The W3C determines the following
information for each font property:
1. Value: defines the values available
for each property
2. Initial: defines the default value for
each property
43

3. Applies to: defines which HTML
elements the property and value are
accepted by CSS
4. Inherited: defines whether parentchild relationships apply
44

5. Percentages: defines whether
percentage values are accepted
by CSS
6. Media: defines which media
accepts the property
45
Font Properties
font-family
h1{fontfamily:value,
"secondchoicevalue","third
choicevalue";}
46
Font Properties
font-style
li{fontstyle:italic;}
lip{fontstyle:normal;}
47
Font Properties
font-weight
h1{fontweight:700;}
p{fontweight:lighter;}
48
Font Properties
font-size
li{fontsize:24pt;}
pclass="Q1Sales"{fontsize:
smaller;}
pclass="Q2Sales"{font
size:90%;}
49
Font Properties
font
p{font:italicsmallcaps
60018pt/24ptArial,sans
serif;}
50
Text Property
text-align
h1{textalign:center;}
51
Color Properties
color
h1{color:blue;}
h1{color:rgb(51,51,153;}
h1{color:#333399;}
h1{color:3333FF;}
52
Color Properties
background-color
white;}
rgb(255,255,255);}
body{background:#FFFFFF;}
53
Image Property
background-image (test in all
browsers)
body{backgroundimage:url
(logo.gif);backgroundcolor:
rgb(255,255,255);}
54
Class and ID Attributes

class and id attributes allow you to
single out one instance of an XHTML
element or an identified grouping of
XHTML elements for the purpose of
applying style.
55

To write a style rule for an id value,
include the name of the id preceded by
a pound symbol (#) as the selector for
the rule.
#q4sfmp{color:maroon;}
results in maroon element text, for
those elements matching the id name
q4sfmp.
56

To write a style rule for a class value,
include the name of the class preceded
by a dot (.), as the selector for the rule.
.ytd{color:teal;}
results in teal element text, for those
elements matching the class name
ytd.
57
Display Properties
The display property specifies each
XHTML or XML element be displayed
as:
1. a block of text (typically <p> and
<h16>)
2. part of a line of text (typically inline
<em> and <span>
58
Display Properties
3. a list item (typically<li>)
4. a cell or row in a table (typically
<tr>)
5. a "run-in" header starting a new
block of text without a <br/>
6. a compact label in the margin such
as <dt> in a list
59
Block and Inline Elements

Thinking of elements as block
elements (beginning on a new line and
ending on a new line) or inline
elements (occurring within a line,
nested within block elements), allows
for better control of display.
60
Display Properties
display
Example XHTML=
<p>Blocksoftext<em>start
andend</em>onanewline.
Inlinetextisnestedwithin
aline.</p>
61
Display Properties
display
Example CSS=
p{color:navy;}
em{display:inline;}
62
Universal Selectors
The universal selector, written "*",
matches the name of any element type.
As an example, with the type selector:
h1{color:blue;}
*h1{color:blue;}
In both cases, all of the h1 elements
will be selected
63
Universal Selectors
With id attributes and class
attributes:
#q4sfmp{color:olive;}
.ytd{color:olive;}
does the same job as:
*#q4sfmp{color:olive;}
*.ytd{color:olive;}
64
Universal Selectors
One example where an "any" match
could be helpful is in applying style to
any instance within a specific hierarchy
in the document tree:
ul*p{color:red;}
65
Universal Selectors
ul*p{color:red;}
results in matching p elements that are
descendants of any element which is a
descendant of ul. This does not apply
the color red to ul, but rather to any
descendants of ul.
66
Descendant Selectors
The descendant selector matches an
element that is the descendant of
another element in the document tree.
A descendant selector is made of two
or more selectors separated by
whitespace. A descendant selector
match is made when the second
element is a descendant of the first.
67
dt{color:black;}
dd{color:gray;}
ddp{fontfamily:Arial,
sansserif;}
68
A child selector matches when an
element is the child of another element,
and when the elements are separated
by ">". As an example:
ol>li{color:purple;
fontfamily:sansserif;}
matches all li items found within ol.
69
ol>lip{color:purple;
matches all p items, not from the entire
body element, but descending from li,
as child to ol.
70
An adjacent sibling selector is keyed as
e1+e2 (element1 + element2) when
the elements share the same parents in
the document tree and element1
immediately precedes element2.
h3+h4{color:red;}
where h1, h2 and h5 or h6 do not
receive the color red.
71
Pseudo-Classes
Pseudo-classes permit selection based
on information outside of the document
tree or that cannot be expressed using
simple selectors. A pseudo-class
always contains a colon (:) followed by
the name of the pseudo-class, and
optionally by a value:
a:visited{color:blue;}
72
Pseudo-Classes
All a links in a document with an href
attribute are automatically classified as
visited or link (unvisited). If the link
has been visited recently, the browser
puts in pseudo-class visited.
a:link{color:green;}
a:visited{color:blue;}
73
Pseudo-Classes
The :activepseudoclass applies
while an element is activated by the
user, such as pressing and releasing a
mouse button.
74
Pseudo-Classes
The :hoverpseudoclass applies
when the user designates an element
(typically by moving a mouse over a
link or graphic link) but does not
activate it.
75
Pseudo-Classes
The :focuspseudoclass applies
when an element has the focus, it
applies style when it is the active
element.
76
Pseudo-Classes
An element may match more than one
class pseudo-class.
77
Attribute Selectors
Attribute selectors allow rules to match
attributes defined in the source
document (at this point your XHTML
document).
Attribute selectors allow you to create a
CSS file where you may apply style to
existing element attributes by matching
identifiers or strings of attribute values.
78
Attribute Selectors
The case-sensitivity of attribute names
and values matches the case of the
XHTML or XML document. Attribute
selectors match in four ways, the two
most common uses are shown here:
79
Attribute Selectors
1) A selector that matches attributes
based on whether they have a certain
attribute.
syntax:
selector[attribute]
{property:value;}
80
Attribute Selectors
example:
p[q4sfmp]{fontfamily:
sansserif;}
This selector option works well when
there is an attribute in an existing
XHTML or XML file and you want to
select it and add style.
81
Attribute Selectors
2) A selector that matches the value of
an attribute.
syntax:
selector[att=val]
{property:value;}
82
Attribute Selectors
example:
p[class="ytd"]{color:
teal;}
83
Attribute Selectors
or
p[fontweight="bold"]
{color:teal;}
Represents elements with a matching
attribute name, its value being exactly
val.
84
Attribute Selectors
Multiple attribute selectors can be used
to represent several attributes of an
element, or several instances of the
same attribute:
85
Attribute Selectors
<h1class="ytd">SalesForecast
Narrative</h1>
<pclass="ytd">ExistingMarkets</p>
<pclass="ytd">NewMarkets</p>
<pclass="future">Domestic</p>
<pclass="future">International</p>
86
Attribute Selectors
Multiple attribute selectors may look
like:
p[class="ytd"]
[class="future"]{color:
teal;}
87
Substring Matching
Attribute Selectors
A substring selector matches a portion
of the string value of an attribute.
The first substring matches the
beginning value of a string exactly.
syntax:
selector[att^="val"]
{property:value;}
88
Substring Matching
Attribute Selectors
<h1
class="YTDsales">Forecast</h1>
<pclass="Q1Sales">Sales</p>
<pclass="Q2Sales">Sales</p>
<pclass="Q1ROI">Returnon
Investment</p>
<pclass="Q2ROI">Returnon
Investment</p>
89
Substring Matching
Attribute Selectors
A CSS example is:
p[class^="Q"]{color:
#3300FF;}
results in a match where the string
values beginning exactly with the value
"Q", in this case the Quarterly Sales
and Quarterly Return on Investment,
will format in a navy blue font.
90
Substring Matching
Attribute Selectors
The second substring selector
matches the ending value of a string
exactly.
syntax:
selector[att$="val"]
{property:value;}
91
Substring Matching
Attribute Selectors
An example linking to the XHTML code
in the previous example is:
p[class$="ROI"]{font
weight:bold;}
results in a match where the string
values ending exactly with the value
"ROI", in this case Return on
Investment, will format in bold.
92
Substring Matching
Attribute Selectors
The third substring selector matches
anywhere in the value with a portion of
the substring "val".
syntax:
selector[att$="val"]
{property:value;}syntax
93
Substring Matching
Attribute Selectors
As an example, linking to the XHTML
code in the first substring selector:
selector[class$="Q2"]{font
style:italic;}
results in a match where the partial string
values containing exactly the value "Q2",
in this case Q2 Sales and Q2 Return on
Investment, format in italic.
94
Space
Properties related to space around
block-level elements include margin,
padding, and border.
95
Space
margin,margintop,margin
right,marginbottom,or
marginleft
lip{margin2px;}
gives p text within li a 2 pixel margin
96
Values
Margin, as with several CSS properties
set the styles of all four sides at once.
These values are listed within the rule,
whether there are one, two, three, or
four of them.
lip{margin:2em3em;}
97
Value Order
The order of these values and their
interpretation by a
browser is as follows:
1. When one value is set, the value
applies to all four sides.
2. When two values are set, the top
and bottom borders are set to the first
value, the right and left borders are
set to the second.
98
Value Order
3. When three values are set, the top
border is set to the first value, the right
and left borders are set to the second,
and the bottom border is set to the
third.
4. When four values are set, the values
apply in top/right/bottom/left order.
99
Space
Padding
tr{padding:3px2px;}
100
Space
border
<tableborder="value">
example:
<tableborder="5">
101
Space
borderwidth,borderstyle
bordercolor,border
example:
table{bordercolor:red;}or
table{border:mediumsolid
red;}
102
Cell Spacing
Cell spacing is the space between
adjacent cells, in a table.
syntax:
<tablecellspacing="value">
example:
<tablecellspacing="2">
103
Cell Padding
Cell padding is the distance between
the content of the cell and the border of
the cell.
syntax:
<tablecellpadding="value">
example:
<tablecellpadding="3">
104
Cell Spacing and Cell Padding

<tableborder="5"
cellspacing="2"
cellpadding"3">
105
Table Height
syntax:
<tableheight="height_px|
height_%">
example:
<trheight="10px">
106
Table Width
<tablewidth="300px">
<thwidth="20px">
107
Table Height and Width

The W3C specification excludes table
columns and column groups from the
height property along with rows and
row groups from the width property.
Use margin and padding properties to
format the height and width of a table.
108
Positioning
Relative positioning allows
corrections to the positions of individual
boxes, without altering the position of
other boxes.
109
Positioning
Absolute positioning takes an
element out of sequence and moves it
to another position, regardless of
additional block placement. Where
relative positioning allows for position
adjustments, absolute positioning
would be used to place a box,
regardless of user scrolling or screen
size manipulations.
110
Positioning
Fixed positioning places an element
in one position, never to move,
regardless of scrolling or content
change. The position property
determines whether elements are static
or subject to relative, absolute, or fixed
positioning.
111
Positioning
Typically, margin, padding, and border
properties are used rather than relative
positioning. Margin, padding, and
border spacing allow for positioning in
the placement of space around each
element.
112
Static Elements
Static elements (also called normal
elements) are placed in relationship to
their parent elements and other
elements that precede them.
113
Static Elements
In other words, using margin, padding,
and border properties, what you really
have is a hierarchy of elements, all
nested within the root element,
together making up the document tree.
Within these elements (inline) and
between these elements (block) space
can be manipulated.
114
Positioned Elements
Positioned elements, on the other
hand, are placed in relationship to
containing blocks, which may be their
parents or other elements higher up
the document tree.
115
Containing Block
The containing block for fixed position
elements is the viewport, for browsers
and other scrolling media, or the page
box, for paged media.
116
Containing Block
Relatively positioned elements, like
static elements, do not have a
containing block, although they may
serve as a containing block for a
positioned element.
117
Containing Block
The containing block for an absolute
positioned element is usually the root
element, although if the element is
inside of another positioned element,
that element will be its containing
block.
118
Containing Block
When an absolutely positioned element
is inside of another absolutely
positioned element, or inside a fixed
positioned element, it is easy to
establish the edges of the containing
block.
119
Containing Block
If the absolute positioned element is
inside of a relative positioned element,
the top and left edges of the become
the top and left edges of the containing
block and the bottom and right edges
of the relatively positioned element
becomes the bottom and right edges of
the containing block.
120
CSS and Parsing Errors

To ensure new properties and new
values for existing properties may be
added in the future, user agents are
required to follow rules when
encountering the following scenarios:
121

Unknown properties are ignored by
the user agent. For example:
li{whitespace:normal;
sort:alpha;}
will parse with normal whitespace only.
sort is not a CSS property.

122

Illegal values are ignored by the user
agent. For example:
li{whitespace:4px;}
will be ignored, 4px is not an allowed
value of the white-space property.
123

Invalid @ keywords are ignored by the
user agent including everything
following it though the next semicolon
(;) or block {}, whichever comes
first:
124

@sort
@columnone{
color:red;
li{textdecoration:
underline;}
125

The only accepted property from the
previous slide is:
li{textdecoration:
underline;}
126
CSS
Cascading Style Sheets
Last Slide
127

CSS Cascading Style Sheets

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

CSS Cascading Style Sheets

Hochgeladen von

Copyright:

Verfügbare Formate

CSS

Cascading Style Sheets

CSS Sorting Order

CSS Sorting Order

CSS Sorting Order

CSS Sorting Order

CSS Sorting Order

CSS Absolute Values

CSS Absolute Values

CSS Absolute Values

CSS Relative Values

CSS Relative Values

CSS Integers and Real Numbers

CSS Integers and Real Numbers

W3C and Font Properties

W3C and Font Properties

W3C and Font Properties

Class and ID Attributes

Class and ID Attributes

Class and ID Attributes

Block and Inline Elements

Cell Spacing and Cell Padding

Table Height and Width

CSS and Parsing Errors

CSS and Parsing Errors

sort is not a CSS property.

CSS and Parsing Errors

CSS and Parsing Errors

CSS and Parsing Errors

CSS and Parsing Errors

Das könnte Ihnen auch gefallen