M03 CSS

Introduction to Web Technology
Module Number: 03
Module Name: CSS
Version Code:WTF6
Released Date:24-Jan-2019 1
CSS
AIM:
To equip the students with fundamentals and characteristics of CSS.
2
CSS
Objectives:
The Objectives of this module is to:

• Learn CSS role in creating user interfaces (for mobile) and websites.
• Learn the basic CSS concepts: selectors, CSS properties, CSS code structure, CSS
declarations, CSS unit types etc.
• Learn how CSS is included in an HTML page.
3
CSS
Outcome:
At the end of this module, you are expected to:

• Define basic page layout types, including mobile User Interface (UI) coding
techniques.
• Discuss the mobile layouts using CSS techniques.
• Work independently to solve basic tasks involving CSS and HTML.
4
CSS
Contents
1. Introduction to CSS
2. Syntax
3. Selectors
4. Embedding CSS to Html
5. Formatting fonts
6. Text and background colour
7. Borders and boxing
5
CSS
Introduction to CSS
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen, paper or in other media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• External style sheets are stored in CSS files.
6
CSS
Introduction
Håkon Wium Lie

7
CSS
CSS Timeline
CSS3(1999)
CSS2(1998)
CSS1(1996)
8
CSS
Document Links
Topics URL
https://www.w3schools.com/css/css_intro.asp
Introduction to CSS
Introduction to CSS https://www.tutorialspoint.com/css/what_is_css.htm
9
CSS
Video Links
Topics URL
Introduction to CSS https://www.youtube.com/watch?v=qKoajPPWpmo
Introduction to CSS https://www.youtube.com/watch?v=lNEp3qv2lO8
10
CSS
Self Assessment Question
1. CSS stands for ____________.
a. Cascading Style Sheets

b. Creative Style Sheets
c. Cascading Spread Sheets
d. None of the above
Answer: Cascading Style Sheets
11
CSS
2. CSS is the language used for:
a. Defining the structure of the web page
b. Describing the presentation of the web page
c. Defining the content of the web page
d. All of the above
Answer: Describing the presentation of the web page
12
CSS
3. CSS was accepted as a W3C standard in:
a. 1996
b. 1994
c. 1995
d. 1992
Answer: 1996
13
CSS
4. XML was made a W3C recommendation in the year ________________.
a. 1998
b. 2000
c. 1999
d. 2001
Answer: 1998
14
CSS
CSS Syntax
15
CSS
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
• In the following example all <p> elements will be centre-aligned, with a red text colour:
p{
colour: red;
text-align: center;
} 16
CSS
Document Links
Topics URL
CSS Syntax https://www.w3schools.com/css/css_syntax.asp
17
CSS
Video Links
Topics URL
CSS Syntax https://www.youtube.com/watch?v=QqmCs2UTS8s
18
CSS
5. There can be more than one declaration in a CSS rule set separated by a semicolon. State whether
True or False.
a. True
b. False
Answer: True
19
CSS
6. The CSS rule set consists of
a. Declaration
b. Selector and declaration
c. Selector
Answer: Selector and declaration
20
CSS
CSS Selectors
21
CSS
CSS Selectors
Element selector
Selector
ID selector
Class selector
22
CSS
Element Selector
Example A:
h2 {
colour: blue;
background-colour: lightblue;
}
Example B:
p{
colour: red;
background-colour: yellow;
}
23
CSS
ID Selector
#para1 {
text-align: center;
colour: red;
}
<p id=“para1”>
Hello World!
<p>
24
CSS
Class Selector
Example A
.center {
text-align: center;
colour: red;
}
Example B
p.center {
text-align: center;
colour: red;
}
25
CSS
Document Links
Topics URL
Introduction to CSS Selectors https://www.w3schools.com/csSref/css_selectors.asp
Types of Selectors https://www.sitepoint.com/css-selectors/
26
CSS
Video Links
Topics URL
Introduction to CSS Selectors https://www.youtube.com/watch?v=EeZKHmNJipE
Selectors https://www.youtube.com/watch?v=KZ7h5DZ-vL0
27
CSS
7. An element selector uses the ______________ to define the styling.
a. Name of the element
b. Declaration of the element
c. Both A and B
Answer: Name of the element
28
CSS
8. In a CSS rule, the id selector is written with a
a. # character
b. $ character
c. & character
Answer: # character
29
CSS
9. We can use the same id for more than one element on a page. State whether True or False.
a. True
b. False
Answer: False
30
CSS
10. Class selector allows us to style only specific elements of an element type. State whether True or
False.
a. True
b. False
Answer: True
31
CSS
Embedding CSS to HTML
32
CSS
Including CSS in HTML
33
CSS
Inline Style
<p style="colour:grey“;”text-align:center” >

