Css 1. -_introduction_2010-11_

1.1 Cascading Style Sheets (CSS) - 1.1 Cascading Style Sheets (CSS) -
What is CSS? Overview:

• As originally envisaged, XHTML (and HTML before it)
• It is a style sheet language that is used to add styles (e.g. was to be used as a language to specify the structure of
fonts, colors, …). a document - style of the elements was to be kept
separate. However, as HTML grew different browsers
• It is also used (in conjunction with XHTML Divs) to began implementing elements that allowed users to
control the layout of web pages. control the style of the document such as <font>, thus
permitting the user to specify font color, size, and face
of the content on the page – going against the specified
purpose of HTML, which is why such elements have been
deprecated from the strict definition of XHTML – they
are present in the Transitional version to allow time for
people to get used to implementing style through the
preferred method – Cascading Style Sheets.

IS 1103 Sect. WWW 1 IS 1103 Sect. WWW 2
Development - CSS Development - CSS

1.1 Cascading Style Sheets (CSS) - 1.1 Cascading Style Sheets (CSS)
Overview: – Key Points
• One of the greatest challenges for XHTML developers
today is to separate how a document is presented (i.e. its
format or style) from its actual content. • CSS stands for Cascading Style Sheets
• This separation of style from content is the holy grail • Styles define how to display HTML elements
of web development. • Styles are normally stored in Style Sheets
• Consider the following: often a DTP pgm, rather than a • Styles were added to HTML 4.0 to solve a problem
word processor is used to “style” documents yet a word • External Style Sheets can save you a lot of work
processor will have been used to originally create the • External Style Sheets are stored in .css files
content. • Multiple style definitions will cascade into one


1.1 Cascading Style Sheets (CSS) – Solved 1.1 CSS Can Save a Lot of Work
a Common Problem • Styles are normally saved in files external to your
• HTML tags were originally designed to define the content XHTML documents. External style sheets enable you to
of a document. They were supposed to say "This is a change the appearance and layout of all the pages in
header", "This is a paragraph", by using tags like <h1>, <p>. your Web, just by editing a single CSS document. If
The layout of the document was supposed to be taken you have ever tried to change the font or color of all the
care of by the browser, without using any formatting headings in all your Web pages, you will understand the
tags. benefit of CSS to web site maintenance.

• As the major browsers - Netscape and IE - continued to • CSS is a breakthrough in Web design because it allows
add new HTML tags (like the <font> tag and the color developers to control the style and layout of multiple
attribute) to the original HTML specification, it became Web pages all at once. As a Web developer you can
more difficult to ensure the content of HTML define a style for each XHTML element and apply it to as
documents was clearly separated from the document's many Web pages as you want. To make a global change,
presentation (style) layout. simply change the style, and all elements in the Web site
are updated automatically.
• To solve this problem, theSect. WWW standard setting
IS 1103
W3C, 5 IS 1103 Sect. WWW 6
consortium - createdDevelopment - addition to HTML 4.0.
CSS in CSS Development - CSS

1

1.2 CSS Syntax - 3 parts 1.2 CSS Syntax - 3 parts
• CSS syntax is made up of 3 parts selector, property & value. • CSS generalised syntax

• CSS is syntax is much like that of XHTML. Let's compare them. selector { property: value }
XHTML 1 2 3

• EXAMPLE body {color: black}
<font size="2">
1 2 3
• The selector is the XHTML element/tag you wish to
CSS
CSS define, the property is the attribute you wish to
change, and each property has an associated value.
The property and value are separated by a colon : and
body {font-size:16px;} surrounded by curly braces { … }
• As you can see above, the XHTML Element is equivalent to the
CSS Selector, the XHTML Attribute is equivalent to the CSS
EXAMPLE p {font-family: "sans serif"}
1 2 3
Property and the Values mean the same in both XHTML & CSS.
• If the value consists of multiple words, put quotes
IS 1103 Sect. WWW 7 around the value: IS 1103 Sect. WWW 8

