Scribd
Upload
16 views

C203 P06 CourseNotes

The document provides an introduction to Cascading Style Sheets (CSS) including: - CSS controls the appearance and layout of web pages. It is standardized by the W3C and compatible across browsers. - CSS syntax uses selectors to target HTML elements and applies properties and values to style them. - Internal, inline, and external CSS are introduced as methods of applying CSS styles to HTML pages. A variety of exercises demonstrate applying CSS properties to style text, color, borders and more. - CSS precedence is discussed, with inline styles having the highest priority and browser defaults the lowest.

Uploaded by

Dick Go
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

C203 P06 CourseNotes

The document provides an introduction to Cascading Style Sheets (CSS) including: - CSS controls the appearance and layout of web pages. It is standardized by the W3C and compatible across browsers. - CSS syntax uses selectors to target HTML elements and applies properties and values to style them. - Internal, inline, and external CSS are introduced as methods of applying CSS styles to HTML pages. A variety of exercises demonstrate applying CSS properties to style text, color, borders and more. - CSS precedence is discussed, with inline styles having the highest priority and browser defaults the lowest.

Uploaded by

Dick Go
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

OFFICIAL (CLOSED) \ NON-SENSITIVE

P06-Introduction to CSS

C203 – Web Applications


Development
OFFICIAL (CLOSED) \ NON-SENSITIVE

Cascading
Style
Sheet
Change one, control many

many

many
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
OFFICIAL (CLOSED) \ NON-SENSITIVE

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>.
OFFICIAL (CLOSED) \ NON-SENSITIVE

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>
OFFICIAL (CLOSED) \ NON-SENSITIVE

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.
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 1a (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 1b
 Web page with Internal CSS
 Create CSS styles that make:
• 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
 Elements affected:
• <body>
• <h2>
 CSS Properties:
• background-color
• color
• margin-left
• border
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 1b (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

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.
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 1c
 Web page with Internal CSS
 Create CSS styles that make:
• 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
 Elements affected:
• <div>
• <p>
 CSS Properties:
• background-color, color, border
• font-family
• text-align
• padding-left, padding-top, margin-left, margin-top
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 1c (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
 Elements affected:
• <h1>
• <p>
 CSS Properties:
• color
• font-weight
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 2a (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
 Elements affected:
• <h1>
• <p>
 CSS Properties:
• color
• font-weight
• text-align
• font-style
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 2b (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 2c
 Web page with Inline & Internal CSS
 Create CSS styles that make:
• 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
 Elements affected:
• <p>
• <h1>
 CSS Properties:
• color, background-color
• font-weight
• font-style
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 2c (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

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>
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 3a
 Web page with External CSS
 Create CSS styles that make:
• 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
 Elements affected:
• <body>
• <h2>
• <p>
 CSS Properties:
• color, background-color
• font-weight
• font-style
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 3a (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 3b
 Web page with External CSS
 Create CSS styles that make:
• 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
 Elements affected:
• <body>
• <h1>
• <p>
 CSS Properties:
• color, background-color
• margin, padding
• font-family
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 3b (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

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.
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
 Elements affected:
• <body>
• <p>
 CSS Properties:
• color, background-color, font-size
• margin-left
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 3c (Answer)
external

internal

inline
OFFICIAL (CLOSED) \ NON-SENSITIVE

CSS: Class selector


CSS Class syntax
<html>
<head>
<style type="text/css">
.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.
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 4a
 Web page with External CSS
 Create two CSS class selectors:
• bigText: 20 pixel font size, bold text
• smallText: 10 pixel font size, red font color
 Elements affected:
• <p>
 CSS Properties:
• font-size
• font-weight
• color
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 4a (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

CSS: id selector
CSS id syntax
<html>
<head>
<style type="text/css">
#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
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 4b
 Web page with External CSS
 Create three CSS id selectors:
• header: 20 pixel font size, bold text
• footer: 20 pixel font size, italic text
• mainContent: 14 pixel font size
 Elements affected:
• <p>
 CSS Properties:
• font-size
• font-weight, font-style
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 4b (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 4c
 Web page with External CSS
 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
 Elements affected:
• <body>, <h3>, <div>, <p>
 CSS Properties:
• font-size, background-color, text-decoration, text-align
• font-weight, font-style
OFFICIAL (CLOSED) \ NON-SENSITIVE

Exercise 4c (Answer)
OFFICIAL (CLOSED) \ NON-SENSITIVE

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.
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
OFFICIAL (CLOSED) \ NON-SENSITIVE

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>
OFFICIAL (CLOSED) \ NON-SENSITIVE

HTML tags for creating list (Example)


OFFICIAL (CLOSED) \ NON-SENSITIVE

Nested list
OFFICIAL (CLOSED) \ NON-SENSITIVE

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>
OFFICIAL (CLOSED) \ NON-SENSITIVE

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>
OFFICIAL (CLOSED) \ NON-SENSITIVE

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;
}
OFFICIAL (CLOSED) \ NON-SENSITIVE

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
OFFICIAL (CLOSED) \ NON-SENSITIVE

Deliverables
 Individual submission
 Worksheet word document
 P06 folder (zipped folder containing ONLY the folder and files
highlighted in blue):

You might also like