Cascading Style Sheet: Instructor: Quang Minh Nguyen Email: Minhnq@uit - Edu.vn

Cascading Style Sheet
Instructor: Quang Minh

Nguyen
Email: minhnq@uit.edu.vn
1
Content
Writing CSS code CSS Outline
Creating style Display and
sheet Visibility
Configuring Fonts Positioning
Configuring Text CSS Float and
Backgrounds Clear
CSS Box Model Pseudo-classes
CSS Border Reference
2
Content
Introduction
Display and
CSS Selectors
Visibility
Creating style sheet
Positioning
Configuring Fonts
CSS Float and
Configuring Text Clear
Backgrounds Pseudo-classes
CSS Box Model Reference
CSS Border
3
Introduction
Can be written in .html or .css file
Consists of a list of rule sets
A Rule set consists of:
A selector
Style properties and their values
Inline CSS
CSS added in HEAD section
4
Introduction - Inline CSS
Definition:
Style sheets are added inside HTML
element.
Syntax:
<div
style="property:value;">Content</
div>
5
Introduction -
CSS added in HEAD section - INTERNAL
Definition:
Style sheets are added in <style> tag.
Syntax:
<html>
<head>
<title>Title</title>
<style type="text/css">
selector {
property:value;
another_property:value;
}
</style>
</head>
<body> ... Page cotent ...
</body>
</html> 6
Introduction -
CSS added in HEAD section -
EXTERNAL
Html file
Css file
7
Content
Introduction
Display and
CSS Selectors
Visibility
Positioning
Configuring Fonts
CSS Float and
Configuring Text Clear
Backgrounds Pseudo-classes
CSS Box Model Reference
CSS Border
8
CSS Selectors
Universal selector
Type selector
class selector
ID selector
Attribute selector
9
Universal selector
Definition:
Is represented with an *
Is applied to all elements
Syntax:
* { font-family: Calibri, Arial, sans-serif; }
10
CSS Selectors
Universal selector
Type selector
class selector
ID selector
Attribute selector
11
Type selector
Definition:
Select an element by its type
Syntax:
h1 {
font-size: 18px;
}
p{
color: blue;
}
12
CSS Selectors
Universal selector
Type selector
class selector
ID selector
Attribute selector
13
class selector
Definition:
Matches elements with the specified class
name.
Used to apply same CSS rule on different tags.
class selector is preceded by a ..
Syntax:
<div class="clas1"> Content </div> (in body)
.clas1 {
color: green;
}
14
CSS Selectors
Universal selector
Type selector
class selector
ID selector
Attribute selector
15
ID selector
Definition:
Apply CSS rule to only one ID.
An ID selector can appear many times in
CSS file.
An ID selector can appear one time in
html tag.
Id selector is preceded by a #.
Syntax:
#id1{
font-size: 15px; 16
CSS Selectors
Universal selector
Type selector
class selector
ID selector
Attribute selector
17
Content
Writing CSS code Backgrounds
CSS Box Model
Inheritance
Grouping Selectors CSS Border
Defining CSS rules to child CSS Outline
selectors
The !important Declaration Display and Visibility
The execution order of the Positioning
CSS rules
Adding Comments within CSS Float and Clear
Style sheets Pseudo-classes
Configuring Fonts
Reference
Configuring Text
18
Inheritance
Define:
Is ability of inheritance rules from parent
element
Is used when child element was not
explicitly declared rules.
Example:
19
Inheritance
Figure 1: Example of inheritance

20
Content
CSS Box Model
Inheritance
selectors
CSS rules
Configuring Fonts
Reference
Configuring Text
21
Grouping Selectors
Definition:
Is used to apply same CSS rules to many
selectors
Different selectors are separated by ,
Syntax:
selector1, selector2, ... {
property:value;
property:value;
...
}
22
Grouping Selectors
Example:
Figure 2: Example of grouping selectors