1.2 CSS Syntax - Explained 1.2 CSS categories of selectors
• An example of a CSS declaration is as follows body {color: black}
• The CSS selector is the XHTML element or tag that you want to (1) UNIVERSAL selector
apply CSS styles to. In other words, it tells the web browser what
to apply styles to. • The universal selector symbol is an asterisk *. It tells
• The selector is followed by a set of opening and closing curly the web browser to apply the CSS rules that are
brackets { and } and everything within the curly brackets is called a specified to ALL XHTML elements in the document.
declaration block. The universal selector applies to everything, including
• Within a declaration block there are CSS property and value(s)
pairs. These property and value(s) pairs are called declarations.
form input fields and tables.
There can be as many declarations as you wish that can apply for • The code below would produce a web page with all of
that particular selector(s) within a declaration block. the text within the web page rendered in red.
• The property tells the web browser what attribute of the <head>
selector to style and the value specifies how the attribute will <style type="text/css">
be formatted. The property and value are separated by a colon, if * { color:red; }
the value is multiple words, place the value in quotes. </style>
• If you want to specify more than one property, place a semicolon </head>
between each pair. For example: <body>
• p { color:red; font-size:20px; } <h1>This is a RED level 1 heading</h1>
• However it is good practice to place a semicolon behind each value, <h2>This is a RED level 2 heading.</h2>
whether or not there are1103 Sect. WWW
multiple pairs specified. <p> This is a RED paragraph.</p>
IS 9 </body> IS 1103 Sect. WWW 10

1.2 CSS categories of selectors 1.2 CSS categories of selectors
(2) TYPE selector
• A type selector is the XHTML element or tag that you want the (2) TYPE selector
web browser to apply CSS styles to.
1 2 3 <head>
2 3
EXAMPLE p {text-align:center; color:red} <style type="text/css">
p { color:red; }
• To specify more than one property, you must separate each </style>
property (name value pair) with a semi-colon. The example above </head>
shows how to define a center aligned paragraph, with a text color
of red. <body>
<h1>This is a level 1 heading</h1>
• An improved & preferred code layout can be seen below: <h2>This is a level 2 heading.</h2>
<p> This is a red paragraph.</p>
1 </body>
EXAMPLE p
{ 2 3
text-align: center;
2 3
color: black; 3
2
font-family: arial
}


2

(3) Group selector (4) Class selector
• With the class selector you can define different styles
• You can group selectors. Separate each selector with a for the same type of XHTML element. Say that you would
comma. In the example below we have grouped the h1, like to have two types of paragraphs in your document: one
h2 and h3 header elements. right-aligned paragraph, and one center-aligned paragraph.
Here is how you can achieve this using styles:
EXAMPLE (part A - declaration)
<head> p.right {text-align: right}
<style type="text/css">
p.center {text-align: center}
h1, h2, h3 { color:red; }
</style>
</head> • You have to use the class attribute in your HTML
<body> document:
<h1> This is a RED level 1 heading. </h1>
<h2> This is a REDlevel 2 heading. </h2>
EXAMPLE (part B - implementation)
<h3> This is a RED level 3 heading. </h3>
<h4> This is a level 4 heading. </h4>
<p class="right"> This paragraph will be right-aligned.</p>
<h5> This is a level 5 heading. </h5> <p class="center"> This paragraph will be center-aligned. </p>
<h6> This is a level 6 heading. </h6>
</body> • Note: Only one class attribute can be specified per
IS 1103 Sect. WWW 13 XHTML element! IS 1103 Sect. WWW 14

(4) Class selector (4) Class selector Example
• You can also omit the XHTML tag name in the selector to
define a style that will be used by ALL XHTML elements
that have a certain class. In the example below, all HTML
elements with class="center" will be center-aligned: <head>
EXAMPLE (part A - declaration) .border { border: 1px solid black; }
</style>
.center {text-align: center}
</head>
• In the code below both the h1 element and the p element
have class="center". This means that both elements will <body>
follow the rule(s) in the ".center" selector: <h1> This is a heading. </h1>
<h1 class="border"> This is a heading. </h1>

EXAMPLE (part B - implementation) <p> This is a paragraph. </p>
<h1 class="center"> This heading will be center-aligned </h1> <p class="border"> This is a paragraph. </p>

<p class="center"> This paragraph will also be center-aligned. </p> </body>


(5) id selector
• Each ID selector is meant to be unique and to be referenced only
(5) id selector & Divs Example
once per XHTML document. <head>
• In the declaration the # symbol precedes the ID name. #header { height:300px; border-bottom:1px solid black; }
• The ID is included in the XHTML body section using the ID attribute #left-column { float:left; width:250px; }
within the XHTML element that the web browser will apply the styles #right-column { float:right; }
to. </style>
• ID selector tends to be used in conjunction with XHTML Div </head>
elements.
<body>
EXAMPLE (part A) <div id="header">
#greencol {color: green} <h1> YourWebsite </h1>
The rule above will match both the h1 and the p elements below: </div> 
EXAMPLE (part B)
<p id="greencol">Some text</p>: <div id="left-column">
<h2> Left Column </h2>
</div> 

