Scribd
Upload
6 views98 pages

CSS Fundamentals and Selectors Guide

Chapter 3 provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in separating content from presentation in web development. It covers CSS levels (inline, internal, and external), syntax, selectors, and properties, emphasizing the benefits of using CSS for consistent design and easier maintenance. The chapter also details various types of selectors, including simple, attribute, combinator, and pseudo-class selectors.

Uploaded by

nghib2303833
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
6 views98 pages

CSS Fundamentals and Selectors Guide

Chapter 3 provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in separating content from presentation in web development. It covers CSS levels (inline, internal, and external), syntax, selectors, and properties, emphasizing the benefits of using CSS for consistent design and easier maintenance. The chapter also details various types of selectors, including simple, attribute, combinator, and pseudo-class selectors.

Uploaded by

nghib2303833
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

Chapter 3

Cascading Style Sheet (CSS)

College of Information and Communication Technology


Can Tho University
Dr. Trieu Thanh Ngoan

ĐẠI HỌC CẦN THƠ


CTU
1 [Link]
Cộng đồng – Toàn diện – Ưu việt
Faculty of Computer Network and Communication
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
2 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
2
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
3 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
3
• Introduction to CSS

Why CSS?
HTML markup: used to represent
• Semantic: e.g. <h1> means top-level heading
• Presentation: <h1> elements look a certain way (bold and big)
It is advisable to separate semantics from presentation:
• It’s easier to present documents on multiple platforms (browser,
cellphone, …)
• It’s easier to generate documents with consistent look
• Semantic and presentation changes can be made independently of one
another
HTML was NEVER intended to contain tags
for formatting a web page!
ĐẠI HỌC CẦN THƠ [Link]
CTU
4 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
4
• Introduction to CSS

What is CSS?
A language that describes the style of an HTML document
describes how HTML elements should be displayed
Cascading Style Sheets removed the style formatting from the HTML page
CSS benefits:
• Easier to maintain and update
Cons: the
• Greater consistency in design compatibility with
• More formatting options the browsers
• Lightweight code
• Faster download times
• Ease of presenting different styles to different viewers, etc.

ĐẠI HỌC CẦN THƠ [Link]


CTU
5 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
5
What is CSS?
Introduction to CSS Web page = HTML (structure) + CSS (presentation)
<!DOCTYPE html> <style>
<html> body {
<head> background-color: lightblue;
</head> }
<body> h1 {
<h1>My First CSS Example</h1> color: white;
<p>This is a paragraph.</p> text-align: center;
</body> }
</html> p {
font-family: verdana;
font-size: 20px;
}
</style>

With CSS
No CSS
ĐẠI HỌC CẦN THƠ [Link]
CTU
6 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
6
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
7 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
7
• CSS Levels and Syntax

Levels of CSS
1. Inline:
specified for a specific occurrence of a tag and apply
only to that tag
appear in the tag itself
2. Internal (document):
apply to the whole document in which they appear
appear in the head of the document
3. External:
can be applied to any number of documents (entire
website)
defined in separate files

ĐẠI HỌC CẦN THƠ [Link]


CTU
8 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
8
• CSS Levels and Syntax

Levels of CSS
1. Inline: uses the style attribute of the HTML element
General form:
style="property1: value1; property_2: value2;…"
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>

ĐẠI HỌC CẦN THƠ [Link]


CTU
9 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
9
• CSS Levels and Syntax

Levels of CSS
2. Internal: defined in the <head> section of an HTML page, within a
<style> element
General form: <html>
<style> <head>
<style>
rule list body {background-color: powderblue;}
</style> h1 {color: blue;}
p {color: red;}
Example:
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ĐẠI HỌC CẦN THƠ [Link]
CTU
10 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
10
• CSS Levels and Syntax

Levels of CSS
3. External:
• CSS rules are defined in a separate file (.css file)
• To use an external style sheet, add a link to it in the <head> section of
the HTML page
• Example:
<!DOCTYPE html>
body { <html>
background-color: powderblue; <head>
} <link rel="stylesheet" href="[Link]">
h1 { </head>
color: blue; <body>
} <h1>This is a heading</h1>
p { <p>This is a paragraph.</p>
color: red; </body>
} </html>

CSS file HTML file


ĐẠI HỌC CẦN THƠ [Link]
CTU
11 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
11
• CSS Levels and Syntax

Levels of CSS
CSS conflict resolution:
When more than one style sheet applies to a specific tag in a document,
the lowest level style sheet has precedence
1. Inline CSS
2. Internal CSS
3. External CSS
4. Browser default format

