Outline
Cascading Style Sheets
Introduction
Cascading Style Sheets (CSS)
Separation of structure from presentation
CSS stands for Cascading Style Sheets Styles which
define how to display HTML elements
Classify the three basic types of
cascading
Inline style
style sheets.
Internal style or embedded style
External style
Inline Styles
Declare an individual element’s format
Attribute style
CSS property
Followed by a colon and a value
CSS properties
Background-color
Font family
Font size
Absolute : “font-size: 20pt”
Relative : xx-small, x-small, smaller, medium, large, larger, x-
large, xx-large
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" Outline
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.1: inline.html -->
6 <!-- Using inline styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Inline Styles</title>
11 </head>
12
13 <body>
14
15 <p>This text does not have any style applied to it.</p>
16
17 <!-- The style attribute allows you to declare -->
18 <!-- inline styles. Separate multiple styles -->
19 <!-- with a semicolon. -->
20 <p style = "font-size: 20pt">This text has the
21 <em>font-size</em> style applied to it, making it 20pt.
22 </p>
23
24 <p style = "font-size: 20pt; color: #0000ff">
25 This text has the <em>font-size</em> and
Outline
26 <em>color</em> styles applied to it, making it
27 20pt. and blue.</p>
28
29 </body>
30 </html>
Embedded Style Sheets
Embed an entire CSS document in an XHTML
document’s head section
Property background-color
Specifies the background color
Property font-family
Specifies the name of the font to use
Property font-size
Specifies a 14-point font
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" Outline
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.2: declared.html -->
6 <!-- Declaring a style sheet in the header section. -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Style Sheets</title>
11
12 <!-- this begins the style sheet section -->
13 <style type = "text/css">
14
15 em { background-color: #8000ff;
16 color: white }
17
18 h1 { font-family: arial, sans-serif }
19
20 p { font-size: 14pt }
21
22 .special { color: blue }
23
24 </style>
25 </head>
26
27 <body>
Outline
28
29 <!-- this class attribute applies the .special style -->
30 <h1 class = "special">Deitel & Associates, Inc.</h1>
31
32 <p>Deitel & Associates, Inc. is an internationally
33 recognized corporate training and publishing organization
34 specializing in programming languages, Internet/World
35 Wide Web technology and object technology education.
36 Deitel & Associates, Inc. is a member of the World Wide
37 Web Consortium. The company provides courses on Java,
38 C++, Visual Basic, C, Internet and World Wide Web
39 programming, and Object Technology.</p>
40
41 <h1>Clients</h1>
42 <p class = "special"> The company's clients include many
43 <em>Fortune 1000 companies</em>, government agencies,
44 branches of the military and business organizations.
45 Through its publishing partnership with Prentice Hall,
46 Deitel & Associates, Inc. publishes leading-edge
47 programming textbooks, professional books, interactive
48 CD-ROM-based multimedia Cyber Classrooms, satellite
49 courses and World Wide Web courses.</p>
50
51 </body>
52 </html>
Outline
Linking External Style Sheets
External style sheets
Can provide uniform look and feel to entire site
1 /* Fig. 6.4: styles.css */
2 /* An external stylesheet */ Outline
3
4 a { text-decoration: none }
5
6 a:hover { text-decoration: underline;
7 color: red;
8 background-color: #ccffcc }
9
10 li em { color: red;
11 font-weight: bold;
12 background-color: #ffffff }
13
14 ul { margin-left: 2cm }
15
16 ul ul { text-decoration: underline;
17 margin-left: .5cm }
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Outline
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.5: external.html -->
6 <!-- Linking external style sheets -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Linking External Style Sheets</title>
11 <link rel = "stylesheet" type = "text/css"
12 href = "styles.css" />
13 </head>
14
15 <body>
16
17 <h1>Shopping list for <em>Monday</em>:</h1>
18 <ul>
19 <li>Milk</li>
20 <li>Bread
21 <ul>
22 <li>White bread</li>
23 <li>Rye bread</li>
24 <li>Whole wheat bread</li>
25 </ul>
26 </li>
27 <li>Rice</li>
Outline
28 <li>Potatoes</li>
29 <li>Pizza <em>with mushrooms</em></li>
30 </ul>
31
32 <p>
33 <a href = "http://www.food.com">Go to the Grocery store</a>
34 </p>
35
36 </body>
37 </html>
Backgrounds
CSS can set a background color or add background
images to HTML5 elements
Background-image
Specifies the image URL to set as back ground image
Example: background-image: url(logo.png);
Background-position
Places the image on the page
Keywords top, bottom, center, left and right are used
individually or in combination for vertical and
horizontal positioning.
Backgrounds
Example: background-position: 50% 30px;
Position the image as horizontally centered and 30
pixels from the top
Background-repeat
Controls background image tiling, which places
multiple copies of the image next to each other to fill
the background
Example: background-repeat: no-repeat;
no-repeat: to display only one copy of the background
image
repeat (the default): tile the image vertically and
horizontally
Backgrounds
repeat-x: To tile the image only horizontally
repeat-y: To tile the image only vertically
background-attachment
Example: background-attachment: fixed
Fixed: Fixes the image in the position specified by
background-position
scroll (default): Moves the image as the user scrolls
through the document.
Backgrounds
text-indent
To indent the first line of text in the element by a
specified amount,
em is scalable
unit that is
equal to
current font
size.
Ex: If current
font size is 12
pt then 1 em=
12 pt
Backgrounds
Output of background-repeat: repeat
Output of background-repeat: no-repeat
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Outline
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.10: background.html -->
6 <!-- Adding background images and indentation -->
7
8 <html xmlns = "http://www.w3 .org/1999/xhtml">
9 <head>
10 <title>Background Images</title>
11
12 <style type = "text/css">
13
14 body { background-image: url(logo.gif);
15 background-position: bottom right;
16 background-repeat: no-repeat;
17 background-attachment: fixed; }
18
19 p { font-size: 18pt;
20 color: #aa5588;
21 text-indent: 1em;
22 font-family: arial, sans-serif; }
23
24 .dark { font-weight: bold; }
25
26 </style>
27 </head>
Outline
28
29 <body>
30
31 <p>
32 This example uses the background-image,
33 background-position and background-attachment
34 styles to place the <span class = "dark">Deitel
35 & Associates, Inc.</span> logo in the bottom,
36 right corner of the page. Notice how the logo
37 stays in the proper position when you resize the
38 browser window.
39 </p>
40
41 </body>
42 </html>
Element Dimensions
CSS rules can specify the actual dimensions of each
page element
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
Outline
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.11: width.html -->
6 <!-- Setting box dimensions and aligning text -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Box Dimensions</title>
11
12 <style type = "text/css">
13
14 div { background-color: #ffccff;
15 margin-bottom: .5em }
16 </style>
17
18 </head>
19
20 <body>
21
22 <div style = "width: 20%">Here is some
23 text that goes in a box which is
24 set to stretch across twenty percent
25 of the width of the screen.</div>
26
27 <div style = "width: 80%; text-align: center">
Outline
28 Here is some CENTERED text that goes in a box
29 which is set to stretch across eighty percent of
30 the width of the screen.</div>
31
32 <div style = "width: 20%; height: 30%; overflow: scroll">
33 This box is only twenty percent of
34 the width and thirty percent of the height.
35 What do we do if it overflows? Set the
36 overflow property to scroll!</div>
37
38 </body>
39 </html>
Positioning Elements
CSS position property
Absolute positioning
Specifying an element’s position as absolute removes it
from the normal flow of elements on the page
Position the element according to distance from top, left,
right or bottom margins of parent element
z-index attribute
Allows you to properly layer overlapping elements
Elements with higher z-index are displayed in front of
elements with lower z-index
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3
1. position property
4<!-- Fig 9.6: positioning.html -->
1.1 absolute
5<!-- Absolute positioning of elements --> positioning
6 1.2 z-index
7<HEAD>
8<TITLE>Absolute Positioning</TITLE>
9</HEAD>
10
11<BODY>
12
13<IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px;
14 left: 0px; z-index: 1">
15<H1 STYLE = "position: absolute; top: 50px; left: 50px;
16 z-index: 3">Positioned Text</H1>
17<IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px;
18 left: 100px; z-index: 2">
19
20</BODY>
21</HTML>
Positioning elements with CSS
Positioning Elements (II)
CSS position property (cont.)
Relative positioning
Browser lays out the element on the page
Then offsets the element by specified top, bottom, left or
right values
Keeps elements in the general flow of elements on the page
Be careful to avoid unintentionally overlapping text
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3
4<!-- Fig 9.7: positioning2.html -->
5<!-- Relative positioning of elements --> 1. relative
6 positioning
7<HEAD>
8<TITLE>Relative Positioning</TITLE>
9
10<STYLE TYPE = "text/css">
11
12 P { font-size: 2em;
13 font-family: Verdana, Arial, sans-serif }
14
15 SPAN { color: red;
16 font-size: .6em;
17 height: 1em }
18
19 .super { position: relative;
20 top: -1ex }
21
22 .sub { position: relative;
23 bottom: -1ex }
24
25 .shiftl { position: relative;
26 left: -1ex }
27
28 .shiftr { position: relative;
29 right: -1ex }
30</STYLE>
31</HEAD>
32
33<BODY>
34
35<P>
36Text text text text <SPAN CLASS = "super">superscript</SPAN>
37text text text text <SPAN CLASS = "sub">subscript</SPAN> 2. Page rendered by
38text Text text <SPAN CLASS = "shiftl">left-shifted</SPAN>
browser
39text text text <SPAN CLASS = "shiftr">right-shifted</SPAN>
40Text text text text text
41</P>
42
43</BODY>
44</HTML>
SUMMARY
CSS
Inline style
Embedded style
Conflicting style
Linking external style
Positioning elements
Backgrounds
Element dimension
User stylesheet
MINDMAP
SUMMARY
• Meta elements
Attributes
CSS
Inline style
Embedded style
Conflicting style
Linking external style
Positioning elements
Backgrounds
Element dimension
User stylesheet