<div id="right-column">
IS 1103 Sect. WWW 17 <h2> Right Column </h2> WWW
IS 1103 Sect. 18
Development - CSS </div> Development - 
CSS
</body>

3

1.3 Cascading Style Sheets (CSS) – 1.3.1 CSS Inline Styles
Ways of inserting a Style : – Example 1:
• A style is simply a set of formatting instructions that can • An inline style loses many of the advantages of
be applied to a document or an element within a document.
external style sheets by mixing content with
presentation. Use this method sparingly, such as when a
• There are 3 mechanisms by which we can apply styles style is to be applied to a single occurrence of an element.
to our XHTML documents:

– INLINE – the style is defined within the actual XHTML tag • You define inline styles in the body section by using the
itself within the body section. style attribute associated with the relevant tag. The
style attribute can contain any CSS property.
– INTERNAL/EMBEDDED – where styles are defined in the head
section & applied to the whole document.

– EXTERNAL – where the styles are defined in an external file
and can be used in any document by referencing the stylesheet via
a URL.

1.3.1 CSS Inline Styles 1.3.1 CSS Inline Styles
– Example 1: – Example 1:
• An inline style sheet ………….
EXAMPLE (css0.html)
<html>
<head>
<title> … </title>
</head>

<body>
<p style="margin-left: 10%; border: ridge; background: #ffffcc“; >
Simple Style – Inline CSS
</p>
</body>

</html>

1.3.1 CSS Inline Styles 1.3.1 CSS Inline Styles
• This example presents Inline Styles that declare an 1 <?xml version = "1.0"?>

individual elements format using the attribute style by
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

applying inline styles to paragraph elements to alter their
4
5  Inline.html

font size & color.
6 
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
• The 1st inline style decl. appears on L.20. Each CSS 9
10
<head>
<title>Inline Styles</title>
property is followed by a colon (:) and a value. 11
12
</head> The style attribute specifies the style for an eleme
Some style properties are font-size and color.
• The 2nd inline style decl. appears on L.24 and specifies two
13 <body>
14

properties, separated by a semi-colon (;)
15 <p>This text does not have any style applied to it.</p>
16
17 
• NB Inline styles override any other styles applied using 18
19

-->
other techniques we will discuss later. 20
21
<p style = "font-size: 20pt">This text has the
<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
26 <em>color</em> styles applied to it, making it
27 20pt. and blue.</p>
28
29 </body>
Development - CSS 30 </html> Development - CSS

4

1.3.1 CSS Inline Styles 1.3.2 Internal (Embedded) Styles
– Example 2:
• In this section we will present a 2nd technique for using
style sheets called embedded style sheets.
• Embedded style sheets enable a web developer to embed
the CSS style declaration in an XHTML document’s head
section.


1.3.2 Internal (Embedded) Styles 1.3.2 Internal (Embedded) Styles
EXAMPLE (css1.html)
<html>
<head>
• An internal style sheet should be used when a single <title> … </title>
document has a unique style. You define internal styles <style type="text/css">
in the head section by using the <style> tag, like this: h1{
color: red;
border: thin groove;
text-align: center;
}
</style>
</head>

<body>
<h1> Simple Style – Internal/Embedded CSS </h1>
</body>
</html>

• In the above example the style was declared in the
• The style element L.13-24 defines the CSS. Styles placed in the head
<head> section of the document. apply to matching elements in the entire document, not just to a
• The declaration (h1) is the name of the element which is single element.
• The type attribute specifies the Multipurpose Internet Mail
to be changed & an associated definition which is Extension (MIME) type that describes a files content. CSS doc.s
everything inside the braces. Within the braces the use the MIME type of text/css.
attributes are placed in a name value pair list & separated • L.15-22 declares the CSS rules for the style sheet – the rules
declared in this example are for elements
by semi-colons. em (L.15-16) / h1 (L.18) / p (L.20)
• Tip – place each attribute (name value pair) on a separate • When the browser renders this doc, it applies the properties defined
in these rules to each element to which the rule applies.
line for readability/maintenance.
• For example the rule on lines 15-16 will be applied to all em
• elements. The body of each rule is enclosed within curley braces (
{…} )
• We declare a style class named special in L.22. Class declarations are
applied to elements only of that class.