This is a paragraph
</p>
34
CSS
Embedded Style Sheets
<head>
<style>
body
{
background colour: powderblue;
}
h1
{
colour: maroon;
margin-left: 40px;
}
</style>
</head>
35
CSS
External Style Sheets
<head>
<link rel="stylesheet" type="text/css" href=“filename.css">
</head>
36
CSS
Here is a sample for “filename.css“:
body
{
background-colour: lightblue;
}
h1
{
colour: navy;
margin-left: 20px;
}
37
CSS
Document Links
Topics URL
https://www.w3schools.com/html/html_css.asp
HTML Styles- CSS
https://matthewjamestaylor.com/add-css-to-html
How to Embed CSS to HTML
38
CSS
Video Links
Topics URL
https://www.w3schools.com/html/html5_video.asp
Embed CSS to HTML
Embedding CSS to HTML https://www.youtube.com/watch?v=7AEFciYWquY
39
CSS
11. Which is the correct CSS syntax?
a. Body: colour=black
b. {body; colour: black}
c. {body: colour= black(body}
d. body {colour: black}
Answer: body {colour: black}
40
CSS
12. Including the style element in the head section is called _______ style.
a. External style sheet
b. Internal style sheet
c. Inline style sheet
Answer: Internal style sheet
41
CSS
13. Inline style uses ______________ attribute to define the style of an element.
a. Head
b. Background
c. Style
Answer: Style
42
CSS
14. To apply the same style across pages we should use:
a. Internal style sheet
b. External style sheet
c. Inline style sheet
Answer : External style sheet
43
CSS
Formatting Fonts
44
CSS
CSS Fonts
The CSS font properties define:
• font family
• weight
• Size
• Style
• Font-variant
of a text.
45
CSS
CSS Font Families
Font Families
Font family
Generic family
Example: Times
Example : Serif
New Roman
46
CSS
CSS Font Families
The font family of text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font, and so on.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family if no other fonts are available.
Example :
p{
font-family: "Times New Roman", Times, serif;
}
47
CSS
CSS Font Style

The font-style property is mostly used to specify an italic text.
This property has three values:
• normal - The text is shown normally.
• italic - The text is shown in italics.
• oblique - The text is "leaning“.
48
CSS
CSS Font Weight
49
CSS
CSS Font Size
The font-size property sets the size of the text. The font size can be set using pixels, em or a combination
of both.
Example A: using pixels
h1 {
font-size: 40px;
}
Example B: using em unit (1 em unit = current font size)
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
50
CSS
CSS Font Size
51
CSS
CSS ICONS
The simplest way to add an icon to your HTML page is with an icon library, such as Font Awesome.
52
CSS
Font Awesome Icons
To use the Font Awesome icons, add the following line inside the <head> section of your
HTML page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
53
CSS
CSS Icon Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflar
e.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
54
</html>
CSS
Document Links
Topics URL
https://www.w3schools.com/css/css_font.asp
CSS Fonts
https://www.w3schools.com/csSref/pr_font_font.asp
Font Property
Fundamental Text
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
and Font Styling
55
CSS
Video Links
Topics URL
https://www.youtube.com/watch?v=yBSK-B65XyQ
Style font in CSS
Changing font colour, https://www.youtube.com/watch?v=UO0ZPL8yMpU

size and type
56
CSS
15. An example of a generic family font is:
a. Sans Serif
b. Times
c. Calibri
Answer: Sans Serif
57
CSS
16. Font size ______________ is same as normal.
a. 200
b. 400
c. 800
d. 100
Answer: 400
58
CSS
17. The font-style property is mostly used to specify which text style.
a. Normal
b. Oblique
c. Italic
Answer: Italic
59
CSS
Text and Background colours.
60
CSS
Text colour
The colour property is used to set the colour of the text. The colour is specified by:
• a colour name - like "red“.
• a HEX value - like "#ff0000“.
• an RGB value - like "rgb(255,0,0)“.
The default text colour for a page is defined in the body selector.
61
CSS
Example
body {
colour: blue;
}
h1 {
colour: green;
}
62
CSS
Background colour
• The background-colour property specifies the background colour of an element.
• The background colour of a page is set like this:
For Example,
body {
background-colour: light blue;
}
• With CSS, a colour is most often specified by:

• a valid colour name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)" 63
CSS
Document Link
Topics Links
CSS Background https://www.w3schools.com/csSref/pr_background-color.asp
CSS Text https://www.w3schools.com/css/css_text.asp
64
CSS
Video Link
Topics URL
Background colour https://www.youtube.com/watch?v=-Ss7VdgJQ1I
Font and background colour https://www.youtube.com/watch?v=rOzvtFetv8A
65
CSS
18. The default text colour for a page is defined in the body selector. State whether True or False.
a. True
b. False
Answer: True
66
CSS
19. The colour in CSS file is specified by:
a. a colour name - like "red“
b. a HEX value - like "#ff0000“
c. an RGB value - like "rgb(255,0,0)“
d. All of the above
Answer: All of the above
67
CSS
Borders and Boxing
68
CSS
CSS Borders
69
CSS
Example
<style>
.borderStyling {
border-style: dotted;
border-colour: blue;
border-width: 3px;
border-radius: 10px;
}
</style>
<h1 class=“borderStyling” align=“centre”>