In the same level, the last CSS rule will be applied

ĐẠI HỌC CẦN THƠ [Link]


CTU
12 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
12
• CSS Levels and Syntax

CSS Syntax
A CSS block (internal) or CSS file (external) consists of CSS rules
A CSS rule consists of a selector and a declaration block surrounded by a
curly braces
The selector “selects” HTML elements in the webpage
A declaration block contains one or more declarations, separated by a
semicolon
Each declaration includes a CSS property name and a value

ĐẠI HỌC CẦN THƠ


Select and style
CTU
13 [Link] 13
Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
• CSS Syntax

CSS Syntax
CSS declaration: { property: value; …}
CSS properties:
CSS3: more than 70 properties
CSS4: 129 properties
Categories (vary):
Fonts, lists, alignment, margins, colors, backgrounds, borders, positioning, etc.
Animations, backgrounds, box model, flexbox, grid, positioning, transitions, typography, etc.

CSS rule

ĐẠI HỌC CẦN THƠ [Link]


CTU
14 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
14
• CSS Syntax

CSS Syntax
CSS property values: vary in forms
Keywords: left, right, small, large, etc.
Number (with no space)

Unit: px (pixel), in (inches), cm, mm, pt (points), pc (picas, 12 pts), em (height of the
letter ‘m’), ex (height of the letter ‘x’), % (percentage), vw (view port width)
Color:
Name (140 color names)
Hex values, RGB (red, green, blue), RGBA (A: alpha channel), HLS (hue, saturation,
lightness), HLSA
Special values: normal (default value of the property), inherit (from parent element), auto
(browser default value)

ĐẠI HỌC CẦN THƠ [Link]


CTU
15 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
15
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
16 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
16
Selectors
1. Simple selectors
Select HTML elements by name, class, or ID.
2. Attribute selectors
Select HTML elements based on their attributes or attribute values.
3. Combinator selectors
Select HTML elements based on the specific relationship between them.
4. Pseudo-class selectors
Select HTML elements based on a given state.

ĐẠI HỌC CẦN THƠ [Link]


CTU
17 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
17
• CSS Selectors

HTML-Element Selector
Selects all HTML elements based on element name (HTML tag)
Syntax: HTML-tag { property: value; … }
Example:

p {
text-align: center;
color: red;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
18 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
18
• CSS Selectors

Class Selector
Selects elements with a specific class attribute
Syntax: .classname { property: value; … }
Example:
.header {
font-weight: bold;
}

Combination of element and class selector:


Syntax: [Link]-selector (no space)
Selection: all HTML-tag elements that belong to the class specified by the
class selector

ĐẠI HỌC CẦN THƠ [Link]


CTU
19 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
19
• CSS Selectors

ID Selector
Selects one unique element with a specific id attribute
Syntax: #id { property: value; … }
Example:
#para1 {
font-weight: bold;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
20 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
20
• CSS Selectors

Attribute Selector
Selects elements that have specific attributes or attribute values

Syntax:
• [attribute]: selects elements with specified attribute

• [attribute="value"]: selects elements with a specified attribute and value

ĐẠI HỌC CẦN THƠ [Link]


CTU
21 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
21
• CSS Selectors

Attribute Selector
Syntax (cont.):
• [attribute~="word"]: selects elements with an attribute value containing a specified
word (space-separated)

• [attribute*="value"]: select elements whose attribute value contains a specified value

ĐẠI HỌC CẦN THƠ [Link]


CTU
22 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
22
• CSS Selectors

Attribute Selector
Syntax (cont.):
• [attribute|="word"]: selects elements with the specified attribute starting with the
specified word followed by a hyphen (-)

• [attribute^="value"]: selects elements whose attribute begins with a specified value

ĐẠI HỌC CẦN THƠ [Link]


CTU
23 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
23
• CSS Selectors

Attribute Selector
Syntax (cont.):
• [attribute$="value"]: selects elements whose attribute value ends with a specified
value

Note: this selector can be combine with the element selector


Syntax: HTML-tag[attribute-selector]

ĐẠI HỌC CẦN THƠ [Link]


CTU
24 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
24
• CSS Selectors

Special Selectors
Pseudo-classes:
Selects special elements that are not in the document tree
Prefixed with “:”
Pseudo Selection Example
:link all unvisited links a:link
:visited all visited links a:visited
:hover element with the mouse pointer hovering a:hover (hovered link)
:focus element which has the focus input:focus (focusing input)
:active the active element a:active (active link)
:first-child the first child of its parent p:first-child (first child <p>)

Some others: [Link]


ĐẠI HỌC CẦN THƠ [Link]
CTU
25 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
25
• CSS Selectors

Special Selectors
Pseudo-classes: Examples:

Pseudo-classes can easily be


combined with HTML classes

Link

<input class="formField" type="text" />

ĐẠI HỌC CẦN THƠ [Link]


CTU
26 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
26
• CSS Selectors

Special Selectors
Universal selector:
Selects all elements in the webpage
Syntax: *
Example: apply red color to all elements in the webpage
* {
color: red;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
27 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
27
• CSS Selectors

Combine Selectors
A CSS selector can contain more than one simple selector
Four CSS selector combinators:
1. Descendant selector (space)
2. Child selector (>)
Read from
3. Next sibling selector (+) right to left
4. Subsequent-sibling selector (~)

Example:
div#header p [Link] {
color: white;
}
ĐẠI HỌC CẦN THƠ [Link]
CTU
28 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
28
• CSS Selectors

Combine Selectors
Descendant: select elements that are descendants of (inside) a specified
element (ascendant element)
Syntax: ascendant-selector __ descendant-selector
Example:
white space character: space, tab,
ul li { line feed, form feed, new line
color: blue;
}
Child: selects all elements that are direct children of a specified element
Example:
div > p {
background-color: yellow;
}
ĐẠI HỌC CẦN THƠ [Link]
CTU
29 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
29
• CSS Selectors

Combine Selectors
Next sibling: select an element that is directly after a specific element
Example:
div + p {
background-color: yellow;
}
Subsequent-sibling: selects all elements that are next siblings of a
specified element
Example:
div ~ p {
background-color: yellow;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
30 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
30
• CSS Selectors

Group Selectors
Group selectors:
To share the same declaration to multiple selectors (to save space)
Syntax: use comma (,) to separate the grouped selector
Example:
<style>
a:hover, a:focus {
background-color: green;
}
a:hover { color: red; }
a:focus { color: yellow; }
</style>

ĐẠI HỌC CẦN THƠ [Link]


CTU
31 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
31
• CSS Selectors

Cascade Rule
Used to solve the conflicts occurring when there are two or more values for
the same property on the same element
Sources of conflict:
• Conflicting values between levels of style sheets
• Within one style sheet (overlapped selectors)
• Inheritance can cause conflicts
• Property values can come from style sheets written by the document author,
the browser user, and the browser defaults

ĐẠI HỌC CẦN THƠ [Link]


CTU
32 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
32
• CSS Selectors

Cascade Rule
Cascade (specificity precedence) rules: specificity, inheritance, and source order
• ids are more specific than classes
• classes are more specific than element names
• Style rules that directly target elements are more specific than style rules that
are inherited
• If elements have the same specificity, the later rule wins

div strong { color: red; } strong { color: red; }


strong { color: blue; } strong { color: blue; }

<div> <div>
<strong>What color am I?</strong> <strong>What color am I?</strong>
</div> </div>

ĐẠI HỌC CẦN THƠ [Link]


CTU
33 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
33
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
34 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
34
CSS Propeties
1. Values
2. Font
3. Text
4. Background
5. Position
6. Table
7. Lists
8. Cursor
9. Units

ĐẠI HỌC CẦN THƠ [Link]


CTU
35 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
35
• CSS Basic Properties

1. Values
The value of a CSS property can be: keyword, variable
Keyword:
• auto: The browser automatically calculates the value.
• inherit: The attribute will use the same value as the parent element.
• none: Remove previously assigned values.
• normal: Using the default value of an attribute
• transparent: Transparent, allowing one component to be seen through to the
components beneath it.
Variable: Numerical Values and Units
Fixed units like px (pixels), Responsive units like % (percentage of parent), etc.

ĐẠI HỌC CẦN THƠ [Link]


CTU
36 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
36
• CSS Basic Properties

2. Fonts

Property Description
font Setting all properties for font in one declaration
(font-style, font-variant, font-weight, font-size/line-height, font-family, etc.)
font-family A prioritized list of [generic] font family names for an element
font-size Sets the size of a font (absolute or relative), default: 16px/1em
font-style Sets the style (normal | italic | oblique) for a text
font-variant Specifies whether a text should be displayed in small-cap
(normal | small-caps)
font-weight Sets the thickness of a font
(normal | bold | bolder | lighter | number)

Some other font properties: font-size-adjust (Firefox only), font-stretch


ĐẠI HỌC CẦN THƠ [Link]
CTU
37 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
37
• CSS Basic Properties

2. Fonts
Font Families:
font-family: specifies the font for an element : "Serif" hay "Times New Roman"
Types:
Generic family: used to refer to a group of font families that are very similar, such as :
"Serif" and "Monospace"
Font family: identify a specific font family such as: "Times New Roman" and "Arial"

ĐẠI HỌC CẦN THƠ [Link]


CTU
38 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
38
• CSS Basic Properties

2. Fonts (tt)
Font Families:
• should hold several font names as a "fallback" system
• Always start with the font you want, and always end with a generic
family
• Note: If the font name is more than one word, it must be in quotation
marks, like: "Times New Roman".
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
39 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
39
• CSS Basic Properties

2. Fonts
CSS3 @font-face: This allows web browsers to use fonts not pre-installed
on the user's computer by directly downloading the necessary fonts from
the web server.
Syntax:

Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
40 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
40
• CSS Basic Properties

2. Fonts
Font Style:
font-style: specifies the font style for a text
VALUES : normal | italic | oblique
italic and oblique are quite similar, but oblique is less supported
Eample:

Font Size:
font-size: specify the size of the text/font
VALUE: <length> | <percentage-parents-font-size> | smaller | larger | xx-small | x-small
| small | medium | large | x-large | xx-large | inherit
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
41 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
41
• CSS Basic Properties

2. Fonts
font-weight: specifies how thick or thin characters in text should be
displayed
VALUES: normal | bold | bolder | lighter | 100-900
Example:

font-variant: specifies whether or not a text should be displayed in a small-


caps font
VALUES: normal | small-caps | inherit
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
42 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
42
• CSS Basic Properties

3. Text
Property Value
color color-value (color name | rgb | rgba | hsl | hsla)
text-align left | right | center | justify
text-decoration line (none | underline | overline | line-through) color style (solid | double
| dotted | dashed | wavy)
text-indent length (fixed or relative)
text-justify auto | inter-word | inter-character | none
text-overflow clip | ellipsis | string (to represent the clipped text)
text-shadow h-shadow v-shadow [blur-radius] color (e.g. 2px 2px 1px black)
text-transform none | capitalize | uppercase | lowercase

Other properties: direction, line-height, letter-spacing, word spacing, etc.


ĐẠI HỌC CẦN THƠ [Link]
CTU
43 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
43
• CSS Basic Properties

3. Text
Text properties allow you to format a block of text, including: : color,
letter-spacing, word-spacing, line-height, white-space, text-align, vertical-
align, text-indent, text-decoration, text-transform
color :
VALUES: <color> | inherit
Example:

letter-spacing : the space between two characters in text


VALUES: <length> | <percentage-font-size>% | inherit
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
44 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
44
• CSS Basic Properties

3. Text
word-spacing : specify the space between the words
VALUES: normal | <length> | inherit
Example:

line-height : specify the space between lines


VALUES: normal | <number> | <length> | <percentage-font-size>% | inherit
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
45 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
45
• CSS Basic Properties

3. Text
white-space : specifies how white-space inside an element is handled
VALUES: normal | pre | nowrap | pre-wrap | pre-line
Example:

text-indent : specify the indentation of the first line in a text-block


VALUES: <length> | <percentage-width>% | inherit
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
46 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
46
• CSS Basic Properties

3. Text
vertical-align : sets the vertical alignment of an element
VALUES: baseline | sub | super | top | text-top | middle | bottom | text-bottom |
<percentage-line-height>% | <length> | inherit
Example:

text-align : et the horizontal alignment of a text


VALUES: left | center | right | justify | inherit
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
47 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
47
• CSS Basic Properties

3. Text
text-decoration: control the appearance(line-through , underline , overline )
VALUES: none | line-through | underline | overline
Example:

text-transform : control the capitalization of text (uppercase), (lowercase ),


(capitalize )
VALUES: lowercase | capitalize | uppercase | none | inherit
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
48 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
48
• CSS Basic Properties

4. Background
Property Value
background bg-color bg-image position/bg-size bg-repeat bg-origin
bg-clip bg-attachment
(e.g. background:url([Link]) 10px 20px/50px 50px;)
background-color color-value (color name | rgb | rgba | hsl | hsla)
background-image image-url
background-position position-name (e.g. left top | left center | etc.) |
x% y% (relative) | xpos ypos (absolute)
background-size auto (origin size) | length (width height) | cover | contain
background-repeat repeat | repeat-x | repeat-y | no-repeat
background-origin padding-box | border-box | content-box
background-clip Painting area: border-box | padding-box | content-box
background-attachment scroll (with the page), fixed, local (scroll with the element
CTU
49
ĐẠI HỌC CẦN THƠ
Cộng đồng – Toàn diện – Ưu việt content) Faculty of Computer Network and Communication
[Link] 49
• CSS Basic Properties

4. Background
background-color: property specifies the
background color
VALUES: <color> | transparent

background-image: specifies an image to use


as the background (png, jpeg, gif)
VALUES: url("url") | none

background-attachment: specifies whether


the background image should scroll or be
fixed
VALUES: scroll | fixed

ĐẠI HỌC CẦN THƠ [Link]


CTU
50 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
50
• CSS Basic Properties

4. Background
background-repeat: sets if/how a background image will be repeated. By
default, a background-image is repeated both vertically and horizontally
VALUES: repeat | repeat-x | repeat-y | no-repeat
Example:

ĐẠI HỌC CẦN THƠ [Link]


CTU
51 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
51
• CSS Basic Properties

4. Background
background-position: set the starting position of the background image.
By default, a background-image is placed at the top-left corner
VALUES: <length> | <percentage-box-width+padding>% | <left | right | center> <top |
bottom | center>
Example:

25px bottom 25px 20px top


ĐẠI HỌC CẦN THƠ [Link]
CTU
52 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
52
• CSS Basic Properties

4. Background
background (shorthand property): specify all the background properties in
one single property
VALUES: <background-color> <background-image> <background-repeat>
<background-attachment> <background-position> | none

ĐẠI HỌC CẦN THƠ [Link]


CTU
53 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
53
• CSS Basic Properties

5. Position
position: controlling the placement of elements
VALUES: static | relative | absolute | fixed
• static: positioned static by default (not affected by top, bottom, left, right)
• relative: positioned relative to its normal position, top, bottom, left, right
properties will cause the element to be adjusted away from its normal
position
• absolute: positioned relative to the nearest positioned ancestor
• fixed: positioned relative to the viewport, it always stays in the same place
even if the page is scrolled
Note: An element with the position: relative, absolute, or fixed will have
the ability to overlay another element.

ĐẠI HỌC CẦN THƠ [Link]


CTU
54 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
54
• CSS Basic Properties

5. Position
Properties affect the position: <span id="e2">Element</span>
• top: Move the element a certain
distance from the top edge
• right: Move the element a certain
distance from the right edge
• bottom: Move the element a certain
distance from the bottom edge
• left: Move the element a certain
distance from the left edge
VALUES: auto | <length> |
<percentage-parents-width>%

ĐẠI HỌC CẦN THƠ [Link]


CTU
55 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
55
• CSS Basic Properties

5. Position
Example: <span id="e1">1</span>
<span id="e2">2</span>
<span id="e3">3</span>
#e2{
top:30px;
left:50px;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
56 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
56
• CSS Basic Properties

6. Table
Property Values
border border-width border-style border-color
border-width top right bottom left (name or value, e.g. thin medium thick 10px;)
border-style top right bottom left (none | hidden | dotted | dashed | solid | double
| groove | ridge | inset | outset)
border-color top right bottom left
border-collapse separate | collapse
border-spacing length | h-length v-length
caption-side top | bottom
empty-cell show | hide
table-layout auto (cells’ width belongs to the content) | fixed (equal column width if
the column width is not set; otherwise, uses the width of the 1st row)
ĐẠI HỌC CẦN THƠ [Link]
CTU
57 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
57
• CSS Basic Properties

6. Table
border: specify the width, style, and color of table borders

border-collapse: sets whether table borders should collapse into a single


border or be separated as in standard HTML
VALUES: collapse | separate

ĐẠI HỌC CẦN THƠ [Link]


CTU
58 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
58
• CSS Basic Properties

6. Table
caption-side: caption position
VALUES: top | bottom

table-layout: layout of a table


VALUES: auto | fixed
• auto (cells’ width belongs to the content)
• fixed (equal column width if the column width is not set; otherwise, uses the width of
the 1st row)

ĐẠI HỌC CẦN THƠ [Link]


CTU
59 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
59
• CSS Basic Properties

6. Tables

ĐẠI HỌC CẦN THƠ [Link]


CTU
60 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
60
• CSS Basic Properties

7. List
Used to create styles for list elements(<ul>, <ol>)
list-style-type: specifies the type of list-item marker in a list
VALUES: disc | circle | square | decimal | decimal-leading-zero | upper-roman | lower-
roman | upper-alpha | lower-alpha | lower-greek | none | inherit

Property Values
list-style list-style-type list-style-position list-style-image
list-style-type none | disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-alpha | upper-alpha | etc.
list-style-position inside | outside
list-style-image none | url(…)
maker-offset auto | length
ĐẠI HỌC CẦN THƠ [Link]
CTU
61 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
61
• CSS Basic Properties

7. List
list-style-image: replace the list-item marker with an image
VALUES: url( <url>) | none

list-style-position: specifies the position of the list-item markers


VALUES: inside | outside
list-style (shorthand property): used to set all the list properties in one
declaration:
VALUES: <list-style-type> <list-style-position> <list-style-image>

ĐẠI HỌC CẦN THƠ [Link]


CTU
62 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
62
• CSS Basic Properties

7. Lists

ĐẠI HỌC CẦN THƠ [Link]


CTU
63 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
63
• CSS Basic Properties

8. Cursor
cursor: Set the shape for the cursor
VALUES: default | url(<url>) | auto | crosshair |
pointer | move | e-resize | ne-resize | nw-resize |
n-resize | se-resize | sw-resize | s-resize | w-
resize | text | wait | help | progress | inherit

ĐẠI HỌC CẦN THƠ [Link]


CTU
64 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
64
• CSS Basic Properties

9. CSS Units
Unit Description
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of
the current font. E.g., if an element is displayed with a font of 12 pt,
then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can
adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the
font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)
ĐẠI HỌC CẦN THƠ [Link]
CTU
65 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
65
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
66 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
66
• Inheritance

Inheritance
CSS styles are inherited from parent to child

a, h1, p, strong {
Instead of selecting all elements font-family: Helvetica;
individually }

body {
font-family: Helvetica;
You can style the parent and the }
children will inherit the styles h2, h3 {
font-family: Consolas;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
67 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
67
• Inheritance

Exception in Inheritance
While many CSS styles are inherited from parent to child, not all CSS
properties are inherited
<a href="/home">
Back to <em>Home</em> <em> inherits the font-family
</a> property, but not the display
+
a {
display: block;
font-family: Arial;
}

There's no rule for what properties are inherited or not: the inheritance
behavior defined in the CSS specification

[Link]
ĐẠI HỌC CẦN THƠ [Link]
CTU
68 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
68
• Inheritance

User Agent Styles


<h1>Chocolate</h1>
<p>
<a href="...">CSS</a> is wonderful
<a> inherits
</p> font-family, but
+ not the color!
body {
color: red;
font-family: Helvetica;
}

This is because the browser has its own default styles


Browser loads its own default stylesheet on every webpage
<html>
<head>
<title>User Agent Style</title>
<link rel="stylesheet" href="[Link]"/>
...
</head>
ĐẠI HỌC CẦN THƠ [Link]
CTU
69 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
69
• Inheritance

User Agent Styles


So, to style the <a> links, we need to override the browser default style by
explicitly setting a color:

<h1>Chocolate</h1>
<p>
<a href="...">CSS</a> is wonderful
</p>
+
body {
color: red;
font-family: Helvetica;
}

a {
color: red;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
70 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
70
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
71 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
71
• The Layout

Inline and Block Elements


The browser treats every element as a box
There are 2 types of boxes: block and inline
Block elements:
• Always start on a new line
• Fill up the horizontal from left to right of the page
• Example: <p>, <h1> to <h6>, <div>, <ul>, <ol>, <pre>, etc.
Inline elements:
• Doesn’t start on a new line, i.e. one can sit next to others
• Doesn’t respect to the top and bottom margins/paddings
• Example: <img>, <a>, <input>, <span>, etc.

ĐẠI HỌC CẦN THƠ [Link]


CTU
72 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
72
• The Layout

Inline and Block Elements


<html>
<body>
<p>Text and image <img src="figures/[Link]" width="100"/>
and a button <input type="button" value="Click me!">
and a link to <a href="[Link]">
an example</a>
and a
<h3>heading</h3>
and another text
and another
<p>paragraph</p>
and text after paragraph.
<p>
</body>
</html>

ĐẠI HỌC CẦN THƠ [Link]


CTU
73 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
73
• The Layout

Inline and Block Elements


To change the display mode of an element:
Use the ‘display’ property:
display: block | inline
Example:
a {
display: block;
}

<p>Text and image <img src="figures/[Link]"/>


and a button <input type="button" value="Click me!">
and a link to <a href="[Link]">an example</a>
<p>
ĐẠI HỌC CẦN THƠ [Link]
CTU
74 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
74
• The Layout

Display
The ‘display’ property specifies how how element is displayed
Possible value: inline, block, list-item (same as block), etc.

<span id="s1">Element 1</span>


<span id="s2">Element 2</span>
<span id="s3">Element 3</span>

#s1, #s3 {display: block;}


#s2 {display: none;}

#s1, #s2, #s3 { #s1, #s2, #s3 {display: inline;}


display: block;
}
ĐẠI HỌC CẦN THƠ [Link]
CTU
75 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
75
• The Layout

Grouping Elements
Grouping elements lets us style multiple elements as a whole

Container elements are used to group elements:


<span>: inline container
<span>Hello <a href="...">World</a>!</span>
<div>: block container
<div>Hello <a href="...">World</a>!</div>

Width and height properties can be used to resize the block and <img>
elements

ĐẠI HỌC CẦN THƠ [Link]


CTU
76 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
76
• The Layout

Overflow
The content of an element may overflows
(bigger) its container
Possible values for these properties:
• visible: the overflow is not clipped and
rendered outside the element’s box
• hidden: the overflow is clipped, the rest
content is visible
• scroll: the overflow is clipped but a
scrollbar is added
• auto: if the overflow is clipped, a scrollbar
will be added
ĐẠI HỌC CẦN THƠ [Link]
CTU
77 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
77
• The Layout

Overflow
The overflow, overflow-x, overflow-y properties are used to specify
what happens

<div style="height:10px; background-color:yellow;">Hello</div>


<br>
<div style="width:40px; height:10px;
background-color:yellow;
overflow:hidden;"> Hello</div>
<br>
<div style="width:40px; height:40px;
background-color:yellow;
overflow:auto;">Hello World</div> <br>
<div style="width:40px; height:40px;
background-color:yellow;
overflow-x:auto;
overflow-y:hidden;">Hello World</div>
ĐẠI HỌC CẦN THƠ [Link]
CTU
78 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
78
• The Layout

Visibility
The ‘visibility’ property specifies whether an element is visible
VALUES: visible | hidden | collapse (used only with table row/column)
The ‘opacity’ property sets the opacity level for an element
VALUES: from 0.0 (fully transparent) to 1.0 (fully opaque)
Note that, hidden elements (set with display property) still take up space on
the page

ĐẠI HỌC CẦN THƠ [Link]


CTU
79 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
79
• The Layout

Floating
The ‘float’ property is used to float boxes on the sides of other boxes and
the siblings will wrap around the floating element
VALUES:
• none (default): the element doesn’t float
• left: the element floats to the left of its container
• right: the element floats to the right of its container

ĐẠI HỌC CẦN THƠ [Link]


CTU
80 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
80
• The Layout

Floating
The ‘clear’ property is used to specify
that an element should not wrap around
above floated elements
VALUES:
• none (wrap floating elements on both
sides),
• left (doesn’t wrap the left element),
• right (doesn’t wrap the right element),
• both (doesn’t wrap both left and right)

ĐẠI HỌC CẦN THƠ [Link]


CTU
81 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
81
• The Layout

Floating

ĐẠI HỌC CẦN THƠ [Link]


CTU
82 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
82
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
83 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
83
• The Box Model

The Box Model


Each element can be considered as a box in the page layout
The box model is essentially a box that wraps around an element consisting
of margins, borders, paddings, and content

ĐẠI HỌC CẦN THƠ [Link]


CTU
84 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
84
• The Box Model

The Box Model – The Margin


Clears an area outside the border
The margin is transparent
The ‘margin’ property is used to set the size of the margin
margin: <top [<right> [<bottom> [<left>]]]>
margin-top/right/bottom/left: <value> | auto
If the margin is auto and the box’s width is fixed, the margin will be set as
large as possible

ĐẠI HỌC CẦN THƠ [Link]


CTU
85 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
85
• The Box Model

The Box Model – The Border


A border goes around the padding and content
A border has a color, style, and the thickness
To set the border properties:
border: [thickness] <style> [color]
border-width: <value> | <top> [right] [bottom] [left]
border-style: none|hidden|dotted|dashed|solid|double
|groove|ridge|inset|outset
border-color: <color> | <top> [right] [bottom] [left]

ĐẠI HỌC CẦN THƠ [Link]


CTU
86 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
86
• The Box Model

The Box Model – The Border

ĐẠI HỌC CẦN THƠ [Link]


CTU
87 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
87
• The Box Model

The Box Model – The Padding


Padding clears an area around the content
The padding is transparent (affected by the content background color)
To set the padding property:
padding: size | <top> [right] [bottom] [left]
padding-top/right/bottom/left: value

.box1 { .box2 {
background-color: lightgrey; background-color: lightgrey;
width: 200px; width: 200px;
border: 20px solid green; border: 10px solid green;
padding: 15px; padding: 5px;
margin: 20px; margin: 10px;
} }

ĐẠI HỌC CẦN THƠ [Link]


CTU
88 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
88
• The Box Model

The Box Model – Exercise


Design the following webpage:

width: 340px

height: 400px

width: 400px
ĐẠI HỌC CẦN THƠ [Link]
CTU
89 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
89
• The Box Model

A Typical Page Layout

ĐẠI HỌC CẦN THƠ [Link]


CTU
90 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
90
• The Box Model

A Typical Page Layout <div class="topnav">


<a href="#">Link</a>
<div class="header"> <a href="#">Link</a>
<h1>Header</h1> <a href="#">Link</a>
<p>Resize...</p> <a href="#" class=”navright">Link</a>
</div> </div>

<div class="column side">


<h2>Side</h2>
<p>Lorem ipsum ...</p>
</div>
<div class="column
middle">
<h2>Main Content</h2> <div class="footer">
<p>Lorem ipsum ....</p> <h2>Footer</h2>
<p>Lorem ipsum ...</p> </div>
</div>

ĐẠI HỌC CẦN THƠ [Link]


CTU
91 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
91
• The Box Model

A Typical Page Layout


/* Style the header */ /* Style the top navigation bar */
.header { .topnav {
background-color: #f1f1f1; overflow: hidden;

padding: 20px; background-color: #333;


}
text-align: center;
/* Style the topnav links */
}
.topnav a {
/* Change color on hover */
float: left;
.topnav a:hover {
display: block;
background-color: #ddd;
text-align: center;
color: black; padding: 14px 16px;
} text-decoration: none;
}
/* Style the right top nav links */
[Link]{
float: right;
}
ĐẠI HỌC CẦN THƠ [Link]
CTU
92 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
92
• The Box Model

A Typical Page Layout


/* Create three unequal columns */
.column { /* Footer */
float: left; .footer {
padding: 10px; padding: 20px;
} text-align: center;
background: #ddd;
/* Left and right column */
margin-top: 20px;
.[Link] {
}
width: 25%;
}
/* Middle column */
.[Link] {
width: 50%;
}

ĐẠI HỌC CẦN THƠ [Link]


CTU
93 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
93
Content
1. Introduction to CSS
2. CSS levels and syntax
3. CSS selectors
4. CSS properties
5. Inheritance
6. The layout
7. The Box model
8. CSS convention

ĐẠI HỌC CẦN THƠ [Link]


CTU
94 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
94
• CSS Convention

Coding Convention
A CSS rule can be written as follow:
selector { property: value; ... }
However, it is recommended to use the following style:
selector { /* Style the header */
property: value; .header {
... background-color: #f1f1f1;
} padding: 20px;
Using comments in CSS text-align: center;
}
is also recommended:
/* comment (multiple lines) */

ĐẠI HỌC CẦN THƠ [Link]


CTU
95 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
95
• CSS Convention

Naming Convention
Class name or ID should describe the semantic, not format
Example: use warning instead of redbox

Names are written in lowercase

Words are separated by a hyphen (-)


Example: header-info (instead of headerInfo)

Use prefix for subclass:


Example: footer footer-logo, footer-copyright

ĐẠI HỌC CẦN THƠ [Link]


CTU
96 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
96
• Appendix

Resources
CSS tutorial:
[Link]
[Link]
[Link] SCSS basics
CSS references:
[Link]
[Link]
CSS tools:
[Link] CSS code generator
[Link]

ĐẠI HỌC CẦN THƠ [Link]


CTU
97 Cộng đồng – Toàn diện – Ưu việt Faculty of Computer Network and Communication
97
Question?
Chapter 3 – Cascading Style Sheet

ĐẠI HỌC CẦN THƠ


CTU
98 [Link] 98
Cộng đồng – Toàn diện – Ưu việt
Faculty of Computer Network and Communication

You might also like