Session3 module5 6 intro CSS and color layout properties

Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở điVà kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này

Session 3

Module 5: Introduction to CSS

Module 6: CSS Color and Layout Properties

Session 3 – Objectives (1)

Session 3 – Objectives (2)

What is CSS?

control styles

presentation of an HTML document as it will be presented on screen, or even in print

appearance of elements on a page and create

is still under development

CSS Syntax

one or more declarations

CSS Comments

may help you when you edit the source code at

elements the corresponding rule applies to

o HTML element selectors

o Class selectors

o ID selectors

HTML Element Selectors

elements

brackets So, the HTML <p> tag become p

HTML Element Selectors Demo

ID Selectors

single, unique element

element, and is defined with a "#"

element with id="elementid":

o CSS:

#elementid {color: red; text-align: center;}

o HTML:

<h1 id="elementid">ID selector</h1>

Class Selectors (1)

group of elements Unlike the id selector, the class selector is most often used on several elements

HTML elements with the same class

attribute, and is defined with a "."(dot)

Class Selectors (2)

class="center" will be center-aligned:

Class Selectors (3)

elements should be affected by a class

class="center" will be center-aligned:

Class Selectors Demo

Ways to Insert CSS (1)

<p style="color: red;">This is a paragraph.</p>

Ways to Insert CSS (2)

o Use link element

Inheritance in CSS

CSS Unit

 For width, height, margin, padding, border property:

 For color, background property:

CSS Color

 Browser support:

o The color property is used to set the color of the text.

 body {color: blue;}

Text Properties Demo

<p>Link to: <a href="http://aptech.ac.vn">FPT Aptech</a></p>

<p class="uppercase">This is some text.</p>

<p class="capitalize">This is some text.</p>

Output

Font Properties (1)

boldness, size, and the style of a text

Font Properties (2)

o Font-weight property sets how thick or thin characters

in text should be displayed

• bold { font-weight: bold; }

• p { font-weight: 900; }

Font Properties Demo

<p class="serif">This is a paragraph, shown in the

Times New Roman font.</p>

<p class="sansserif">This is a paragraph, shown in

the Arial font.</p>

Output

Link Properties (1)

color, font-family, background, etc.)

o a:link - a normal, unvisited link

o a:visited - a link the user has visited

o a:hover - a link when the user mouses over it

o a:active - a link the moment it is clicked

Link Properties (2)

o a:link {color: #FF0000;} /* unvisited link */

o a:visited {color: #00FF00;} /* visited link */

o a:hover {color: #FF00FF;} /* mouse over link */

o a:active {color: #0000FF;} /* selected link */

o a:link {background-color: #B2FF99;}

o a:visited {background-color: #FFFF85;}

Color Properties

o The color property is used to set the color of the text.

 body {color: blue;}

 h1 {color: #00ff00;}

 h2 {color: rgb(255,0,0);}

Background Properties

background color of an element

o body {background-color: #b0c4de;}

o h1 {background-color: #6495ed;}

o div {background-color: #b0c4de;}

image to use as the background of an element

body

{

CSS Box Model (1)

In CSS, the term "box model" is used when talking about design and layout

CSS Box Model (2)

margin does not have a background color, it is completely transparent

and content The border is affected by the background color of the box

padding is affected by the background color of

CSS Box Model (3)

content

CSS Box Model (4)

CSS Border Properties (2)

Margin Properties (1)

elements

for different sides:

o margin-top: 100px;

o margin-bottom: 100px;

o margin-right: 50px;

o margin-left: 50px;

Padding Properties (1)

between the element border and the element

content

for different sides:

o padding-top: 25px;

o padding-bottom: 25px;

o padding-right: 50px;

Box Model Demo

Table Properties (1)

Table Properties (2)

<style type="text/css">

table {border-collapse: collapse;}

table,th,td {border: 1px solid black;}

</style>

<style type="text/css">

Session 3 – Summary (1)

control styles

one or more declarations

elements the corresponding rule applies to

o HTML element selectors

o Class selectors

o ID selectors