Css Founder.com | Cssfounder Company

Css Founder.com | Cssfounder
Company
http://cssfounder.com

Outline
Development of Business Applications on the Internet
Fall
Instructor: Dr. Boris Jukic
CSS: Cascading Style
Sheets
Css Founder.com

Objectives
 Topics covered:
– using a style sheet to give all the pages of a Web site the
same look and feel.
– style sheet types and cascade precedence
– CSS syntax for assigning style properties
– Class selector and using the class attribute to apply
styles.
– using style sheets to separate presentation from content.
Css Founder.com

Introduction
 Cascading Style Sheets (CSS)
– Separation of structure from presentation
– Relationship between the style formatting and the
structure/content is no longer 1:1
 multiple style sheets can be applied to the same Web
page
 Same style sheet can be applied to the multiple Web
page
Css Founder.com

Multiple Levels of Style Definition
 Cascade Precedence: resolves conflicting
style rules
– Inline style sheets
– Embedded sheets
– External style sheets
 Author vs. User
Css Founder.com

Inline Styles
 style information is directly attached to the
HTML elements they affect
 higher cascade precedence than the other
specification methods
 declaring an individual element’s format:
– Attribute style
– CSS (style) property
 Followed by a colon and a value
Css Founder.com

Outline
inline.html
(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 
6 
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 
18 
19 
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
Css Founder.com

Outline
24 <p style = "font-size: 20pt; color: #0000ff">
25 This text has the <em>font-size</em> and
26 <em>color</em> styles applied to it, making it
27 20pt. and blue.</p>
28
29 </body>
30 </html>
Css Founder.com

Embedded Style Sheets
 this method can only specify style information for the
current document:
– 1:1 relationship
– However, the same document may have other style definitions
applied to it
 1:M relationship
 embedded style sheet rule will have higher precedence
than external style sheet rule, if there is a conflict between
styles
 embedded style sheet rule will have lower precedence
than an inline style sheet rule
Css Founder.com

Embedded Style Sheets
 Embed an entire CSS document in an XHTML document’s
head section inside a style element
– Attribute type
 Multipurpose Internet Mail Extensions (MIME) type
– describes the type of the document’s content
– text/css is the type for CSS document
– Style properties are defined for:
 Existing defined elements, such as p (paragraph), h3 (header),
li (Iist) or any other
 Style class that can be applied to either:
– Any existing type of element in the body of the document or
– One specific element in the document
Css Founder.com

CSS Syntax for Assigning Style
Properties
– The CSS syntax is made up of three parts: a selector, a property and a value:
 selector {property: value}
– A selector can be:
 the HTML element/tag you wish to define. In this example:
– body {color: black} , element body is the selector
 The class selector, which can be tied to a specific element, such as:
– p.right {text-align: right}
 The class selector applicable to any element, such as:
– .loud {font-family: fantasy; font-size: xx-large}
– If a class selector is used, it has to be invoked in the body of the
XHTML document:
– <p class="right"> or
– <table class=“loud”>
Css Founder.com

CSS Syntax for Assigning Style
Properties: additional issues
– Group selectors are possible for a group of HTML elements. For example:
– h1,h2,h3,h4,h5,h6 {color: green} will make all header elements
text green
– When a class selector is defined for a particular element, it can not
be invoked on other elements. Using example from the previous slide
which of these uses of class styles in the XHTML document is
correct?
– <ul class = “loud”>
– <ul class = “right”>
– Pseudo-class selectors define the style for the parts of a document
based on some characteristics other than tag name, attributes or
content. They may be defined by a user action such as:
– Mouseover (hover pseudoclass)
– Clicking (active pseudoclass)
Css Founder.com

CSS syntax: continue
 Invoking a style class to a block of text not
defined by a particular element
– span element
– div element (block level element)
Css Founder.com

Style Inheritance and Conflict
Resolution
 Inheritance
– An element that is present within another element
(child) inherits all style properties from its “parent”
element
– However, if such child (or descendant) element
has properties that conflict with defined properties
of its parent element, conflict is resolved in favors
of properties of a child element
 Child element properties have greater specificity than
ancestor’s properties
Css Founder.com

Outline
declared.html
(1 of 3)
4
5 
6 
7
9 <head>
10 <title>Style Sheets</title>
11
12 
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>
 Style Class selector:
applicable to any element in
this document
Css Founder.com

Outline
declared.html
(2 of 3)
26
27 <body>
28
29 
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
 Style Class “special”
invoked for p element
 Style Class “special”
invoked for h1 element
Css Founder.com

Outline
51 </body>
52 </html>
 color Conflict resolution
between parent element p
and child element em
Css Founder.com

Outline
advance.html
(1 of 3)
4
5 
6 
7
9 <head>
10 <title>More Styles</title>
11
13
14 a.nodec { text-decoration: none }
15
16 a:hover { text-decoration: underline;
17 color: red;
18 background-color: #ccffcc }
19
20 li em { color: red;
21 font-weight: bold }
22
23 ul { margin-left: 75px }
24
 Style Class: applicable only to
element a in this document
 Pseudoclass: applicable only to
element a in this document. (note
different syntax)
 This is NOT a group selector. It declares that this
specific style is applicable to em elements inside an
li element
Css Founder.com

Outline
advance.html
(2 of 3)
25 ul ul { text-decoration: underline;
26 margin-left: 15px }
27
28 </style>
29 </head>
30
31 <body>
32
33 <h1>Shopping list for <em>Monday</em>:</h1>
34
35 <ul>
36 <li>Milk</li>
37 <li>Bread
38 <ul>
39 <li>White bread</li>
40 <li>Rye bread</li>
41 <li>Whole wheat bread</li>
42 </ul>
43 </li>
44 <li>Rice</li>
45 <li>Potatoes</li>
46 <li>Pizza <em>with mushrooms</em></li>
47 </ul>
48
Css Founder.com

Outline
49 <p><a class = "nodec" href = "http://www.food.com">
50 Go to the Grocery store</a></p>
51
52 </body>
53 </html>
Css Founder.com

External Style Sheets
 External style sheets
– Applicable to more than document
– Documents can have more than one source for style
specification
M:M relationship
 Can provide uniform look and feel to entire site
 Same CSS syntax rules for assigning and invoking style
properties apply
Css Founder.com

External Style Sheets
 Location (href) and type (type) of the external style sheet are
specified as attributes of a link element in the head portion of an
XHTML document
 In addition, the rel attribute specifies the nature of the relationship
between the stylesheet and the document that is referencing it
– Persistent stylesheets must be applied to the document
– Preferred style sheet should be applied the unless the user has
selected a different alternate
– Alternate style sheets may be selected by users depending on
their preferences
Css Founder.com

Linking External Style Sheets
– To make a style sheet persistent, set the rel attribute to
"stylesheet".
– To make a style sheet preferred, set the rel attribute to
"stylesheet" and name the style sheet with the additional
title attribute.
– To specify an alternate style sheet, set the rel attribute to
"alternate stylesheet" and name the style sheet with the title
attribute.
Css Founder.com

Outline
styles.css
(1 of 1)
1 /* Fig. 6.4: styles.css */
2 /* An external stylesheet */
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 }
Css Founder.com

Outline
external.html
(1 of 2)
4
5 
6 
7
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>
Css Founder.com

Outline
26 </li>
27 <li>Rice</li>
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>
Css Founder.com

W3C CSS Validation Service
 Validates external CSS documents
 Ensures that style sheets are syntactically
correct
 http://jigsaw.w3.org/css-validator/
Css Founder.com

6.10 Text Flow and the Box Model
 Floating
– Move an element to one side of the screen
 Box model
– Margins
– Padding
– Border
Css Founder.com

Outline
floating.html
(1 of 3)
4
5 
6 
7
9 <head>
10 <title>Flowing Text Around Floating Elements</title>
11
13
14 div { background-color: #ffccff;
15 margin-bottom: .5em;
16 font-size: 1.5em;
17 width: 50% }
18
19 p { text-align: justify }
20
21 </style>
22
23 </head>
24
Css Founder.com

Outline
floating.html
(2 of 3)
25 <body>
26
27 <div style = "text-align: center">
28 Deitel & Associates, Inc.</div>
29
30 <div style = "float: right; margin: .5em;
31 text-align: right">
32 Corporate Training and Publishing</div>
33
34 <p>Deitel & Associates, Inc. is an internationally
35 recognized corporate training and publishing organization
36 specializing in programming languages, Internet/World
37 Wide Web technology and object technology education.
38 The company provides courses on Java, C++, Visual Basic, C,
39 Internet and World Wide Web programming, and Object Technology.</p>
40
41 <div style = "float: right; padding: .5em;
42 text-align: right">
43 Leading-Edge Programming Textbooks</div>
44
45 <p>The company's clients include many Fortune 1000
46 companies, government agencies, branches of the military
47 and business organizations.</p>
48
Css Founder.com

Outline
49 <p style = "clear: right">Through its publishing
50 partnership with Prentice Hall, Deitel & Associates,
51 Inc. publishes leading-edge programming textbooks,
52 professional books, interactive CD-ROM-based multimedia
53 Cyber Classrooms, satellite courses and World Wide Web
54 courses.</p>
55
56 </body>
57 </html>
Css Founder.com

Text Flow and the Box Model
Content
Margin
Border
Padding
Css Founder.com

Outline
borders.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>Borders</title>
11
13
14 body { background-color: #ccffcc }
15
16 div { text-align: center;
17 margin-bottom: 1em;
18 padding: .5em }
19
20 .thick { border-width: thick }
21
22 .medium { border-width: medium }
23
24 .thin { border-width: thin }
25
Css Founder.com

Outline
borders.html
(2 of 2)
26 .groove { border-style: groove }
27
28 .inset { border-style: inset }
29
30 .outset { border-style: outset }
31
32 .red { border-color: red }
33
34 .blue { border-color: blue }
35
36 </style>
37 </head>
38
39 <body>
40
41 <div class = "thick groove">This text has a border</div>
42 <div class = "medium groove">This text has a border</div>
43 <div class = "thin groove">This text has a border</div>
44
45 <p class = "thin red inset">A thin red line...</p>
46 <p class = "medium blue outset">
47 And a thicker blue line</p>
48
49 </body>
50 </html>
Css Founder.com

User Style Sheets
 Format pages based on user preferences
 User style sheets are not linked in the
document
– They are set in browser's options
Css Founder.com

Outline
User_absolute.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>User Styles</title>
11
13
14 .note { font-size: 9pt }
15
16 </style>
17 </head>
18
19 <body>
20
21 <p>Thanks for visiting my Web site. I hope you enjoy it.
22 </p><p class = "note">Please Note: This site will be
23 moving soon. Please check periodically for updates.</p>
Css Founder.com

Outline24
25 </body>
26 </html>
Css Founder.com

Outline
1 /* Fig. 6.17: userstyles.css */
2 /* A user stylesheet */
3
4 body { font-size: 20pt;
5 color: yellow;
6 background-color: #000080 }
Css Founder.com

User Style Sheets
Fig. 6.18 User style sheet in Internet Explorer 6.
Css Founder.com

User Style Sheets
Css Founder.com

Outline
User_relative.html
(1 of 2)
4
5 
6 
7
9 <head>
10 <title>User Styles</title>
11
13
14 .note { font-size: .75em }
15
16 </style>
17 </head>
18
19 <body>
20
21 <p>Thanks for visiting my Web site. I hope you enjoy it.
22 </p><p class = "note">Please Note: This site will be
23 moving soon. Please check periodically for updates.</p>
Css Founder.com

Outline
24
25 </body>
26 </html>
Css Founder.com

User Style Sheets
Fig. 6.21 User style sheet applied with em measurement.
Css Founder.com

Css Founder.com | Cssfounder Company

Recommended

More Related Content

What's hot (6)

Viewers also liked (13)

Similar to Css Founder.com | Cssfounder Company (20)

More from Css Founder (20)

Recently uploaded (20)

Css Founder.com | Cssfounder Company