23
Content
CSS Box Model
Inheritance
selectors
CSS rules
Configuring Fonts
Reference
Configuring Text
24
Defining CSS rules to child
selectors
Usage:
Is used to apply new CSS rules for child.
Syntax:
parent child {
property:value;
property:value;
...
}
25
Defining CSS rules to child
selectors
Example:
Figure 3: Define CSS rules for child

26
Content
CSS Box Model
Inheritance
selectors
CSS rules
Configuring Fonts
Reference
Configuring Text
27
The !important Declaration
Usage:
To make certain CSS rules more
important than others
!important declaration will override
another rules
Syntax:
selector {
property:value !important;
}
28
The !important Declaration
Example:
Figure 4: Example of !important declaration
29
Content
CSS Box Model
Inheritance
selectors
CSS rules
Configuring Fonts
Reference
Configuring Text
30
The execution order of the CSS rules
Inline > internal > external

!importance declaration has top
priority
More detail has higher priority
Later has higher priority
31
Content
CSS Box Model
Inheritance
selectors
CSS rules
Configuring Fonts
Reference
Configuring Text
32
Adding Comments within
Stylesheets
Usage:
To organize and keep track of CSS rules
Beginning with /*
Ending with */
Syntax:
/* this is a comment */
selector {
property:value;
property:value;
...
}
33
Content
Creating style sheet CSS Box Model
Configuring Fonts
CSS Border
font-family
font Embedding CSS Outline
font-size Display and Visibility
font-weight
Positioning
font-variant
font-style CSS Float and Clear
Multiple values for font Pseudo-classes
property
Reference
Configuring Text
34
font-family
Accepts a comma-separated list
Enclose font that contains spaces with xy
z
Insert generic font at the end of list
Five generic font-family values:
serif
sans-serif
cursive
monospace
fantasy
35
font-family
Example:
h2 {
font-family: Verdana, Arial, Helvetica, sans-
serif;
}
p{
font-family: "Comic Sans", Whimsy, Critter,
fantasy;
}
36
Content
Configuring Fonts
CSS Border
font-family
font-weight
Positioning
font-variant
property
Reference
Configuring Text
37
Font Embedding
Used to include a font other than
general
Embed new font with @font-face
To use this CSS rule, set two
properties:
font-family
src
38
Font Embedding
Example:
@font-face {
font-family: 'Sansation_Light';
src: url('Sansation_Light.ttf');
}
/* Once the new font is included, you can use it */
h1 {
font-family: 'Sansation_Light', sans-serif;
}
39
Content
Configuring Fonts
CSS Border
font-family
font-weight
Positioning
font-variant
property
Reference
Configuring Text
40
font-size
Controls size of text
Can be defined in:
Fixed size
Relative size
Units and values:
Length units
Relative units
Fixed-size
Percentage
Syntax:
selector { font-size: value; }
41
font-size
Example:
Figure 5: Example of font-size

42
Content
Configuring Fonts
CSS Border
font-family
font-weight
Positioning
font-variant
property
Reference
Configuring Text
43
font-weight
Controls thickness of font
Can take on different values:
normal, bold
bolder, lighter
100 to 900
Syntax:
selector { font-weight: value; }
44
font-weight
Example:
Figure 6: Example of font-weight