5

• L.18 specifies the name of the font to use . In this case • The p element and the .special class style are applied to
we use arial – if its not found on the client PC the browser the text in lines 42-49. All styles applied to an element
will then display the 2nd choice (comma seperated list) i.e. (the parent or ancestor, element) also apply to that
the second value supplied - sans-serif (a generic font elements nested elements (decendant elements).
family) resulting in a member of this font family such as • The em element inherits the style from the p element
helvetica or verdana being displayed. (namely, the 14pt font size in L.20), but retains its italic
• L.30 uses attribute class in a h1 element to apply a style style. Importantly however this property overrides the
class – in this case class special (declared as .special in color property of the special class because the em
the style sheet). When the browser renders the h1 element has its own color property. Rules exist for
element, notice that the text appears on screen with both resolving these conflicts.
the properties of the h1 element (define in L.18) and also
the properties of the .special style class applied (the
color blue define on L.22) Sect. WWW
IS 1103 31 IS 1103 Sect. WWW 32

1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 27 <body>
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 28
4 29 
5  Declared.html 30 <h1 class = "special">Deitel & Associates, Inc.</h1>
31 Declared.html
6 
7 32 <p>Deitel & Associates, Inc. is an internationally
8 <html xmlns = "http://www.w3.org/1999/xhtml"> 33 recognized corporate training and publishing organization
9 <head> 34 specializing in programming languages, Internet/World
10 <title>Style Sheets</title> 35 Wide Web technology and object technology education.
11 Use the style element to 36 Deitel & Associates, Inc. is a member of the World Wide
12  37 Web Consortium. The company provides courses on Java,
create an embedded CSS.
13 <style type = "text/css"> 38 C++, Visual Basic, C, Internet and World Wide Web The styles associated with the
14 39 programming, and Object Technology.</p>
40
special class are applied to the
15 em { background-color: #8000ff;
16 color: white } 41 <h1>Clients</h1> header and paragraph elements.
17 42 <p class = "special"> The company's clients include many
Styles placed in the head apply 43 <em>Fortune 1000 companies</em>, government agencies,
18 h1 { font-family: arial, sans-serif }
19 to all elements in the document. 44 branches of the military and business organizations.
20 p { font-size: 14pt } 45 Through its publishing partnership with Prentice Hall,
21 46 Deitel & Associates, Inc. publishes leading-edge
22 .special { color: blue } 47 programming textbooks, professional books, interactive
23 48 CD-ROM-based multimedia Cyber Classrooms, satellite
24 </style> More style properties include font 49 courses and World Wide Web courses.</p>
25 </head> 50
type (font-family) and background 51 </body>
26
color (background-color). 52 </html>

A style class named special is created. Development - CSS the
Style classes inherit Development - CSS
style properties of the style sheet in addition to their own.

1.3.2 Internal (Embedded) Styles 1.3.3 External Styles

• An external style sheet is ideal when the style is to be applied to
Program Output many pages. With an external style sheet, you can change the look
of an entire Web site by changing one file.
Notice the styles defined
• Each web page must link to the style sheet using the <link> tag.
in the CSS are applied to The <link> tag is coded in the head section:
all paragraphs, headers,
and bolded text. EXAMPLE (xxx.html)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Elements that have the
special class applied have
the class’s styles as well as EXAMPLE (mystyle.css)
the CSS styles applied. hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}


6

1.3.3 External Styles 1.3.3 External Styles
1 /* Fig. 6.4: styles.css */

• The browser will read the style definitions from the 2
3
/* An external stylesheet */

file mystyle.css, and format the document accordingly. 4
5
a { text-decoration: none }
Styles.css

