Scribd
Upload
7 views27 pages

Lec 3-CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its basic and advanced concepts, including the distinction between content and presentation, various types of style sheets (inline, document, and external), and selectors. It also covers advanced topics such as positioning, responsive web design, and the use of media queries. Additionally, it includes examples and exercises for practical application of CSS principles.

Uploaded by

Bảo Kiều
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views27 pages

Lec 3-CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its basic and advanced concepts, including the distinction between content and presentation, various types of style sheets (inline, document, and external), and selectors. It also covers advanced topics such as positioning, responsive web design, and the use of media queries. Additionally, it includes examples and exercises for practical application of CSS principles.

Uploaded by

Bảo Kiều
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

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

https://www.w3schools.com/css/demo_default.htm
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"

element.class p.intro 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="page01.html">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}
p.indented {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="mystyle.css">
</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
• https://www.w3schools.com/css/example_withoutviewport.htm
• https://www.w3schools.com/css/example_withviewport.htm

TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Information and Communication Technology

25
Exercises

1. https://www.w3schools.com/css/default.asp
2. https://www.w3schools.com/css/css_exercis
es.asp
3. https://www.freecodecamp.org/learn/2022/r
esponsive-web-design/
4. Build your personal page:
https://ctsv.hust.edu.vn/#/ho-so

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

You might also like