ppt
1
Cascading Style Sheets
(CSS)
Part 2
2
The Sources of Style Sheets
Embedded Style Sheets
3
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
BODY {color: red}
--> </STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
The embedded style sheet appears in the header inside a
<STYLE> element.
All the text of the style sheet is inside an HTML comment so that browsers that do not support CSS will ignore the text.
4
Inline Styles
• Any tag, except the <HTML> tag itself, can have the style attribute
• For example, the following will define the color of the paragraph to be green
<P style="color: green"> and this is green </P>
5
Imported Style Sheets
• The @import rule imports style rules to the beginning of the style sheet
• Usage: @import url(nameOfFile.css)
• Several import rules may appear at the beginning of the style sheet
• Import rules can appear in embedded style sheets or in external style sheets
Linked Style Sheets
• Links to external style sheets can appear in the header of an HTML page
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css ” href= “name.css“ media=“print handheld ”>
</HEAD>
<BODY>
...
</BODY>
6
</HTML>
7
Inheritance and Cascading
Inheritance of Properties
8
• If an element does not match any rule for some given property, then that property either
has an initial value, or
inherits the value from the parent of the element
• The CSS2 Specification determines which properties are inherited, for example
font-size is inherited background-color is not inherited – its initial value is transparent
9
Computed Values are Inherited
• When a property is inherited, the computed value (and not a relative value) is inherited
• See the example on next the slide
Example
• Given the rules:
BODY { font-size: 10pt }
H1 { font-size: 120% }
• What will be the font size of the EM element in the following HTML segment?
<BODY>
<H1>A <EM>large</EM> heading</H1>
</BODY>
10
11
Cascading Order
• When several rules define the same property and match the same element, then the cascading order is as follows:
Primary sort: weight and origin
Secondary sort: specificity of selectors
Final sort: order of appearance
• The cascading order determines which rule applies
12
Weight and Origin
• Author style sheets override user style sheets
•
• User style sheets override default (browser) style sheets
! important declaration overrides normal declaration
• If both author and user declarations have
! important , the user declarations still override the author declarations (in CSS2, but not in
CSS1)
Specificity of a Selector
• Let a be the number of ID attributes in the given selector
• Let b be the number of attributes and pseudo-classes in the given selector
• Let c be the number of element names in the given selector
• Sort the triples (a,b,c) lexicographically
• Pseudo-elements are ignored
13
14
Example
• Consider the two rules
P {…}
.introductory {…}
• If an element matches both, then the second rule has a higher specificity and overrides the first
15
Order of Appearance
• If two rules have the same weight, origin and specificity, then the one that appears last in the style sheet overrides the others
• Rules in imported style sheets are considered to appear before local rules
16
Lengths and Colors
How to Specify Them
17
Colors
• Colors can be specified as names
Aqua, Black, Blue, Fuchsia, Gray, Green,
Lime, Maroon, Navy, Olive, Purple, Red,
Silver, Teal, White, Yellow
• Colors can be specified as #RRGGBB
Each of RR, GG and BB should be a hexadecimal number ranging from 00 to FF
18
More Ways to Specify Colors
• RGB(rrr,ggg,bbb)
Each of rrr, ggg and bbb should be a decimal number ranging from 0 to 255
• RGB(rrr%,ggg%,bbb%)
Each of rrr, ggg and bbb should be a decimal number ranging from 0 to 100
Lengths
• Lengths can be specified in absolute units
cm, in, mm, pc (6 picas per inch), pt (72 points per inch)
• Length can be specified in relative units
em (the height of the current font), ex (the height of the letter “x” in the current font), px (pixels – relative to the screen resolution and size)
19
20
Using %
• Sometimes it is possible to use % to specify length (it is % of the current value of that property, as determined by inheritance and cascading)
• For example font-size: 200%
21
The Box Model
Elements as Boxes
<p> This is text. </p>
• The element is the yellow area
• The border is the thick black line
• The padding is the area between the element & the border
• The margin is around the border, on the outside
(the dotted line is imaginary)
22
Don’t Be Mislead by the Diagram
<p> This is text. </p>
• The padding has the same background color as the element
• The border can get its own color and style
• The margin is transparent
• Margins may collapse, i.e., adjoining margins of two or more boxes may combine (overlap) to form a single margin
23
Padding Properties
• The following properties determine the width of the padding on each side
padding-top
padding-right
padding-bottom
Alternatively, all four widths can be assigned to the property:
padding-left
• The value is
padding fixed length or % (of the width of the containing box)
• See examples in W3Schools
24
Border Properties
• The properties of the border are
The width (on each side)
• the possible values are
thin, medium, thick, or
length in some units (not %)
The border style
The border color
• See examples in W3Schools
25
26
Margin Properties
• The margin properties are the width on each side
• The value is one of the following:
fixed length
% (of the width of the containing box)
Auto
• See examples in W3Schools
27
Visual Formatting Model
Also Known as “Positioning”
Inline-Level Elements
• Inline-level elements do not start a new line, for example
<EM>
<SPAN>
• Inline-level elements generate inline boxes, which are positioned horizontally
(i.e., side-by-side on the same line until the line is full and then continuing on the next line)
28
29
Block-Level Elements
• Block-level elements start a new line, for example
<P>
<LI>
<DIV>
• Block-level elements generate block boxes, which are positioned vertically
(i.e., each box below the previous one)
The Display Property
• The display property may force an element to become inline-level or blocklevel
• Some possible values of the display property are
inline
block
none
• See example in W3Schools
30
31
Normal Flow
• Normal flow means that boxes are positioned left-to-right, top-to-bottom
• Each block box starts a new line
32
Floats
• A floating box is
first laid out according the normal flow, and
then it is taken out of the normal flow and shifted left or right as far as possible
• The normal flow continues along the side of a floating box
• See example in W3Schools
33
Absolute Positioning
• The declaration position: absolute means that the box is taken out of the normal flow entirely and positioned in some fixed coordinates with respect to the containing block
• See example in W3Schools
• More examples
Relative Positioning
• The declaration position: relative means that the box is first laid out according to the normal flow and then it may be shifted relative to this position
• The next box is laid out as if the previous relative box was not shifted
Relative positioning may cause boxes to overlap
• See example in W3Schools
34
The Clear Property
• The clear property is used to indicate that a box should not be placed next to the side of a float, but rather below that float
• The possible values are:
none (the initial value)
left
right
both
35
36
More Properties that
Effect Positioning
• Clip
• Overflow
• Vertical-align
• V-index
• See examples in W3Schools
37
Media Types
38
Rules for Specific
Media Types
• It is possible to define rules for specific media types
• See example in W3Schools
• The visual formatting model may behave differently for different media types
39
Examples
A Three-Column Design
40
Basic Idea
• Split the page into three column
• Menu on the left
• Main content in the center
• Links (e.g., resources) on the right
• Possibly some additional text is positioned after the three columns
The Rule for the Body
41 body{ background-color: gray; font-family: Tahoma, Verdana, sans-serif; font-size: 400%; color: yellow;
}
42
The Rule for the Left Column
DIV#left{ float: left; width: 20%; height: 300px; background-color: #000066;
}
The Rule for the Center Column
DIV#center{ float: left; width: 60%; height: 350px; background-color: #660000;
}
43
44
The Rule for the Right Column
DIV.right{ float: left; width: 20%; height: 350px; background-color: #006600;
}
45
The Body
<div id="left"> <p> float: left; </p>
</div>
<div id="center"> <p> float: left; </p>
</div>
<div class="right"> <p> float: left; </p>
</div>
46
The Rule for More Text
<div style="position: static">
More text goes here.
…
…
</div>
47
In the Following Examples
• Sometimes the width is in px and sometimes the width is in %
• Sometimes the “More Text” DIV has clear: left
• In the following examples, we vary the value of the position property in each
DIV
48
The Examples
• Example 1 : All positions are static
• Example 2 : All positions are relative
• Example 3 : All DIVs are float: left
• Example 4 : DIV.right is float: right
• Example 5 : The DIV of the “More Text” has clear: left
Two Right Columns
• Example 6 : DIV.right is float: right
• Example 7 : DIV.right is also has margins) float: left (and it
If the width of DIV.right is 20%, it will never fit on the right side, because of the width of the margin
• Change the font size in the examples and see what happens
49