45
Content
Configuring Fonts
CSS Border
font-family
font-weight
Positioning
font-variant
property
Reference
Configuring Text
46
font-variant
Display text in small-caps font
Values:
normal
small-caps
Syntax:
selector {
font-variant: value;
}
47
font-variant
Example:
Figure 7: Example of font-variant
48
Content
Configuring Fonts
CSS Border
font-family
font-weight
Positioning
font-variant
property
Reference
Configuring Text
49
font-style
Sets the style of font.
Values:
normal
italic
oblique
Syntax:
selector {
font-style: value;
}
50
font-style
Example:
Figure 8: Example of font-style
51
Content
Configuring Fonts
CSS Border
font-family
font-weight
Positioning
font-variant
property
Reference
Configuring Text
52
Multiple values for font
property
Set many font properties in one
definition
Use font property
Syntax:
selector {
font: font-style_val
font-variant_val
font-weight_val
font-size_val
font-family_val;
}
53
Multiple values for font
property
Example:
Figure 9: Using font style
54
Content
CSS Box Model
Configuring Fonts
Configuring Text CSS Border
letter-spacing CSS Outline
word-spacing
line-height Display and Visibility
text-transform Positioning
text-align
vertical-align CSS Float and Clear
text-indent
Pseudo-classes
text-decoration
white-space Reference
word-wrap
text-shadow
55
letter-spacing
Controls space of characters in a
word
Values:
normal, 0
length_value
Syntax:
selector {
letter-spacing: value;
}
56
letter-spacing
Example:
Figure 10: Example of letter-spacing
57
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
58
word-spacing
Controls space between words
Values:
normal, 0
length_value
Syntax:
selector {
word-spacing: value;
}
59
word-spacing
Example:
Figure 11: Example of word-spacing
60
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
61
line-height
Sets distance between lines
Values:
normal
a_number
length
percentage
Syntax:
selector { line-height: value; }
62
line-height
Example:
Figure 12: Example of line-height

63
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
64
text-transform
Controls the capitalization of text
Values:
capitalize
uppercase
lowercase
none
Syntax:
selector { text-transform: value; }
65
text-transform
Example:
Figure 13: Example of text-transform
66
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
67
text-align
Defines the horizontal alignment of
text
Values:
left
right
center
justify
Syntax:
selector { text-align: value; }
68
text-align
Example:
Figure 14: Example of text-align
69
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
70
vertical-align
Sets alignment of text in relation to line box
Values:
baseline sub
super top
text-top middle
bottom text-bottom
a_length percentage
Syntax:
selector { vertical-align: value; }
71
vertical-align
Example:
Figure 15: Example of vertical-align
72
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
73
text-indent
Defines an indentation for first line of
block
Values:
length
percentage
Syntax:
selector {
text-indent: value;
}
74
text-indent
Example:
Figure 16: Example of text-indent
75
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
76
text-decoration
Sets underlines, strikethrough, etc.
Values:
underline
overline
line-through
blink
Syntax:
selector { text-decoration: value; }
77
text-decoration
Example:
Figure 17: Example of text-decoration
78
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
79
white-space
Sets how white-space is handled
Values:
normal
pre
nowrap
pre-line
pre-wrap
Syntax:
selector { white-space: value; }
80
white-space
Example:
Figure 18: Example of white-space
81
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
82
word-wrap
Break lines in the middle of words
Values:
break-word
normal
Syntax:
selector {
word-wrap: value;
}
83
word-wrap
Example:
Figure 19: Example of word-wrap

84
Content
CSS Box Model
Configuring Fonts
word-spacing
text-align
text-indent
Pseudo-classes
text-decoration
word-wrap
text-shadow
85
text-shadow
Sets shadow effects to text
Values:
h-shadow
v-shadow
blur
color
Syntax:
selector {
text-shadow: h-shadow v-shadow blur color;
}
86
text-shadow
Example:
Figure 20: Example of text-shadow
87
Content
Writing CSS code CSS Box Model
Creating style sheet CSS Border
Configuring Fonts CSS Outline
Configuring Text
Display and
Backgrounds
background-color
Visibility
background-image Positioning
background-repeat CSS Float and Clear
background-attachment

Pseudo-classes
background-position
Multiple values for Reference
background property
88
background-color
Is applied throughout content area of
element
Is drawn behind background-image
Values:
color
transparent
Syntax:
selector {
background-color: value;
}
89
background-color
Example:
Figure 21: Example of background-color
90
Content
Configuring Text
Display and
Backgrounds
background-color
Visibility

Pseudo-classes
background-position
background property
91
background-image
Specify background-image for an
element
Values:
url(URL)
none
Syntax:
selector {
background-image:url('URL');
}
92
background-image
Example:
Figure 22: Example of background-image
93
Content
Configuring Text
Display and
Backgrounds
background-color
Visibility

