CSE1041 Web 1
Week 4
Cascading Style Sheets - CSS
1
Agenda
• What is a Style Sheet?
• How to specify a style using Style Sheets
• Types of styles:
– Inline style
– Internal style
– External style
• Multiple style sheets
– Precedence of style sheets
• Id and Class Selectors
2
Introduction
• A web document contains both structural and
presentation (or stylistic) information
• Need to separate them:
§ Structure – using HTML tags
§ Presentation – using CSS (Cascading Style Sheet)
• Use Style Sheets to control the style and layout of multiple
web pages at once
• To make a global change, simply change the style, and all
elements in the web pages are updated automatically
3
Structure v/s Style (1)
• HTML:
– Structure: divisions, paragraphs, tables, etc…
– Presentation: fonts, color, indentation, spacing, etc…
• In the style sheet approach, the structural information is
separated from the presentation information
• Presentation info is found in a style sheet
4
Structure v/s Style (2)
Structure
+
5
Presentation Formatted Web page
Cascading Style Sheets (CSS)
• CSS evolved from the need to globally control the
look of elements in a web page or multiple web
pages
• Example:
– If your company decides to use Arial font for standard
text on all its web pages, what to do?
– Painful solution: edit all pages individually and change
<font face=”…”> tag
– Easy solution: modify a style sheet which is
referenced by all web pages in your site
6
CSS Syntax
• The CSS syntax is made up of three parts:
1. Selector
2. Property
3. Value
• Example:
p {text-align: center;}
Selector Property Value
• Specifying more than 1 property:
– p{text-align:center; color:red;}
7
Types of Style Sheets
• There are three main types of CSS styles:
1. Inline style (inside an HTML element)
2. Internal style (inside the <head> tag)
3. External style (External file)
• Note: An inline style (inside an HTML element)
has the highest priority
8
Inline Style (1)
• An inline style loses many of the advantages of
style sheets by mixing content with presentation
• Use this method rarely, such as when a style is to
be applied to a single occurrence of an element
• To use inline styles you use the <style> attribute
in the relevant tag
9
Inline Style (2)
• Inline styles:
– Attributes of an element.
– Entered as attribute = value in element tag
• Example:
<p style="color: red; text-align: right">
This is a paragraph
</p>
10
Internal Style (1)
• An internal style sheet should be used when a
single document has a unique style
• You define internal styles in the <head>
section by using the <style> tag
• The browser will read the style definitions,
and format the document according to it
11
Internal Style (2)
• Style tags embedded in the <head> section of
a document
• Example:
12
Internal Style (3)
• In this example, all <input> <style>
and <textarea> tags will be input
{
formatted according to the text-transform:uppercase;
styles defined. color:red;
text-decoration:underline;
}
• In other words, we are re-
textarea
defining how HTML tags are {
displayed. text-transform:uppercase;
– This is useful when ALL the color:red;
}
tags need to follow a </style>
standard formatting.
13
External style sheet (1)
• An external style sheet is ideal when the style is
applied to many pages
• With an external style sheet, you can change the
look of an entire Web site by changing one file
• Each page must link to the style sheet using the
<link> tag
• The <link> tag goes inside the <head> section
14
External Style Sheet (2)
• Using a <link> tag in the <head> section of a
document
• Example:
15
Multiple Style Sheets (1)
• There are many ways to apply a style to an element:
– Inline Style
– Internal Style
– External style
• There is a possibility that multiple styles can apply to the
same element in a document
• CSS has a set of rules for resolving conflict:
– Specific style rules override general style rules
Inline style has precedence over Internal style which has
precedence over External style
16
Multiple Style Sheets (2)
• Example
17
Exercise 1 top.html
• Consider the
20%
following
screenshot.
80%
left.html
right.html
• An external
15% 85%
CSS style has
been defined Style definition (mystyle.css)
body
to format the {
background-color: Olive;
HTML pages. font-size: 14px;
}
18
Exercise 1(a)
<head>
• A registration page, <link rel="stylesheet" type="text/css"
register.html, has href="css/mystyle.css" />
been created.
<style type="text/css">
body{
• Assuming that the background-color: Yellow;
following styles have font-size: 12px;
}
been applied to </style>
register.html, what </head>
would be the final
background color <body style=" background-color: Blue” >
and font size of the
… HTML codes goes here
registration page?
Justify your answer. </body >
</html>
Register.html 19
Exercise 1(b)
• The left.html and right.html from Question 1
contains the code snippet below inside their body
section. Briefly explain what is wrong with this code
snippet and make the appropriate correction(s).
20
Selectors
• In addition to setting a style for a HTML
element, CSS allows you to specify your own
selectors:
– Id selector
– Class selector
• Id and Class selectors can be applied to:
– Internal styles
– External styles
21
Id Selector
• The id selector is used to specify a style for a
single, unique element.
• The id selector uses the id attribute of the
HTML element, and is defined with a "#".
• Example:
– The style rule below will be applied to the
element with id="para1"
#para1 <html>
{ <head><head>
text-align: center; <body>
color: red; <div id=“para1”> </div>
} </body> 22
Class Selector
• The class selector is used to specify a style for
a group of elements
• Unlike the id selector, the class selector is
most often used on several elements
• The class selector uses the HTML class
attribute, and is defined with a "."
23
Class Selector - Example 1
• Useful when we have similar tags e.g. <input>
that require different formatting within the
same page or web site
input.transform1{ <input type=text
text-transform:uppercase; name="txt_Username"
color:red;
text-decoration:underline;
class="transform1">
}
<input type=text
input.transform2{ name="txt_email"
text-transform:lowercase; class="transform2">
color:blue;
} Applying the style
Style 24
Class Selector - Example 2
• In Example 1, the class transform1, transform2 applies only to
<input> tag. It cannot be applied to <textarea> tag or any
other HTML tags
• A general class can be defined to apply to different types of
HTML tags
<input type=text
name="txt_Username"
.transform{
text-transform:uppercase;
class="transform">
color:red;
text-decoration:underline; <textarea rows=4
} cols=50
Style class="transform">
Applying the style
25
Using Id and Class selectors together
26
Exercise 2
• Consider the following HTML page top.html right.html
20%
80%
left.html
center.html
15% 50% 35% 27
Exercise 2
• The web designer wants to enhance the website using
CSS. A file named mystyle.css has been created in the
subfolder styles.
• Given the requirements below, write the content of the
mystyle.css file for the following html pages:
left.html • Body background color should be yellow
• Body text color should be grey
center.html, • Body background color should be pink
right.html • All Level 3 headings should be blue and of
size 16 pixels
• The following information could be helpful:
– background-color, text-transform, font-size, color, text-
decoration, text-align.
28
References
• CSE1041 – Previous Notes
• http://www.htmldog.com/guides/cssintermed
iate/classid/
• http://www.w3schools.com/css/css_id_class.a
sp
29
