WEB SYSTEMS &
TECHNOLOGIES
2. Cascading Style Sheets (CSS)
HTML/CSS
09/01/2026 HTML&CSS
2
HTML/CSS
Questions?
09/01/2026 HTML&CSS
3
HTML&CSS
Content Presentation
(HTML document) (CSS Document)
• Separate content from presentation!
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Suspendisse
at pede ut purus malesuada dictum.
Donec vitae neque non magna aliquam Bold
dictum. Italics
• Vestibulum et odio et ipsum Indent
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam nec,
interdum vel, mi. Sed nec quam nec odio
lacinia molestie. Praesent augue tortor,
convallis eget, euismod nonummy,
lacinia ut, risus.
09/01/2026 4
HTML&CSS
Contents
• What is CSS?
• Styling with Cascading Stylesheets (CSS)
• Selectors and style definitions
• Linking HTML and CSS
• Fonts, Backgrounds, Borders
• The Box Model
• Alignment, Z-Index, Margin, Padding
• Positioning and Floating Elements
• Visibility, Display, Overflow
09/01/2026 5
CSS Intro
Styling with Cascading Stylesheets
HTML&CSS
CSS Introduction
• Cascading Style Sheets (CSS)
✓Used to describe the presentation of documents
✓Define sizes, spacing, fonts, colors, layout, etc.
✓Improve content accessibility
✓Improve flexibility
• Designed to separate presentation from content
• Due to CSS, all HTML presentation tags and attributes are
deprecated, e.g. font, center, etc.
09/01/2026 7
HTML&CSS
CSS Introduction (2)
• CSS can be applied to any XML document
✓Not just to HTML / XHTML
• CSS can specify different styles for different
media
✓On-screen
✓In print
✓Handheld, projector
09/01/2026 8
HTML&CSS
Why “Cascading”? (3)
• Some CSS styles are inherited and some not
✓Text-related and list-related properties are
inherited - color, font-size, font-family,
line-height, text-align, list-style, etc
✓Box-related and positioning styles are not
inherited - width, height, border, margin,
padding, position, float, etc
✓<a> elements do not inherit color and text-
decoration
09/01/2026 9
HTML&CSS
Style Sheets Syntax
• Stylesheets consist of rules, selectors, declarations, properties
and values
• Selectors are separated by commas
• Declarations are separated by semicolons
• Properties and values are separated by colons
h1,h2,h3 { color: green; font-weight: bold; }
09/01/2026 10
HTML&CSS
Linking HTML and CSS
• HTML (content) and CSS (presentation) can be linked in three
ways:
✓Inline: the CSS rules in the style attribute
• No selectors are needed
✓Internal: in the <head> in a <style> tag [.html]
✓External: CSS rules in separate file (best)
• Usually a file with .css extension
• Linked via <link rel="stylesheet" href=…> tag or
@import directive in embedded CSS block
09/01/2026 11
HTML&CSS
Inline style
• An inline style may be used to apply a unique style
for a single element.
• The style attribute can contain any CSS property.
...
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
...
09/01/2026 12
HTML&CSS
Internal Styles
• Internal style in the HTML in the <style> tag:
<style type="text/css">
✓The <style> tag is placed in the <head> section of
the document
✓type attribute specifies the MIME type
• MIME describes the format of the content
• Other MIME types include text/html,
image/gif, text/javascript …
• Used for document-specific styles
09/01/2026 13
HTML&CSS
External CSS Styles
• External linking
✓Separate pages can all use a shared style sheet
✓Only modify a single file to change the styles across
your entire Website link tag (with a rel attribute)
✓Specifies a relationship between current document
and another document link elements should be in
the <head>
<link rel="stylesheet" type="text/css”
href="[Link]">
09/01/2026 14
HTML&CSS
External CSS Styles (2)
✓@import
• Another way to link external CSS files
• Ancient browsers do not recognize @import
• Use @import in an external CSS file to workaround
the IE 32 CSS file limit
<style type="text/css">
@import url("[Link]");
/* same as */
@import "[Link]";
</style>
09/01/2026 15
HTML&CSS
External Styles: Example
/* CSS Document */
a { text-decoration: none } [Link]
a:hover { text-decoration: underline;
color: red;
background-color: #CCFFCC }
li em { color: red;
font-weight: bold }
ul { margin-left: 2cm }
ul li { text-decoration: underline;
margin-left: .5cm }
09/01/2026 16
HTML/CSS
Relationship selectors
09/01/2026 HTML&CSS
17
HTML&CSS
Selectors
• Selectors determine which element the rule applies to:
✓All elements of specific type (tag)
✓Those that mach a specific attribute (id, class)
✓Elements may be matched depending on how they are
nested in the document tree (HTML)
• Examples:
.header a { color: green }
#menu>li { padding-top: 8px }
09/01/2026 18
HTML&CSS
• Three primary kinds of selectors:
✓By tag (type selector):
h1 { font-family: verdana,sans-serif; }
✓By element id: (javaScript)
#element_id { color: #ff0000; }
✓By element class name (only for HTML): ****
.myClass {border: 1px solid red}
• Selectors can be combined with commas:
h1, .link, #top-link {font-weight: bold}
This will match <h1> tags, elements with class link,
and element with id top-link
09/01/2026 19
HTML&CSS
• Pseudo-classes define state
✓:hover, :visited, :active , :lang(value);
• Pseudo-elements define element "parts" or are used to generate
content
✓:first-line , :before, :after
a:hover { color: red; }
p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }
09/01/2026 20
HTML&CSS
• Match relative to element placement:
p a {text-decoration: underline}
This will match all <a> tags that are inside of <p>
• * – universal selector (avoid or use with care!):
p * {color: black}
This will match all descendants of <p> element
• + selector – used to match “next sibling”:
img + .link {float:right}
This will match all siblings with class name link that appear
immediately after <img> tag
09/01/2026 21
HTML&CSS
• > selector – matches direct child nodes:
p > .error {font-size: 8px}
This will match all elements with class error, direct children
of <p> tag
• [ ] – matches tag attributes by regular expression:
img[alt~=logo] {border: none}
This will match all <img> tags with alt attribute containing the
word logo
• .class1.class2 (no space) - matches elements with both (all)
classes applied at the same time
09/01/2026 22
HTML&CSS
Values in the CSS Rules
• Colors are set in RGB format (decimal or hex):
✓Example: #a0a6aa = rgb(160, 166, 170)
✓Predefined color aliases exist: black, blue, etc.
• Numeric values are specified in:
✓Pixels, ems, e.g. 12px , 1.4em
✓Points, inches, centimeters, millimeters
• E.g. 10pt , 1in, 1cm, 1mm
✓Percentages, e.g. 50%
• Percentage of what?...
✓Zero can be used with no unit: border: 0;
09/01/2026 23
HTML&CSS
Default Browser Styles
• Browsers have default CSS styles
✓Used when there is no CSS information or any other style
information in the document
• Caution: default styles differ in browsers
✓E.g. margins, paddings and font sizes differ most often
and usually developers reset them
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
09/01/2026 24
HTML&CSS
CSS Cascade (Precedence)
• There are browsers, user and author stylesheets with
"normal" and "important" declarations
✓Browser styles (least priority)
✓Normal user styles
✓Normal author styles (external, in head, inline)
✓Important author styles
✓Important user styles (max priority)
a { color: red !important ; }
09/01/2026 25
HTML&CSS
CSS Text
ocolor – specifies: the color of the text
otext-align: property set the horizontal
alignment of a text {left, right, center, or justified}
overtical-align: {top, bottom, middle}
oline-height: {size px %}
oLetter-spacing: the space betwwen characters
Ex: DHCN → D H C N
09/01/2026 26
HTML&CSS
CSS Font
ofont-size – size of font: xx-small, x-small,
small, medium, large, x-large, xx-large,
smaller, larger or numeric value
ofont-family – comma separated font names
✓Example: verdana, sans-serif, etc.
✓The browser loads the first one that is available
✓There should always be at least one generic font
09/01/2026 27
HTML&CSS
CSS Font
o font-weight can be normal, bold, bolder, lighter or
a number in range [100 … 900]
ofont-style – styles the font
✓Values: normal, italic, oblique
otext-decoration – decorates the text
✓Values: none, underline, line-through, overline,
blink
oline-height: defines the height of line
09/01/2026 28
HTML&CSS
CSS Background
obackground-image:url(‘image file’)
✓URL of image to be used as background, e.g.:
background-image:url("[Link]");
obackground-color: {color value}
✓Using color and image and the same time
obackground-repeat:{repeat-x, repeat-y, repeat,
no-repeat}
obackground-attachment: {fixed / scroll}
obackground-size: {size of image to set up
back ground - %, px}
09/01/2026 29
HTML&CSS
CSS Background
obackground-position: {top, center, bottom,
left, center, right, %, px}
specifies vertical and horizontal position of the background
image
✓Examples:
background-position: top left;
background-position: -5px 50%;
09/01/2026 30
HTML&CSS
CSS Background Shorthand
• background: shorthand rule for setting background
properties at the same time:
background: #FFF0C0 url("[Link]") no-repeat
fixed top;
is equal to writing:
background-color: #FFF0C0;
background-image: url("[Link]");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
09/01/2026 31
HTML&CSS
Background-image or <img>?
• Background images allow you to save many image
tags from the HTML
✓Leads to less code
✓More content-oriented approach
• All images that are not part of the page content (and
are used only for "beautification") should be moved
to the CSS
09/01/2026 32
HTML&CSS
09/01/2026 33
HTML&CSS
CSS Border
oborder-width: thin, medium, thick or numerical
value (e.g. 10px)
oborder-color: color alias or RGB value
oborder-style: none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, outset
•Each property can be defined separately for left, top,
bottom and right
✓border-top-style, border-left-color, …
oBorder-radius: rounded the corner
09/01/2026 34
HTML&CSS
CSS Border Shorthand
• border: shorthand rule for setting border properties at
once:
border: 1px solid red
is equal to writing:
border-width:1px;
border-style:solid;
border-color:red;
• Specify different borders for the sides via shorthand
rules: border-top, border-left, border-right,
border-bottom
• When to avoid border:0
09/01/2026 35
HTML&CSS
CSS Width and Height
owidth – defines numerical value for the width of
element, e.g. 200px
oheight – defines numerical value for the height
of element, e.g. 100px
✓By default the height of an element is defined
by its content
✓Inline elements do not apply height, unless you
change their display style.
oMax-width: (not change when resize the screen
size )
09/01/2026 36
HTML/CSS
09/01/2026 HTML&CSS
37
HTML&CSS
CSS Margin and Padding
09/01/2026 38
HTML&CSS
CSS Margin and Padding
• margin and padding define the spacing around
the element
✓Numerical value, e.g. 10px or -5px
✓Can be defined for each of the four sides
separately - margin-top, padding-left, …
✓margin is the spacing outside of the border
✓padding is the spacing between the border
and the content
✓What are collapsing margins?
09/01/2026 39
HTML&CSS
Margin and Padding: Short Rules
• margin: 5px;
✓Sets all four sides to have margin of 5 px;
• margin: 10px 20px;
✓top and bottom to 10px, left and right to 20px;
• margin: 5px 3px 8px;
✓top 5px, left/right 3px, bottom 8px
• margin: 1px 3px 5px 7px;
✓top, right, bottom, left (clock wise from top)
• Same for padding
09/01/2026 40
HTML&CSS
The Box Model
09/01/2026 41
HTML&CSS
▪position:[absolute,relative];
▪top: [value];
▪left: [value];
▪bottom: [value];
▪right: [value];
09/01/2026 42
HTML&CSS
CSS Position
• position: defines the positioning of the element in the
page content flow
• The value is one of:
✓static (default)
✓relative – relative position according to where the
element would appear with static position
✓absolute – position according to the innermost
positioned parent element
✓fixed – same as absolute, but ignores page
scrolling
09/01/2026 43
HTML&CSS
CSS Position
• Margin VS relative positioning
• Fixed and absolutely positioned elements do not
influence the page normal flow and usually stay on top of
other elements
✓Their position and size is ignored when calculating the
size of parent element or position of surrounding
elements
✓Overlaid according to their z-index
✓Inline fixed or absolutely positioned elements can
apply height like block-level elements
09/01/2026 44
HTML&CSS
CSS Position
• top, left, bottom, right: specifies offset of
absolute/fixed/relative positioned element as numerical values
• z-index : specifies the stack level of positioned elements
✓Understanding stacking context
09/01/2026 45
HTML&CSS
CSS position
09/01/2026 46
HTML&CSS
CSS Position
▪The “z-index” property specifies the stack order of
an element.
▪An element with greater stack order is always in
front of an element with a lower stack order.
▪Note: z-index only works on positioned elements
(position: absolute/ fixed).
09/01/2026 47
HTML&CSS
09/01/2026 48
HTML&CSS
CSS Float
• float: the element “floats” to one side
✓left: places the element on the left and
following content on the right
✓right: places the element on the right and
following content on the left
✓floated elements should come before the content
that will wrap around them in the code
✓margins of floated elements do not collapse
✓floated inline elements can apply height
09/01/2026 49
HTML&CSS
CSS Float
Floating: normal • Floating: right
09/01/2026 50
HTML&CSS
CSS Float
• Floating: normal Floating: left (3
(3 elements) elements)
09/01/2026 51
HTML/CSS
Questions?
09/01/2026 HTML&CSS
52
HTML&CSS
CSS Clear
• clear
✓Sets the sides of the element where other floating
elements are NOT allowed
✓Used to "drop" elements below floated ones or
expand a container, which contains only floated
children
✓Possible values: left, right, both
• Clearing floats
✓additional element (<div>) with a clear style
09/01/2026 53
HTML&CSS
CSS Clear
• Clearing floats (continued)
✓:after { content: ""; display:
block; clear: both; height: 0; }
✓Triggering hasLayout in IE expands a container
of floated elements
• display: inline-block;
• zoom: 1;
09/01/2026 54
HTML&CSS
CSS Opacity
• opacity: specifies the opacity of the
element
✓Floating point number from 0 to 1
✓For old Mozilla browsers use –
moz-opacity
✓For IE use
filter:alpha(opacity=value
) where value is from 0 to 100;
also, "binary and script behaviors"
must be enabled and hasLayout
must be triggered, e.g. with
zoom:1
09/01/2026 55
HTML&CSS
CSS Visibility
• visibility
✓Determines whether the element is visible
✓hidden: element is not rendered, but still
occupies place on the page (similar to
opacity:0)
✓visible: element is rendered normally
09/01/2026 56
HTML/CSS
Visibility
Questions?
09/01/2026 HTML&CSS
57
HTML&CSS
CSS Display
• display: controls the display of the element and the
way it is rendered and if breaks should be placed
before and after the element
✓None:
✓inline: no breaks are placed before and after
(<span> is an inline element): ngang
✓Inline – block: inline in the frame : ngang có khung
✓block: breaks are placed before AND after the
element (<div> is a block element): dọc
09/01/2026 58
HTML&CSS
CSS Display
• display: controls the display of the element and the
way it is rendered and if breaks should be placed
before and after the element
✓none: element is hidden and its dimensions are not
used to calculate the surrounding elements rendering
(differs from visibility: hidden!)
✓There are some more possible values, but not all
browsers support them
• Specific displays like table-cell and table-
row
09/01/2026 59
HTML&CSS
CSS Display
09/01/2026 60
HTML&CSS
Overflow
ooverflow: defines the behavior of element when
content needs more space than you have specified by
the size properties or for other reasons. Values:
✓visible (default) – content spills out of the
element
✓auto - show scrollbars if needed
✓scroll – always show scrollbars
✓hidden – any content that cannot fit is clipped
09/01/2026 61
HTML&CSS
Pseudo Classes
▪ A pseudo-class is used to define a special state of an
element.
▪ Style an element when a user mouses over it
▪ Style visited and unvisited links differently
▪ Style an element when it gets focus
09/01/2026 62
HTML&CSS
• :visited
• :hover
• :link
• :active
• :first-letter
• :first-line
09/01/2026 63
HTML/CSS
Pseudo Classes
Questions?
09/01/2026 HTML&CSS
64
HTML&CSS
CSS Table
• Table border:
09/01/2026 65
HTML&CSS
CSS Table
• Table alignment:
09/01/2026 66
HTML&CSS
CSS Table
• Table style
09/01/2026 67
HTML&CSS
CSS Table
09/01/2026 68
HTML&CSS
List Properties
• List-style-type: {none, circle, square, disc}
• List-style-image: url (images/[Link])}
• List-style-position: [inside/outside]
09/01/2026 69
HTML&CSS
List Properties
09/01/2026 70
HTML&CSS
List Properties
09/01/2026 71
HTML&CSS
CSS form
Selector:
• Input: Apply for all items
• Input [type=text]: apply for textbox
• Input [type=text]:focus
• Input[type=number] : apply for number
• Select{ }: apply for listbox
09/01/2026 72
HTML&CSS
Example
• Padding:
• Border:
09/01/2026 73
HTML&CSS
Example
• Background :
• Color:
09/01/2026 74
HTML&CSS
CSS3 Background
• Background:
✓background-size
✓background-origin
✓Background-image
09/01/2026 76
HTML&CSS
CSS3 - Border
• Border
• border-radius:
• box-shadow:
• border-image:
div
{
box-shadow: 10px 10px 5px
#888888;
}
09/01/2026 77
HTML&CSS
CSS3- Gradient
✓Linear Gradients (goes down/up/left/right/diagonally)
✓Radial Gradients (defined by their center)
09/01/2026 78
HTML&CSS
CSS Gradient
09/01/2026 79
HTML&CSS
CSS Transform
09/01/2026 80
HTML&CSS
CSS3- Transition
• Transition:
✓transition:
✓transition-delay
✓transition-duration
✓transition-property
✓transition-timing-function
09/01/2026 81
HTML&CSS
CSS Transition
09/01/2026 82
HTML&CSS
Text shadow / Box shadow
09/01/2026 83
HTML&CSS
Multicolumn
• Multiple Columns:
– column-count
– column-gap
– column-rule
09/01/2026 84
HTML&CSS
Multicolumn
09/01/2026 85
HTML&CSS
CSS Layout
<header>
<nav>
<aside>
<section>
<article>
<footer>
09/01/2026 86
HTML&CSS
Layout – HTML5
❑<header>: Logo or image of the website
❑<section>: Main content
❑<article>: content details
❑<aside>: ads-headline
❑<footer>: information{address, emails,
…}
❑<nav>: links - navigations
09/01/2026 87
HTML&CSS
CSS Layout – Flex box
• Parent Element (Container): display: flex;
The flex container properties are:
•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-content
09/01/2026 88
HTML&CSS
09/01/2026 89
HTML&CSS
• CSS align
• CSS gallery
• CSS Animation
09/01/2026 90
HTML&CSS
• Sitemap: Cấu trúc của Website
Liên hệ
Đăng ký
Trang
chủ Chi tiết Mua Thanh
Sản phẩm
SP hang Toán
Đăng nhập
09/01/2026 91
HTML/CSS
Questions?
09/01/2026 92