C203 P06 CourseNotes

OFFICIAL (CLOSED) \ NON-SENSITIVE
P06-Introduction to CSS
C203 – Web Applications

Development
Cascading
Style
Sheet
Change one, control many
many
many
CSS – What Is It?
 CSS – Cascading Style Sheet

 Controls the appearance of a web page
 Recommended and standardized by the
World Wide Web Consortium (W3C)
 Cross-browser compatibility
 Ease of maintaining large web sites
 Sophisticated layout and design features
 No plugins required
CSS Syntax
Property – element that you want to change
Value – the type / amount of change
selector {property1:value1; property2:value2;... ;}
Selector – name of the style or html tag
Examples:
P { font-size: 2px ; color: blue ; }
h1 { background-color: yellow ; font-weight: bold ;
color: #000000 ; }
• Each selector’s property : value pair must end with a semicolon (;).
• Example of selector type are tags e.g. <body>, <p>, <table>.
Internal CSS (1)

<head>
</head> <head>
<body> <style>
<p>Garden City</p> p{
</body> font-size:50px;
color: red;
}
</style>
</head>
Garden City
Robots Are Here! <body>
<p>Garden City</p>
</body>
Internal CSS (2)

HTML with internal CSS
<html>
<head>
<style>
selector1 {property1:value1; property2:value2; ...}
selector1 {property1:value1; property2:value2; ...}
</style>
</head>
<body>
<p> Contents here </p>
</body>
</html>
 Each property : value pair ends with a semicolon (;).

 Example of selector type are tags e.g. <body>, <p>, etc.
 Other selector types can be CSS id or CSS class.
Exercise 1a
 Web page with Internal CSS
 Create CSS styles that make:
• the <body> element to have cyan background color
• all <h1> elements to have blue font color
 Elements affected:
• <body>
• <h1>
 CSS Properties:
• background-color
• color
Exercise 1a (Answer)
Exercise 1b
• the <body> element to have cyan background color
• all <h2> elements to have: blue font color, 40 pixel left margin, and a border
that is 1 pixel thick solid and black color
• <body>
• <h2>
 CSS Properties:
• background-color
• color
• margin-left
• border
Exercise 1b (Answer)
CSS Box Model
 Content – Content of the box, where text and images appear

 Padding – Clears an area around the content. The padding is transparent
 Border – A border that goes around the padding and content
 Margin – Clears an area outside the border. The margin is transparent.
Exercise 1c
• all <div> elements to have: cyan background color, center aligned text, font
family "Times New Roman"
• all <p> elements to have: blue font color, 40 pixel left padding, 30 pixel top
padding, 20 pixel left margin, 25 pixel top margin, and a border that is 1 pixel
thick solid and black color
• <div>
• <p>
 CSS Properties:
• background-color, color, border
• font-family
• text-align
• padding-left, padding-top, margin-left, margin-top
Exercise 1c (Answer)
Inline CSS
<head>
</head>
<body>
<p>Garden City</p> <head>
</body> </head>
<body>
<p style="font-size: 50px; color: red;">
Garden City
</p>
</body>
Garden City
Exercise 2a
 Web page with Inline CSS
 Include CSS styles that make:
• a specific <h1> element to have: blue font color
• a specific <p> element to have: bold font
• <h1>
• <p>
 CSS Properties:
• color
• font-weight
Exercise 2b
 Web page with Inline CSS
 Include CSS styles that make:
• a specific <h1> element to have: blue font color and center aligned
text
• a specific <p> element to have: bold font
• a specific <p> element to have: italic font
• <h1>
• <p>
 CSS Properties:
• color
• font-weight
• text-align
• font-style
Exercise 2c
 Web page with Inline & Internal CSS
• all <p> elements to have: red font color, cyan background color
• a specific <h1> element to have: blue font color, white background
color
• a specific <p> element to have: green font color, bold font, italic font
• <p>
• <h1>
 CSS Properties:
• color, background-color
• font-weight
• font-style
Internal and Inline CSS (Summary)
 Internal CSS
<head>
<style type="text/css">
p { text-align:center; }
</style>
</head>
 Inline CSS
<p style="background:blue; color:white;">
A new background and font color with inline CSS
</p>
External CSS
HTML + External CSS
Content (html) Visual appearance (css)
<html>
<head>
<link rel="stylesheet"
type="text/css“
href="mystyle.css"/> P {
</head> font-family: Verdana;
<body> font-size: 12px;
<P>
Now with CSS, color: blue;
HTML is written }
this way.
</P>
</body>
<html>
.html mystyle.css
Using external CSS to control page style
Exercise 3a
 Web page with External CSS
• the <body> element to have: coral background color
• all <h2> elements to have: light green font color, center aligned text
• all <p> elements to have: 20 pixel font size, "Times New Roman" font family
• <body>
• <h2>
• <p>
 CSS Properties:
• font-weight
• font-style
Exercise 3b
• the <body> element to have: coral background color
• all <h2> elements to have: white font color, center aligned text
• all <p> elements to have: 14 pixel font size, 20 pixel margin (all sides), 10 pixel padding
(all sides), "Times New Roman" font family, 2 pixel blue solid border
• all <div> elements to have: cyan font color, 50 pixel left margin, 30 pixel font size
• <body>
• <h1>
• <p>
 CSS Properties:
• margin, padding
• font-family
CSS Order of Precedence
Highest
Priority
Inline CSS
Internal CSS
External CSS
Lowest
Priority
Browser Default
When 2 selectors appear separately in the same CSS, the latest

selector will have the higher priority.
E.g. In the same internal CSS if you have two “p {}” selectors. The
one at the bottom of the file will have the higher priority.
Exercise 3c
 Web page with Internal, Inline, External CSS
 Create CSS styles (external) that make:
• the <body> element to have: cyan background color
• all <p> elements to have: 14 pixel font size, 20 pixel left margin, 1 pixel blue
solid border
 Create CSS styles (internal) that make:
• all <p> elements to have: 20 pixel font size, 4 pixel red solid border
 Create CSS styles (inline) that make:
• a specific <p> element to have: 12 pixel font size, 5 pixel left margin
• <body>
• <p>
 CSS Properties:
• color, background-color, font-size
• margin-left
external
internal
inline
CSS: Class selector

CSS Class syntax
<html>
<head>
.selectorName {property1:value1; property2:value2; ...}
</style>
</head>
<body>
<p class=“selectorName”> Contents here </p>
</body>
</html>
 Mainly used for specifying styles for a group of elements.

 Unlike the CSS id, CSS class can be used on several elements.
Exercise 4a
 Create two CSS class selectors:
• bigText: 20 pixel font size, bold text
• smallText: 10 pixel font size, red font color
• <p>
 CSS Properties:
• font-size
• font-weight
• color
CSS: id selector
CSS id syntax
<html>
<head>
#selectorName {property1:value1; property2:value2; ...}
</style>
</head>
<body>
<p id =“selectorName”> Contents here </p>
</body>
</html>
 Mainly for positioning unique elements on a web page, e.g. navigation,

banner, sidebar, content, footer.
 Can include styling properties, e.g. border, color, etc.
 CSS Id is used on only one element
Exercise 4b
 Create three CSS id selectors:
• header: 20 pixel font size, bold text
• footer: 20 pixel font size, italic text
• mainContent: 14 pixel font size
• <p>
 CSS Properties:
• font-size
• font-weight, font-style
Exercise 4c
 Create two CSS element selectors:
• <body>: yellow background color
• <h3>: blue font color, right aligned text
 Create two CSS class selectors:
• mediumText: 16 pixel font size
• fancy: 14 pixel font size, italic text, red font color
 Create two CSS id selectors:
• content: 12 pixel font size, bold text
• importantNote: 16 pixel font size, underline, light green bg color
• <body>, <h3>, <div>, <p>
 CSS Properties:
• font-size, background-color, text-decoration, text-align
• font-weight, font-style
Id and Class selector
Id selector Class Selector

Name is preceded by a dot character
Name is preceded by a hash
(.)
character(#).
Can be used to identify more than
Since id of an HTML element has to be
one html elements in a webpage.
unique within a webpage, id selector
Class selector is used to provide the
is used to provide a single element its
same set of characteristics to a group
unique characteristics.
of html elements.
Summary
Inline CSS Internal CSS
<head>
<p style="background: blue; color: white;"> <style type="text/css">
A new background and font color with inline CSS p { text-align:center; }
</p> </style>
</head>
External CSS
class
<head> .center {
<link rel="stylesheet" type="text/css" href="mystyle.css" /> text-align:center;
</head> html/php file }
hr {color:sienna;} id
p {margin-left:20px;}
body { #para1 {
background-image:url("images/back40.gif"); text-align:center; color:red;
} }
mystyle.css
HTML tags for list
• Unordered list (bullet points)

<ul>…</ul>
• Ordered list (default is 1,2,3). Others include (A, B, C), (i,

ii, iii)
<ol>…</ol>
• List data
<li>…</li>
HTML tags for creating list (Example)

Nested list
Scenario 1
 Examine the following CSS stylesheet and portion of an HTML code:
h1 {
background-color: yellow;
color: red;
}
body {
background-color: cyan;
}
li{
background: aliceblue;
color: dodgerblue;
}
<body>
Apple
<h1>Papaya</h1>
<div style="background-color:pink;">Watermelon</div>
<ul>
<li>Blood orange</li>
<li>Navel orange</li>
</ul>
</body>
Scenario 1
 For EACH line of code under the <body>, indicate its exact background
color and font color that will appear.
HTML code BG Color Font Color
Apple cyan black
<h1>Papaya</h1> yellow red
<div style="background-color:pink;">Watermelon</div> pink black
<li>Blood orange</li>
aliceblue dodgerblue
<li>Navel orange</li>
Scenario 2
 Examine the following CSS stylesheet and a portion of HTML code:
CSS stylesheet HTML code
#header {
text-align: center;
}
.common_content {
<body>
font-style: italic;
<div id="header">Header text</div>
}
<div class="content">Content 1</div>
.unique_content {
<p class="common_content">Content 2</p>
font-style: italic;
<div><p class="unique_content">Content
}
3</p></div>
#footer {
<div id="footer">Footer text</div>
font-weight: bold; </body>
}
p {
color:blue;
}
Scenario 2
 For EACH line of code under the <body>, indicate how it will be displayed
