CHAPTER 3_ Getting Started with CSS Module

2
HTML & CSS BASICS
CHAPTER 3: GET STARTED WITH CSS
LOGO

3
Learning Objectives
At the end of this chapter you should be able:
1. Learn and compare the three ways of inserting a
style sheet in an HTML document using CSS
2. Learn basic CSS Syntax
3. Learn and practice styling HTML using basic CSS
selectors

4
Learning Objectives
At the end of this chapter you should be able:
4. Learn basic CSS box model components
5. Learn CSS position property
6. Learn and practice styling HTML using CSS basic
text formatting properties
7. Learn and compare the basic CSS display
properties

LESSON 1
CASCADING STYLE SHEETS

6
Including CSS in HTML Documents
When a browser reads a style sheet, it will format the HTML
document according to the information in the style sheet.
● Inline
● Internal
● External
Main Topic

7
Inline CSS
By using the style
attribute inside HTML
elements
SubTopic
HTML View

8
Inline CSS
By using the style
attribute inside HTML
elements
SubTopic
Web View

9
Internal CSS
By using a <style>
element in the <head>
section
SubTopic
HTML View

10
Internal CSS
By using a <style>
element in the <head>
section
SubTopic
Web View

11
External CSS
By using a <link>
element to link to an
external CSS file (.css)
SubTopic
HTML View

12
External CSS
By using a <link>
element to link to an
external CSS file(.css)
SubTopic
HTML View

14
CSS SYNTAX
Understanding CSS Syntax
A CSS stylesheet consists of a set of rules that are
interpreted by the web browser and then applied to the
corresponding elements such as paragraphs, headings, etc.
in the document.
● Selector
● Declaration
● Property
● Value
● Writing Comments in Css
Main Topic

15
CSS SYNTAX
CSS Rule
1. Selector
2. Declaration
3. Property
4. Value
SubTopic
1 2
3 4

16
CSS SYNTAX
Writing Comments
In Css
A CSS comment
begins with /*, and
ends with */
SubTopic
HTML View

18
CSS SELECTORS
What Is Selector?
A CSS selector is a pattern to match the elements on a web
page.
● CSS Element Selector
● CSS ID Selector
● CSS Class Selector
● CSS Universal Selector
● CSS Grouping Selector
Main Topic

19
CSS SELECTORS
CSS Element Selector
Selects HTML
elements based on the
element name.
SubTopic
HTML View

20
CSS SELECTORS
CSS Element Selector
Selects HTML
elements based on the
element name.
SubTopic
Web View

21
CSS SELECTORS
CSS ID Selector
Uses the id attribute of
an HTML element to
select a specific
element.
SubTopic
HTML View

22
CSS SELECTORS
CSS ID Selector
Uses the id attribute of
an HTML element to
select a specific
element.
SubTopic
Web View

23
CSS SELECTORS
CSS Class Selector
Selects HTML
elements with a
specific class attribute.
SubTopic
HTML View

24
CSS SELECTORS
CSS Class Selector
Selects HTML
elements with a
specific class attribute.
SubTopic
Web View

25
CSS SELECTORS
CSS Universal Selector
The universal selector
(*) selects all HTML
elements on the page
SubTopic
HTML View

26
CSS SELECTORS
CSS Universal Selector
The universal selector
(*) selects all HTML
elements on the page
SubTopic
Web View

27
CSS SELECTORS
CSS Grouping Selector
Selects all the HTML
elements with the
same style definitions.
SubTopic
HTML View

28
CSS SELECTORS
CSS Grouping Selector
Selects all the HTML
elements with the
same style definitions.
SubTopic
Web View

LESSON 4
CSS BOX MODEL, LAYOUT AND POSITION

30
CSS BOX MODEL,
LAYOUT AND POSITION
CSS Box Model
The box model allows us to add a border around elements,
and to define space between elements.
● Content
● Padding
● Border
● Margin
Main Topic

31
CSS Box Model
1. Content
2. Padding
3. Border
4. Margin
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
1 2
3 4

32
CSS BOX MODEL,
LAYOUT AND POSITION
CSS Borders
The CSS border properties allow you to specify the style,
width, and color of an element's border
● CSS Border Style
● CSS Border Width
● CSS Border Color
● CSS Rounded Borders
Main Topic

33
CSS Border Style
Specifies what kind of
border to display
● dotted
{border-style: dotted;}
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View

34
CSS Border Style
border to display
● dotted
{border-style: dotted;}
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

35
CSS Border Style
border to display
● solid
{border-style: solid;}
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View

36
CSS Border Style
border to display
● solid
{border-style: solid;}
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

37
CSS Border Width
Specifies the width of
the four borders
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View

38
CSS Border Width
Specifies the width of
the four borders
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

39
CSS Border Color
Used to set the color
of the four borders.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View

40
CSS Border Color
of the four borders.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

41
CSS Rounded Border
The border-radius
property is used to
add rounded borders
to an element.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

42
CSS BOX MODEL,
LAYOUT AND POSITION
CSS Margins
Margins are used to create space around elements, outside
of any defined borders.
● margin-top, margin-right, margin-bottom ,margin-left
● the auto value
● the inherit value
Main Topic

43
CSS Margins
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View
1
2
3
4

44
CSS Margins
1. margin-top
2. margin-right
3. margin-bottom
4. margin-left
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View 1
2
3
4

45
The auto value
Set the margin
property to auto to
horizontally center the
element within its
container.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View

46
The auto value
Set the margin
property to auto to
horizontally center the
element within its
container.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

47
The inherit value
Causes the element to
take the computed
value of the property
from its parent
element.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View