• An external style sheet can be written in any text editor.
6 a:hover { text-decoration: underline;
7 color: red;

The file should NOT contain any xhtml tags. Your style
8 background-color: #ccffcc }
9

sheet MUST be saved with a .css extension.
10 li em { color: red;
11 font-weight: bold;
12 background-color: #ffffff }
• Do NOT leave spaces between the property value and the 13
14 ul { margin-left: 2cm }
units! 15
16 ul ul { text-decoration: underline;
use 17 margin-left: .5cm }

margin-left:20px
instead of
margin-left: 20 px


1.3.3 External Styles
32 <p>

– Example 1: 33
34
35
<a href = "http://www.food.com">Go to the Grocery store</a>
</p>
1 <?xml version = "1.0"?> 36 </body> External.html
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 37 </html>
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5  External.html
6 
7
Program Output
8 <html xmlns = "http://www.w3.org/1999/xhtml"> The link element is used to
9 <head> reference an external style sheet.
10 <title>Linking External Style Sheets</title>
11 <link rel = "stylesheet" type = "text/css"
12 href = "styles.css" />
13 </head> The documents rendered with an
14 external CSS should be the same as
15 <body> The type attribute those rendered with an internal CSS.
16
17 <h1>Shopping list for <em>Monday</em>:</h1>
defines the MIME type.
18 <ul>
19 <li>Milk</li>
20 <li>Bread
21 <ul>
22 <li>White bread</li>
23 <li>Rye bread</li> The rel attribute is used to
24 <li>Whole wheat bread</li> define the linking relationship.
25 </ul>
26 </li>
27 <li>Rice</li>
28 <li>Potatoes</li>
29 <li>Pizza <em>with mushrooms</em></li>
30 </ul>
31

1.3.4 Combined Inline & Internal 1.3.4 Combined Inline & Internal
(Embedded) Styles (Embedded) Styles – Example 1:
– Example 1: EXAMPLE (css2.html)
• ………. <html>
<head>
<title> … </title>
h1{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1> Simple Style – Internal/Embedded CSS </h1>
<p> This first paragraph is left unaltered </p>

<p style="margin-left: 10%; border: ridge; background: #ffffcc">
This paragraph undergoes radical alterations </p>

<p> And we finish with an unaltered paragraph </p>
IS 1103 Sect. WWW 41 </body> IS 1103 Sect. WWW 42
Development - CSS </html> Development - CSS

7

1.3.5 Styles using Classes 1.3.5 Styles using Classes – Example 1 :
– Example 1 :
EXAMPLE (css3.html)
<html>
<head>
• …………. <title> … </title>
h1{
color: red;
text-align: center;
}

h2{
color: green;
margin-left: 60%;
}

.myid1{
text-align: center;
color: purple;
}

.myid2{
text-align: left;
color: red;
}
</style>
</head>

1.3.5 Styles using Classes – Example 1 : 1.3.5 Styles using Classes
– Example 1 :
EXAMPLE (css3.html) continued…
<body>

<h1> a h1 Heading - CSS using classes </h1>
• In the above example two classes are declared myid1,
<p> This first paragraph is left unaltered </p> myid2.
<p style="margin-left: 10%; border: ridge; background: #ffffcc">
But the 2nd paragraph undergoes radical alterations </p>
•
<p> And this is an unaltered paragraph </p>

<h2> Here is a h2 Heading </h2>

<p class="myid1"> Followed by a paragraph using class=myid1 </p>

<h3 class="myid1"> Another Header h3 using class=myid1 </h3>

<p class="myid2"> A paragraph using class=myid2 </p>

<p style="margin-left: 30%; color: blue">
And finally a paragraph in the middle of the screen </p>

</body>

</html>


1.4 Cascading 1.4 Cascading
– 1.4.1 Styles can Cascade: - 1.4.2 Cascading Order
• What style will be used when there is more than one
• Styles can cascade this means that formats override any style specified for an XHTML element?
which were defined or included earlier in the document.
• E.g. you may include an external stylesheet which • Generally speaking we can say that all the styles will
redefines the <p> tag, then code an internal/embedded <p> "cascade" into a new "virtual" Style Sheet by the
following rules, where number four has the highest
style in in the head section of your document before priority:
finally redefining the <p> tag as an inline style within the
body section of your document. 1. Browser default
• In the above example the browser will use the inline 2. External Style Sheet
style definition when rendering the content. 3. Internal Style Sheet (inside the <head> tag)
• Futhermore you can define a style which is applied to all 4. Inline Style (inside XHTML element)
instances of an XHTML element (a class selector) so that
all h1 headings are changed , or you can alter the • So, an inline style (inside an XHTML element) has the
appearance of just specific h1 elements – leaving the highest priority, which means that it will override every
style declared inside the <head> tag, in an external style
others unchanged. IS 1103 Sect. WWW 47
sheet, and in a browser (a default value).
IS 1103 Sect. WWW 48

8

Css 1. -_introduction_2010-11_

More Related Content

What's hot (18)

Similar to Css 1. -_introduction_2010-11_ (20)

Recently uploaded (20)

Css 1. -_introduction_2010-11_