Cascading Style Sheets (CSS)
Content
Basic CSS
Advanced CSS
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
2
Basic CSS
3
Motivation
[Link]
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
4
Content vs. Presentation
• Most HTML tags define content
type, independence of presentation.
• exceptions?
• e.g. <b> …… </b> for bold text
and <i> ….. </i> for italicized text
• Style sheets associate presentation
formats with HTML elements.
• CSS1: published in 1996
• CSS2: published in 1998
• CSS3: divided into many separate
modules
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
5
Content vs. Presentation (cont.)
• Style sheets can be used to specify how tables should be
rendered, how lists should be presented, etc.
• HTML style sheets are known as Cascading Style Sheets,
since can be defined at three different levels
1. inline style sheets apply to the content of a single
HTML element
2. document style sheets apply to the whole BODY of a
document
3. external style sheets can be linked and applied to
numerous documents
• lower-level style sheets can override higher-level style
sheets
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
6
Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
[Link] [Link] Selects only <p> elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element, div, p Selects all <div> elements and all <p>
element... elements
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
7
Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
8
Inline Style Sheets
• Using the style attribute, we can specify presentation style for a single
HTML element
• within tag, list sequence of property:value pairs separated by semi-colons
<body>
<p style="font-family:Arial; text-align:right">
This is a right-justified paragraph in Arial, with some
<span style="color:red">red text</span>.
</p>
<p>And
<a style="color:red; text-decoration:none; font-
size:larger;” href="[Link]">LINK</a>
is a formatted link.
</p>
</body>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
9
Inline Style Sheets (cont.)
<!DOCTYPE html>
<html>
<head>
<title>Inline Style Sheets</title>
</head>
<body>
<p style="margin-left:50px; margin-
top:30px"> Text
</p>
<ol style="list-style-type:upper-
alpha">
<li> one thing</li>
<li> or another</li>
<ul style="list-style-type:square">
<li> with this</li>
<li> or that</li>
</ul>
</ol>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
10
Document Style Sheets
• Inline style sheets apply to individual elements in the page.
• using inline style directives can lead to inconsistencies, as
similar elements are formatted differently
• inline definitions mix content & presentation
• As a general rule, inline style sheet directives should be
used as sparingly as posible
• Alternatively, document style sheets allow for a cleaner
separation of content and presentation.
• style definitions are placed in the <head> of the page
(within STYLE tags)
• can apply to all elements, or a subclass of elements,
throughout the page.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
11
Document Style Sheets
<!DOCTYPE html>
<html>
<head>
<title>Document Style Sheets</title>
<style type="text/css">
h1 {color:blue;
text-align:center}
[Link] {text-indent:0.2in}
</style>
</head>
<body>
<h1> Centered Title </h1>
<p class="indented">This paragraph
will have the first line indented, but
subsequent lines will be flush. </p>
<p>This paragraph will not be
indented.</p>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
12
Document Style Sheets (cont.)
<!DOCTYPE html>
<html>
<head>
<title> Inline Style Sheets </title>
<style type="text/css">
table {font-family:Arial,sans-serif}
caption {color:red;
font-style:italic;
text-decoration:underline}
th {background-color:green}
</style>
</head>
<body>
<table>
<caption> Danh sách SV </caption>
<tr><th> Tên </th> <th> MSSV</th></tr>
<tr><td> Minh </td> <td> 20202020 </td></tr>
<tr><td> Mạnh </td> <td> 20212021 </td></tr>
</table>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
13
External Style Sheets
• modularity is key to the development and reuse of
software
• package and make available for reuse
• central libraries make it possible to make a single
change and propagate the changes
• external style sheets place the style definitions in
separate files
• multiple pages can link to the same style sheet,
consistent look across a site
• possible to make a single change and propagate
automatically
• represents the ultimate in content/representation
separation
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
14
Modularity & Style Sheets
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet”
href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
15
Advaned CSS
16
Universal, Child, and Adjacent Selectors
• Universal selectors: set global styles for a page, or as a
descendant of a selector to set styles of everything
within something.
* {
margin: 0; Example: set the margin and padding
padding: 0; on everything in a page to zero and
}
everything within an element with the
#contact * {
display: block; ID “contact” to be displayed as a block
}
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
17
Universal, Child, and Adjacent Selectors
• Child selectors: A greater-than symbol (“>”) can be used
to specify something that is a child of something else,
that is, something immediately nested within
something.
#genus_examples > li { border: 1px solid red }
Example: set the border for all <li> child of element has
id=“genus_examples”
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
18
Universal, Child, and Adjacent Selectors
• Adjacent selectors: A plus sign (“+”) is used to target an
adjacent sibling of an element, essentially, something
immediately following something.
<h1>Clouded leopards</h1>
<p>Clouded leopards are cats that
belong to the genus Neofelis.</p>
<p>There are two extant species:
Neofelis nebulosa and Neofelis
diardi.</p>
h1 + p { font-weight: bold }
Only the first paragraph, that following the heading, will be made bold.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
19
Position
• specifies the type of positioning
method used for an element
• static: is not affected by top,
bottom, left, and right.
• relative: is positioned relative
to its normal position.
• fixed: stays in the same place
even if the page is scrolled
• absolute: is positioned
relative to the nearest
positioned ancestor (or
document body if no ancestor
exists)
• sticky: is positioned based on
the user's scroll position.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
20
Position
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
21
Overlap
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
22
Rounded Corners
• With the CSS border-radius property, you can give any
element “rounded corners”.
ØRounded corners for an element with a border:
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
23
Rounded Corners
• With the CSS border-radius property, you can give any
element “rounded corners”.
ØRounded corners for an element with a specified
background color:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
24
Responsive Web Design
• Design for multi-devices with different screen sizes,
resolutions
• HTML5
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
• Media query: technique in CSS3
• Example
• [Link]
• [Link]
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
25
Exercises
1. [Link]
2. [Link]
[Link]
3. [Link]
esponsive-web-design/
4. Build your personal page:
[Link]
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
26
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology
27
