Bài giảng Lập trình Web - Chapter 2: CSS cascading style sheets

Chapter 2

CSS Cascading Style Sheets

Lectured by:

Nguyễn Hữu Hiếu

Introduction

n HTML has evolved a lot over the years - as computers and

networks have gotten faster.

2016

1995

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

2

Introduction

Sample text

<i>

<u>

Sample text

</u>

</i>

</strong>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

3

Introduction

n Tranforming the look and feel of a page using a CSS

(Cascading Style Sheets) style sheet.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

4

Introduction

n The Browser has “default styling” for all tags

<!DOCTYPE html>

<head>

<title>HTML class</title>

</head>

<body>

<h1>Welcome to my personal page </h1>

<ul>

<li><a href="about.html">About me</a>

</li> <li><a href="#">Other pages</a></li>

</ul>

<p>Hello to HTML class. We are going to learn

some <em>CSS</em></p>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

5

Introduction

n We will apply CSS to the tags in the document. With no

changes to the HTML.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

6

Introduction

n Lots of CSS properties to play with

n background-color, border-width, border-color, margin-top,

padding, font-family, top, left, right, float, font-size,

background-image, text-align, text-decoration, font-style,

font-weight, vertical-align, visibility, overflow,…

n We can set these properties on any HTML tag in a

document.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

7

CSS Rules

n Anatomy of a CSS Rule

n selector - which part of the document does this rule apply

n property - which aspect of CSS are we changing

n value - What are we setting the property to.

selector {

property: value;

…

}

Example:

p {

font-family: times;

}

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

8

CSS Rules

n CSS Selector

n

https://www.w3schools.com/cssref/css_selectors.asp

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

9

CSS Rules

n Multiple tags with same styling

h1, h2, h3 {

color: yellow;

background-color: black;

}

• Making a noticeable background color is a fun way to

debug / identify blocks.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

10

CSS Rules

n Three ways to add style rules

n

Inline Style - Add style information to a tag

n

Embedded Style - Add style information to the document

at the beginning

n

External Style Sheet - Put all of your style in an external

file

n Preferred - because two people can work

independently

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

11

Inline Styles

<!DOCTYPE html>

<head>

Inline Styles

<title>HTML class</title>

</head>

<h1>Welcome to my personal page </h1>

<ul>

<li><a href="about.html">About me</a></li>

<li><a href="#">Other pages</a></li>

</ul>

<p>Hello to HTML class. We are going to learn some <em>CSS</em></p>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

12

Embedded Style (Internal CSS)

<!DOCTYPE html>

<head>

Embedded Style

<title>HTML class</title>

body {

font-family: arial, sans-serif;

}

</style>

</head>

<body>

<h1>Welcome to my personal page </h1>

<ul>

<li><a href="about.html">About me</a></li>

<li><a href="#">Other pages</a></li>

</ul>

<p>Hello to HTML class. We are going to learn some <em>CSS</em> </p>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

13

External Style Sheets (External CSS)

index.html

style.css

<!DOCTYPE html>

<head>

body {

font-family: arial, sans-serif;

}

<title>HTML class</title>

</head>

<body>

<h1>Welcome to my personal page </h1>

<ul>

<li><a href="about.html">About me</a></li>

<li><a href="#">Other pages</a></li>

</ul>

<p>Hello to HTML class. We are going to learn some <em>CSS</em></p>

</body>

</html>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

14

CSS file

n We put the CSS file in the same directory so the link works.

<head>

<title>HTML class</title>

</head>

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

15

Fonts

n Default fonts are ugly and they have Serifs - which make

them harder to read on a screen

n So the first thing I usually want to do is override the font in

my document

n And I want to do this everywhere.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

16

Fonts

body {

font-family: "Trebuchet MS, Helvetica, Arial, sans-serif;

font-size: x-large;

}

https://www.w3schools.com/cssref/css_websafe_fonts.asp

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

17

Font Factors

n font-size: xx-small x-small small medium large x-large xx-

large

n font-weight: bold or normal

n font-style: normal or italic

n text-decoration: none, underline, overline, or line-

through

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

18

Color Names

n W3C has listed 16 color names that will validate with an

HTML validator.

n The color names are: aqua, black, blue, fuchsia, gray,

green, lime, maroon, navy, olive, purple, red, silver, teal,

white, and yellow.

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

19

Color Names

Trường Đại Học Bách Khoa TP.HCM

Khoa Khoa Học và Kỹ Thuật Máy Tính

Lập Trình Web

20

Bài giảng Lập trình Web - Chapter 2: CSS cascading style sheets - Nguyễn Hữu Hiếu