48
The inherit value
Causes the element to
take the computed
value of the property
from its parent
element.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

49
CSS BOX MODEL,
LAYOUT AND POSITION
CSS Padding
The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
● padding-top
● padding-right
● padding-bottom
● padding-left
Main Topic

50
CSS Padding
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
HTML View
1
2
3
4

51
CSS Padding
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View
1
2
3
4

52
CSS BOX MODEL,
LAYOUT AND POSITION
CSS Layout -The Position Property
The position property specifies the type of positioning
method used for an element.
● static
● relative
● fixed
● absolute
● sticky
Main Topic

53
Position: Static;
HTML elements are
positioned static by
default.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Html View

54
Position: Static;
HTML elements are
positioned static by
default.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

55
Position: Relative;
An element with
position: relative; is
positioned relative to
its normal position.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Html View

56
Position: Relative;
An element with
position: relative; is
positioned relative to
its normal position.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

57
Position: Fixed;
Positioned relative to
the viewport, which
means it always stays
in the same place
even if the page is
scrolled.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Html View

58
Position: Fixed;
the viewport, which
means it always stays
in the same place
even if the page is
scrolled.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

59
Position: Absolute;
the nearest positioned
ancestor.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Html View

60
Position: Absolute;
the nearest positioned
ancestor.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

61
Position: Sticky;
Positioned based on
the user's scroll
position.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Html View

62
Position: Sticky;
Positioned based on
the user's scroll
position.
CSS BOX MODEL,
LAYOUT AND POSITION
SubTopic
Web View

LESSON 5
CSS TEXT FORMATTING PROPERTIES

64
Formatting Text with CSS
These properties give you precise control over the visual
appearance of the characters, words, spaces, and so on
● CSS Text Color
● Text Color and Background Color
Main Topic

65
CSS Text Color
of the text
SubTopic
Html View

66
CSS Text Color
of the text
SubTopic
Web View

67
Text Color and
Background Color
Define both the
background-color
property and the color
property.
SubTopic
Html View

68
Text Color and
Background Color
Define both the
background-color
property and the color
property.
SubTopic
Web View

69
CSS Fonts, Style , Weight, Variant, Size
These properties give you precise control over the visual
appearance of the characters, words, spaces, and so on.
● The CSS Font Family Property
● CSS Web Safe Fonts
● CSS Font style
● CSS Font weight
● CSS Font variant
● CSS Font size
Main Topic

70
Generic Font Families
● Serif
● Sans-serif
● Monospace
● Cursive
● Fantasy
SubTopic

71
The CSS Font Family
Property
Use to specify the font
of a text
SubTopic
Html View

72
The CSS Font Family
Property
Use to specify the font
of a text
SubTopic
Web View

73
CSS Web safe fonts
Universally installed
across all browsers
and devices.
● Georgia (serif)
SubTopic
HTML View

74
CSS Web safe fonts
Universally installed
across all browsers
and devices.
● Georgia (serif)
SubTopic
Web View

75
CSS Font style
Mostly used to specify
italic text.
● italic
SubTopic
Web View

76
CSS Font style
Mostly used to specify
italic text.
● italic
SubTopic
Web View

77
CSS Font Weight
Specifies the weight of
a font.
SubTopic
Html View

78
CSS Font Weight
Specifies the weight of
a font.
SubTopic
Web View

79
CSS Font Variant
Specifies whether or
not a text should be
displayed in a small-
caps font.
SubTopic
Html View

80
CSS Font Variant
Specifies whether or
not a text should be
displayed in a small-
caps font.
SubTopic
Web View

81
CSS Font size
Sets the size of the
text.
If you use pixels, you
can still use the zoom
tool to resize the
entire page.
SubTopic
HTML View

82
CSS Font size
text.
To allow users to
resize the text (in the
browser menu), many
developers use em
instead of pixels.
pixels/16=em
SubTopic
HTML View

83
CSS Font size
text.
The text size can be
set with a vw unit,
which means the
"viewport width". The
text size will follow the
size of the browser
window.
SubTopic
HTML View

84
CSS Text Alignment
The text-align property is used to set the horizontal
alignment of a text.
● Text-align: center
● Text-align: left
● Text-align: right
● Text-align: justify
● Text-align: last
Main Topic

85
CSS Text Alignment
1. Text-align: center
2. Text-align: left
3. Text-align: right
SubTopic
HTML View
1
2
3

86
CSS Text Alignment
1. Text-align: center
2. Text-align: left
3. Text-align: right
SubTopic
Web View

87
Text-align: justify
Stretches the lines so
that each line has
equal width
SubTopic
HTML View

88
Text-align: justify
Stretches the lines so
that each line has
equal width
SubTopic
Web View

89
Text-align: last
Specifies how to align
the last line of a text.
SubTopic
HTML View

90
Text-align: last
Specifies how to align
the last line of a text.
SubTopic
Web View

LESSON 6
CSS DISPLAY PROPERTIES

92
CSS DISPLAY PROPERTIES
The Display Property
The display property specifies if/how an element is
displayed.
● Display Block
● Display Inline
● Display Inline-Block
Main Topic

93
Display Block
Takes as much as
horizontal space as
they can.
SubTopic
Web View

94
Display Inline
Takes the required
width only.
SubTopic
Web View

95
Display Inline-Block
Able to set the width
and height.
SubTopic
Web View

CHAPTER 3_ Getting Started with CSS Module

More Related Content

Similar to CHAPTER 3_ Getting Started with CSS Module (20)

Recently uploaded (20)

CHAPTER 3_ Getting Started with CSS Module