Pseudo-classes
background-position
background property
94
background-repeat
Sets how background-image will be
repeated
Values:
repeat
repeat-x
repeat-y
no-repeat
Syntax:
selector { background-repeat: value; }
95
background-repeat
Example:
Figure 23: Example of background-repeat
96
Content
Configuring Text
Display and
Backgrounds
background-color
Visibility

Pseudo-classes
background-position
background property
97
Defines how background position is
determined
Values:
scroll
fixed
Syntax:
selector {
background-attachment: value;
}
98
Example:
Figure 24: Example of background-attachment
99
Content
Configuring Text
Display and
Backgrounds
background-color
Visibility

Pseudo-classes
background-position
background property
100
background-position
Specifies the position of background
image
Values:
x% y%
xpos ypos
specifies
Syntax:
selector { background-position: value; }
101
background-position
Example:
Figure 25: Example of background-position
102
Content
Configuring Text
Display and
Backgrounds
background-color
Visibility

Pseudo-classes
background-position
background property
103
Multiple values for background
property
Add many background properties in one
definition
Syntax:
selector {
background: bg_color
bg_image
bg_repet
bg_attach
bg_position;
}
104
Multiple values for background
property
Example:
Figure 26: Multiple values for background

property
105
Content
Writing CSS code CSS Border
Creating style sheet CSS Outline
Configuring Fonts
Configuring Text
Display and
Backgrounds Visibility
CSS Box Model Positioning
Define CSS Float and
width and height
margin
Clear
padding Pseudo-classes
overflow

Reference
Min and Max dimensions
Example
106
Define
Is a box that wraps around HTML
elements
Figure 27: CSS Box Model

107
Content
Configuring Fonts
Configuring Text
Display and
width and height
margin
Clear
overflow

Reference
Example
108
width and height
Defines width and
height of the content
area of an element
Values:
auto
length
percentage
Syntax:
selector { width:
value; height: value; }
109
width and height
Example:
Figure 28: Example of width and height
110
Content
Configuring Fonts
Configuring Text
Display and
width and height
margin
Clear
overflow

Reference
Example
111
margin
Set four margins
surrounding an element
Values:
auto
length
percentage
Syntax:
selector {margin:
top_val
right_val
bottom_val
left_val;
}
112
margin
Example:
Figure 29: Example of margin
113
margin
Example:
Code
Result
114
Content
Configuring Fonts
Configuring Text
Display and
width and height
margin
Clear
overflow

Reference
Example
115
padding
Sets space between
element border and
content area
Values:
length
percentage
Syntax:
selector { padding:
top_val
right_val
bottom_val
left_val;
}
116
padding
Example:
Figure 30: Example of padding
117
padding
Example:
Code
Result
118
Content
Configuring Fonts
Configuring Text
Display and
width and height
margin
Clear
overflow

Reference
Example
119
overflow
Defines action if
content in box is
too big
Values:
auto
visible
hidden
scroll
Syntax:
selector { overflow:
value; }
120
overflow
Example:
Figure 31: Example of overflow

121
Content
Configuring Fonts
Configuring Text
Display and
width and height
margin
Clear
overflow

Reference
Example
122
Min and max dimensions
Places restrictions on elements size
Value:
length
percentage
Example:
div {
min-height: 100px; max-height: 400px;
min-width: 100px; max-width: 500px;
}
123
Content
Configuring Fonts
Configuring Text
Display and
width and height
margin
Clear
overflow

Reference
Example
124
Example
125
Content
sheet Visibility
Backgrounds Clear
126
CSS Border
For student!
127
Content
sheet Visibility
Backgrounds Clear
128
CSS outline
For student!
129
Content
Creating style Display and Visibility
sheet display
visibility
Configuring Fonts
Define the visible
Configuring Text portion of an element
Backgrounds Positioning
CSS Box Model CSS Float and Clear
CSS Border Pseudo-classes
Reference
130
display
Specifies how HTML element is displayed
Values:
inline
block
inline-block
list-item
none
Syntax:
display: value;
131
display
Example:
Figure 37: Example of using display