Hello World!
</h1>
70
CSS
CSS Box Model
71
CSS
CSS Box example
72
CSS
Box Dimensions
Width and Height

• Decide the width and height of the content box.
• The content can be text or other boxes nested inside this box.
Padding
You can give a common padding for all four sides of the box or set them individually using the properties:
• padding-top
• padding-right
• padding-bottom
• padding-left
73
CSS
Box Dimensions
Border
The border starts at the outer edge of the padding.
By default, there is no border or border size 0.
example: border:2px, solid black
2 pixels thick solid black border.
Border can also be set all four at once using the border property or individually using
– border-top
– border-right
– border-bottom
– border-left.
The border-colour property is used to change the border colour. 74

CSS
Box Dimensions
Margin
The margin surrounds the CSS box and lies between the boxes.
The margin width can be set all at one using the margin property or individually using the margin-top,
margin-right, margin-bottom and margin-left properties.
Example dimensions for a paragraph element:
p{
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
The width is 300 px, padding and margin are 25px, and the border is 25px solid and green in colour.
75
CSS
Box Dimensions
Margin collapsing
When two CSS boxes touch against one another in a webpage, the distance between them will be the
value of the largest of the two margins, and not their sum.
76
CSS
Document Links
Topics Links
CSS box-sizing property in CSS https://www.w3schools.com/csSref/css3_pr_box-sizing.asp
CSS Box Model https://www.w3schools.com/css/css_boxmodel.asp
77
CSS
Video Links
Topics URL
Box Sizing in CSS https://www.youtube.com/watch?v=Nk8CZuH7C8k
CSS Box Model https://www.youtube.com/watch?v=qhiQGPtD1PQ
78
CSS
20. Which of these are border styles? (Choose multiple)
a. Inset
b. Groove
c. Ridge
d. Outcast
e. Only A,B and C
Answer: Only A,B and C

79
CSS
21. Padding is:
a. The margin between the outer edge of the border and outer edge of the content box.
b. The inner margin between the inner edge of the border and the outer edge of the content box.
c. Both A and B
Answer: The inner margin between the inner edge of the border and the outer edge of the
content box
80
CSS
22. The outermost layer of the CSS box is:
a. The margin
b. The border
c. The Line
Answer: The margin
81
CSS
23. CSS displays each element in a box format. State whether True or False.
a. True
b. False
Answer: True
82
CSS
Assignment
1. Write a code to create a CSS Grid.
2. How can you embed an HTML page in CSS? Explain with example.
3. List potential benefits of using CSS.
4. Assume multiple elements have class="btn red". What CSS selector should we use to style only
elements that have both of these classes?
5. What CSS selector should you use to style all <input type="button"> elements with class="btn"?
6. In how many ways can a CSS be integrated as a web page?
7. What is CSS Box Model and what are its elements?
8. Compare Grouping and Nesting in CSS ? 83

CSS
Summary
• CSS describes how HTML elements are to be displayed on a screen, paper or in other media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• External style sheets are stored in CSS files.
• CSS rule-set consists of a selector and a declaration block.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.
• In the Text colour, the default text colour for a page is defined in the body selector.
• The background-colour property specifies the background colour of an element.
84
CSS
Summary (Cont…)
• The border starts at the outer edge of the padding.
• The margin width can be set all at one using the margin property or individually using the margin-
top, margin-right, margin-bottom and margin-left properties.
85
CSS
Document Links
Topics URL
Introduction to CSS https://www.w3schools.com/css/css_intro.asp
Introduction to CSS https://www.tutorialspoint.com/css/what_is_css.htm
CSS Syntax https://www.w3schools.com/css/css_syntax.asp

Introduction to CSS Selectors https://www.w3schools.com/csSref/css_selectors.asp
Types of Selectors https://www.sitepoint.com/css-selectors/
HTML Styles- CSS https://www.w3schools.com/html/html_css.asp
How to Embed CSS to HTML https://matthewjamestaylor.com/add-css-to-html
86
CSS
Document Links
Topics URL
CSS Fonts https://www.w3schools.com/css/css_font.asp
Font Property https://www.w3schools.com/csSref/pr_font_font.asp
Fundamental Text and
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
Font Styling
CSS Background https://www.w3schools.com/csSref/pr_background-color.asp
CSS Text https://www.w3schools.com/css/css_text.asp
CSS box-sizing
https://www.w3schools.com/csSref/css3_pr_box-sizing.asp
property in CSS
CSS Box Model https://www.w3schools.com/css/css_boxmodel.asp
87
CSS
Video Links
Topics URL
Introduction to CSS https://www.youtube.com/watch?v=qKoajPPWpmo
Introduction to CSS https://www.youtube.com/watch?v=lNEp3qv2lO8
CSS Syntax https://www.youtube.com/watch?v=QqmCs2UTS8s
Introduction to CSS Selectors https://www.youtube.com/watch?v=EeZKHmNJipE
Selectors https://www.youtube.com/watch?v=KZ7h5DZ-vL0
Embed CSS to HTML https://www.youtube.com/watch?v=jpjzhva3owA
Embedding CSS to HTML https://www.youtube.com/watch?v=7AEFciYWquY
Style font in CSS https://www.youtube.com/watch?v=yBSK-B65XyQ
88
CSS
Video Links
Topics URL
Changing font colour, size and type https://www.youtube.com/watch?v=UO0ZPL8yMpU
Background colour https://www.youtube.com/watch?v=-Ss7VdgJQ1I
Font and background colour https://www.youtube.com/watch?v=rOzvtFetv8A
Box Sizing in CSS https://www.youtube.com/watch?v=Nk8CZuH7C8k
CSS Box Model https://www.youtube.com/watch?v=qhiQGPtD1PQ
89
CSS
E-Book Links
Topics URL Page Number

https://www.tutorialspoint.com/cs
CSS Overview , Selectors, Syntax 1-26
s/css_tutorial.pdf
https://goalkicker.com/CSSBook/C
CSS Backgrounds and Boarders 22-38, 63-68
SSNotesForProfessionals.pdf
90

M03 CSS

Uploaded by

Document Information

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

M03 CSS

Uploaded by

Copyright:

Available Formats

Introduction to Web Technology

Module Name: CSS

To equip the students with fundamentals and characteristics of CSS.

The Objectives of this module is to:

At the end of this module, you are expected to:

• External style sheets are stored in CSS files.

Håkon Wium Lie

Introduction to CSS https://www.tutorialspoint.com/css/what_is_css.htm

Self Assessment Question

1. CSS stands for ____________.

a. Cascading Style Sheets

Answer: Cascading Style Sheets

Self Assessment Question

2. CSS is the language used for:

a. Defining the structure of the web page

b. Describing the presentation of the web page

c. Defining the content of the web page

d. All of the above

Answer: Describing the presentation of the web page

Self Assessment Question

3. CSS was accepted as a W3C standard in:

Self Assessment Question

4. XML was made a W3C recommendation in the year ________________.

• The selector points to the HTML element you want to style.

CSS Syntax https://www.w3schools.com/css/css_syntax.asp

CSS Syntax https://www.youtube.com/watch?v=QqmCs2UTS8s

Self Assessment Question

Self Assessment Question

6. The CSS rule set consists of

b. Selector and declaration

d. None of the above

Answer: Selector and declaration

Introduction to CSS Selectors https://www.w3schools.com/csSref/css_selectors.asp

Types of Selectors https://www.sitepoint.com/css-selectors/

Introduction to CSS Selectors https://www.youtube.com/watch?v=EeZKHmNJipE

Self Assessment Question

7. An element selector uses the ______________ to define the styling.

a. Name of the element

b. Declaration of the element

d. None of the above

Answer: Name of the element

Self Assessment Question

8. In a CSS rule, the id selector is written with a

d. None of the above

Self Assessment Question

Self Assessment Question

Embedding CSS to HTML

Including CSS in HTML

<p style="colour:grey“;”text-align:center” >

Embedded Style Sheets

External Style Sheets

Here is a sample for “filename.css“:

Embedding CSS to HTML https://www.youtube.com/watch?v=7AEFciYWquY

Self Assessment Question

11. Which is the correct CSS syntax?

Answer: body {colour: black}

Self Assessment Question

a. External style sheet

b. Internal style sheet

c. Inline style sheet

d. None of the above

Answer: Internal style sheet

Self Assessment Question

d. None of the above