Scribd
Upload
14 views

Wt-Class 4

Cascading Style Sheets (CSS) allow separation of document structure from presentation by defining styles. There are three types of style sheets: inline styles defined within elements, embedded styles defined in the document head, and external styles linked via stylesheet. CSS can control text formatting, background images/colors, element dimensions, and more to visually style HTML documents.

Uploaded by

AJITH KANNAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
14 views

Wt-Class 4

Cascading Style Sheets (CSS) allow separation of document structure from presentation by defining styles. There are three types of style sheets: inline styles defined within elements, embedded styles defined in the document head, and external styles linked via stylesheet. CSS can control text formatting, background images/colors, element dimensions, and more to visually style HTML documents.

Uploaded by

AJITH KANNAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 39

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 &amp; 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 &amp; 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 &amp; 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 &amp; 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

You might also like