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

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

12
CSS

Self Assessment Question

3. CSS was accepted as a W3C standard in:

a. 1996
b. 1994
c. 1995
d. 1992

Answer: 1996

13
CSS

Self Assessment Question

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

Self Assessment Question

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

Self Assessment Question

6. The CSS rule set consists of

a. Declaration

b. Selector and declaration

c. Selector

d. None of the above

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

Self Assessment Question

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

d. None of the above

Answer: Name of the element

28
CSS

Self Assessment Question

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

a. # character

b. $ character

c. & character

d. None of the above

Answer: # character

29
CSS

Self Assessment Question

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

Self Assessment Question

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

Self Assessment Question

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

Self Assessment Question

12. Including the style element in the head section is called _______ style.

a. External style sheet

b. Internal style sheet

c. Inline style sheet

d. None of the above

Answer: Internal style sheet

41
CSS

Self Assessment Question

13. Inline style uses ______________ attribute to define the style of an element.

a. Head

b. Background

c. Style

d. None of the above

Answer: Style

42
CSS

Self Assessment Question

14. To apply the same style across pages we should use:

a. Internal style sheet

b. External style sheet

c. Inline style sheet

d. None of the above

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

Self Assessment Question

15. An example of a generic family font is:

a. Sans Serif
b. Times
c. Calibri
d. None of the above

Answer: Sans Serif

57
CSS

Self Assessment Question

16. Font size ______________ is same as normal.

a. 200

b. 400

c. 800

d. 100

Answer: 400

58
CSS

Self Assessment Question

17. The font-style property is mostly used to specify which text style.

a. Normal
b. Oblique
c. Italic
d. None of the above

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

Self Assessment Question

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

Self Assessment Question

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

Self Assessment Question

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

Self Assessment Question

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

d. None of the above

Answer: The inner margin between the inner edge of the border and the outer edge of the
content box
80
CSS

Self Assessment Question

22. The outermost layer of the CSS box is:

a. The margin

b. The border

c. The Line

d. None of the above

Answer: The margin

81
CSS

Self Assessment Question

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