132
Content
sheet display
visibility
Configuring Fonts
Define the visible
Reference
133
visibility
Controls if an element is visible or
not
Values:
visible
hidden
Syntax:
visibility: value;
134
visibility
Example:
Figure 38: Example of using visibility
135
Content
sheet display
visibility
Configuring Fonts
Define the visible
Reference
136
Define the visible portion of an
element
Use visible surface
Values:
rect(top, right, bottom, left)
auto
Syntax:
clip: value;
137
Define the visible portion of an
element
Example:
Figure 39: Visible portion of an element
138
Content
Positioning
sheet
static
Configuring Fonts relative
Configuring Text absolute
fixed
Backgrounds
z-index
Reference
139
static
Default value
Not uniquely positioned
Are not affected by:
top
bottom
left
right
Syntax:
selector { position: static; }
140
Content
Positioning
sheet
static
fixed
Backgrounds
z-index
Reference
141
relative
Figure 40: Relative positioning
142
relative
Example:
Code
Result
143
Content
Positioning
sheet
static
fixed
Backgrounds
z-index
Reference
144
absolute
Anabsoluteposition element
Is positioned relative to the first parent
element that has a position other than
static, or <html> if no such element
exists, and its display is not affected by
other elements.
Absolute positioning takes the element
out of the normal document flow, and
can overlap other elements.
Syntax:
selector { position: absolute; } 145
absolute
Figure 41: Absolute positioning
146
absolute
Example:
Code
Result
147
Content
Positioning
sheet
static
fixed
Backgrounds
z-index
Reference
148
fixed
Based on the viewport window
Can overlap other element
Not move even if the window is
scrolled
Syntax:
selector { position: fixed; }
Example:
#p_fix {
position: fixed; top: 20px; left: 40%;
}
149
fixed
Example:
Code
Result
150
Content
Positioning
sheet
static
fixed
Backgrounds
z-index
Reference
151
z-index
Figure 42: Using z-index positioning
152
Content
sheet Visibility
Backgrounds Clear
153
CSS Float and Clear
For students!
154
Content
sheet Visibility
Backgrounds Clear
155
Pseudo-classes
For students!
156
Content
sheet Visibility
Backgrounds Clear
157
Reference
http://coursesweb.net/
http://www.w3schools.com/
158

Cascading Style Sheet: Instructor: Quang Minh Nguyen Email: Minhnq@uit - Edu.vn

Uploaded by

Document Information

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

Cascading Style Sheet: Instructor: Quang Minh Nguyen Email: Minhnq@uit - Edu.vn

Uploaded by

Copyright:

Available Formats

Cascading Style Sheet

Instructor: Quang Minh

Figure 1: Example of inheritance

Figure 2: Example of grouping selectors

Figure 3: Define CSS rules for child

Figure 4: Example of !important declaration

Inline > internal > external

Figure 5: Example of font-size

Figure 6: Example of font-weight

Figure 7: Example of font-variant

Figure 8: Example of font-style

Figure 9: Using font style

Figure 10: Example of letter-spacing

Figure 11: Example of word-spacing

Figure 12: Example of line-height

Figure 13: Example of text-transform

Figure 14: Example of text-align

Figure 15: Example of vertical-align

Figure 16: Example of text-indent

Figure 17: Example of text-decoration

Figure 18: Example of white-space

Figure 19: Example of word-wrap

Figure 20: Example of text-shadow

Figure 21: Example of background-color

Figure 22: Example of background-image

Figure 23: Example of background-repeat

Figure 24: Example of background-attachment

Figure 25: Example of background-position

Figure 26: Multiple values for background

Figure 27: CSS Box Model

Figure 28: Example of width and height

Figure 29: Example of margin

Figure 30: Example of padding

Figure 31: Example of overflow

Figure 37: Example of using display

Figure 38: Example of using visibility

Figure 39: Visible portion of an element

Figure 40: Relative positioning

Figure 41: Absolute positioning

Figure 42: Using z-index positioning

You might also like