<div id="header">Header text</div>
• Text center aligned, font color black
<div class="content">Content 1</div>
• Font color black
<p class="common_content">Content 2</p>
• Font color blue, italic text
<div><p class="unique_content">Content 3</p></div>
• Font color blue, italic text
<div id="footer">Footer text</div>
• Font color black, bold
Deliverables
 Individual submission
 Worksheet word document
 P06 folder (zipped folder containing ONLY the folder and files
highlighted in blue):

C203 P06 CourseNotes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

C203 P06 CourseNotes

Uploaded by

Copyright:

Available Formats

OFFICIAL (CLOSED) \ NON-SENSITIVE

C203 – Web Applications

CSS – What Is It?

 CSS – Cascading Style Sheet

Value – the type / amount of change

selector {property1:value1; property2:value2;... ;}

Selector – name of the style or html tag

Internal CSS (1)

Internal CSS (2)

 Each property : value pair ends with a semicolon (;).

CSS Box Model

 Content – Content of the box, where text and images appear

Internal and Inline CSS (Summary)

CSS Order of Precedence

When 2 selectors appear separately in the same CSS, the latest

CSS: Class selector

 Mainly used for specifying styles for a group of elements.

 Mainly for positioning unique elements on a web page, e.g. navigation,

Id and Class selector

Id selector Class Selector

HTML tags for list

• Unordered list (bullet points)

• Ordered list (default is 1,2,3). Others include (A, B, C), (i,

HTML tags for creating list (Example)

HTML code BG Color Font Color

Apple cyan black

<h1>Papaya</h1> yellow red

<div style="background-color:pink;">Watermelon</div> pink black

You might also like