Scribd
Upload
27 views141 pages

CSS Basics and Selectors Guide

Uploaded by

Xuan Huong Nguyen
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
27 views141 pages

CSS Basics and Selectors Guide

Uploaded by

Xuan Huong Nguyen
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/ 141

Part 2: CSS

1 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 CSS = Cascading Style Sheets
 A styling language
 Current version: CSS3

 Cascading: the procedure that determines which style


will apply to a certain section, if you have more than one
style rule
 Style: how you want a certain part of your page to look
 Sheets: sets of rules for determining how the webpage
will look

2 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Principle
 A style rule has 2 parts:
áp dụng rule cho những phần tử nào
 Selector: the HTML elements you want to add style to
 Declaration: the statement of style for that element, made up
of property and value
 Ex:
 selector {
property1: value1;
property2: value2;
//... các thay đổi ảnh hưởng thế nào
}
 The selector can either be a grouping of elements, an
identifier, class, or single HTML element

3 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Attaching a Style Sheet
 Attach a style sheet to a HTML page by adding the code to the
<head> section. There are 4 ways to do.
 Inline Style Sheet: Used directly within HTML tags áp dụng cho 1 phần tử
đơn lẻ (viết trực tiếp vào
 <p style="color: red">Some Text</p> phần tử đó)
 Internal Style Sheet: Best used to control styling on one page
 <style type="text/css"> Viết trực tiếp trong 1 file html
h1 {color: red}
</style>
 External Style Sheet: Best used to control styling on multiple pages
 <link rel="stylesheet" type="text/css"
media="all" href="css/styles.css" />
 Inside another CSS file:
 @import url(coolblue.css);

4 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Rendering Engine Flow

5 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Selectors

6 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Element/Tag Selector
 Specify the style(s) for a single HTML element type
 body { selector - áp dụng rule vào đâu
margin: 0; 1 rule = seletor+declaration
padding: 0;
border-top: 1px solid #ff0;
}
 Grouping elements: allows you to specify a single style for
multiple elements at one time
 h1, h2, h3, h4, h5, h6 {
font-family: "Trebuchet MS", sans-serif;
}

7 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Identifier (ID) Selector
 Specify the style(s) for element identified by its ID
 <p id="first-intro">Introduction text</p>

 #first-intro {
border-bottom: 2px dashed #fff;
}

ID dùng tham chiếu trong css


ID của phần tử trong html phải là duy nhất
Theo quy ước, k dùng dấu cách, dùng dấu gạch ngang, gạch chân

8 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
cùng 1 class có thể có nhiều phần tử, 1 phần tử có thể có
Class Selector nhiều class

 Specify the style(s) for element(s) of user-defined classes


 <p class="intro">Introduction text</p>
 .intro {
font: 12px verdana, sans-serif;
margin: 10px;
}
 An element can use multiple classes:
 <p class="intro primary animated">…</p>
 Identifier or class?
 An identifier is specified only once on a page and has a higher
inheritance specificity than a class
 A class is reusable as many times as needed in a page
 Use identifiers for main sections and sub-sections of your
document gán nhiều class: dùng dấu cách
trong tên class: dùng dấu cách

9 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Element with Class or ID Selector
 Specify the style(s) for elements of a type, and identified
by a class or ID at the same time
 p.intro { } vừa có tag là p vừa có tag là intro
 p#first-intro { } thẻ p có id là first intro
 p.intro#first-intro { }
 p.intro.primary { }
 p.intro.primary#first-intro { }
 .intro#first-intro { }

10 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Child Selector
 Specify the style(s) for child element(s) of another
 body > h1 {
font-size: 2rem;
}
 #navigation > p {
line-height: 20px;
}

11 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Descendant Selector
 Specify the style(s) for descendant element(s) of another
 body h1 {
font-size: 2rem;
}
 #navigation p {
line-height: 20px;
}

12 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Adjacent Sibling Selector
 Specify the style(s) for element that is directly after
another
 p.intro + h1 {
font-size: 2rem;
}
 #navigation + p {
line-height: 20px;
}

13 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
General Sibling Selector
 Specify the style(s) for sibling element(s) of another
 p.intro ~ h1 {
font-size: 2rem;
}
 #navigation ~ p {
line-height: 20px;
}

14 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Attribute Selector
 Specify the style(s) for element(s) with the specified
attribute and value
 Elements with target attribute
 a[target] { }
 Elements whose target attribute value is “_blank”
 a[target="_blank"] { }
 Elements whose title attribute value contains “flower”
 a[title~="flower"] { } (value needs be whole word)
 a[title*="flower"] { } (value doesn’t need to be whole word)
 Elements whose title attribute value begins with “flower”
 a[title^="flower"] { }
 Elements whose title attribute value ends with “flower”
 a[title$="flower"] { }

15 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Universal Selector
 Specify the style(s) for all elements
 * {
color: gray;
}
 #navigation * {
color: blue;
}

16 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
The Power of Cascade
 When multiple styles or style sheets are used, they start
to cascade and sometimes compete with one another
due to CSS’s inheritance feature
 Any tag on the page could potentially be affected by any
of the tags surrounded by it

 So, which one wins? Nearest ancestor wins:


 Inline style or directly applied style
 The last style sheet declared in the <head> section

17 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Inheritance
 Inheritance means CSS properties applied to one tag are
passed on to nested tags
 Only applied to properties whose value is inherit
 <body style="font-family: Arial">
<p>This text will be Arial as well</p>
</body>

 Inherited property groups: font, spacing, text, list,


visibility,…
 Non-inherited property groups: layout, box, background,
alignment,…

18 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Precedence
 By
ascending
order

19 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Style tables as the followings. Pay attention to header
row, odd/even rows, row on hover, “TYPE” column.

20 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Text Formatting

21 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Text Color
 Give color values to color property
 color: red;
 color: #0f0;
 color: #00ff00;
 color: #00ff0080;
 color: rgb(0, 127, 255);
 color: rgba(0, 127, 255, 0.5);
 color: hsl(120, 100%, 80%);
 color: hsla(120, 100%, 80%, 0.5);

22 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Text Properties
 text-align: left|right|center|justify;
 vertical-align: top|bottom|middle|baseline;
 text-decoration: underline|overline|line-through;
 text-transform: uppercase|lowercase|capitalize;

 text-indent: 20px;
 letter-spacing: 5px;
 word-spacing: 15px;
 line-height: 1.2;

23 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Font Properties
 font: 15px Arial, sans-serif;
 font: italic small-caps bold 12px/1.2 Times;

 font-style: normal|italic;
 font-variant: normal|small-caps;
 font-weight: normal|bold|bolder|lighter|200|400|700;
 font-size: xx-small|x-small|smaller|small|
medium|large|15px, 1em, 1rem;
 line-height: 1.2;
 font-family: "Times New Roman", Times, serif;

24 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
CSS Length Units
 Absolute units:
 mm, cm, in: millimeters, centimeters, inches
 pt: points (1pt = 1/72 of 1in)
 px: pixels
 pc: picas (1pc = 12pt)
 Relative units:
 em: relative to the font-size of the element (2em means 2
times the size of the current font)
 rem: relative to the font-size of the root element
 %: relative to the parent element
 vw, vh: percentage relative to the browser window

25 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Background Styling

26 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Background Color
 Give color values to background-color property
 background-color: red;
 background-color: #00ff00;
 background-color: #00ff0080;
 background-color: rgb(0, 127, 255);
 background-color: rgba(0, 127, 255, 0.5);
 background-color: hsl(120, 100%, 80%);
 background-color: hsla(120, 100%, 80%, 0.5);

27 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Background Image
 background: url(leaves.jpg) no-repeat top left;

 background-image: url(leaves.jpg);
 background-repeat: no-repeat|repeat|repeat-x|
repeat-y;
 background-position: left|right|center|20%|10px
top|center|bottom|30%|20px;
 background-size: auto|cover|contain|50%;

 background-origin: padding-box|border-box|
content-box;
 background-clip: border-box|padding-box|
content-box;
 background-attachment: scroll|fixed|local;
28 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Multiple Background Images
 Possible to put multiple images together in one background
 .multi-bg {
background-image: url(decoration.png),
url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top,
right bottom, left top;
}

29 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Inline Image
 Images can be embedded directly into CSS with Base64
encoding:
 background-image:
url(data:image/gif;base64,R0lGODlhEAAQAMQA
AORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/
XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAos
J6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAn
QKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm
2hB0SlBCBMQiB0UjIQA7);

30 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Image in Text Background
 Currently CSS has no properties for image in text background
 Use the following trick:
 .text {
color: transparent;
background-image: url(leaves.png);
-webkit-background-clip: text;
}

 Attn: background-clip property is standard, but text value is not,


hence use -webkit- prefix for WebKit-based browsers (Chrome, Edge,
Safari,…)
31 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Backdrop as Background
 With backdrop-filter property:
 backdrop-filter: blur(2px);
 backdrop-filter: contrast(40%);
 backdrop-filter: grayscale(30%);
 backdrop-filter: brightness(60%);
 backdrop-filter: drop-shadow(4px 4px 10px blue);
 backdrop-filter: hue-rotate(120deg);
 backdrop-filter: invert(70%);
 backdrop-filter: opacity(20%);
 backdrop-filter: sepia(90%);
 backdrop-filter: saturate(80%);
 Multiple filters possible:
 backdrop-filter: blur(4px) saturate(150%);

32 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Box Model

33 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
inline element: hình dạng không cố định
box model: có vị trí, kích thước
Introduction
lề, điều chỉnh để cách với phần tử khác

viền

có thể chỉnh được kích thước

chứa nội dung


phần tử con

 All HTML elements can be considered as boxes


 The box model is a box consisting of: kích thước của phần tử
 Margin: Clears an area outside the border, and is transparent.
 Border: Goes around the padding and content.
 Padding: Clears an area around the content, and is transparent.
 Content: Where text and child elements appear.

34 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Box Sizing Modes
 box-sizing: content-box|border-box;

 content-box:
 Default mode mặc định
 Width and height properties include only the content
 Actual size (w/h) = content + paddings + borders + margins
 width, height = content size
 border-box:
 Width and height properties include content, padding and
border
 Actual size (w/h) = content + margins
w/h + margins

 width, height = content + paddings + borders


35 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Width and Height Properties
 Size of elements are controlled by:
 width: 200px|20em|30rem|40%|
auto|fit-content;
 height: 100px;
 max-width, min-width: 500px|80%;
 max-height, min-height: 500px;
 calc() function:
 width: calc(10px + 100px);
 max-width: calc(100% - 30px);
 height: calc(2em * 5);
 Make sure that operators (+, -, *, /) are surrounded by
whitespace
36 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Paddings
 padding: auto;
 padding: 5px;
 padding: 10px 2rem;
 padding: 10px 0 1.2em 1rem;

 padding-top: 2px;
 padding-left: 2rem;

37 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Margins
 margin: auto;
 margin: 5px;
 margin: 10px 2rem;
 margin: 10px 0 1.2em 1rem;

 margin-top: 2px;
 margin-left: 2rem;

38 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Margin Collapse
 When 2 or more vertical margins meet, they will collapse
to form a single margin
 The height of this combined margin is the largest of them
 Only happens if there are no borders or padding separating the
margins

 Margin collapse applies in 2 cases


 2 or more block elements are stacked one above the other
 One block element is contained within another block element

39 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Margin Collapse for Stacked Elements

Before After

Content Margins collapse to Content


Area form a single margin Area

margin-bottom: 30px margin-bottom: 30px

margin-top: 20px
Content
Content Area
Area

40 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Margin Collapse for Contained Elements
Margins
Before After
collapse to
form a single
margin-top: 30px margin margin-top: 30px

margin-top: 20px
Content Area
Content Area

Inner block element

Containing (outer)
block element

41 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Create a layout
as in the figure
using only
<div>
elements

42 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Border Styling

43 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Border Color
 border-color: red;
 border-color: red #f29 rgb(0, 127, 255) blue;
 border-color: red blue;

 border-top-color: #00ff0080;
 border-right-color: rgba(0, 127, 255, 0.5);
 border-bottom-color: rgb(0, 127, 255);
 border-left-color: #00ff00;

44 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Border Style
 border-style: solid|dotted|dashed|double|groove|
inset|outset;
 border-style: solid dotted groove double;
 border-style: solid dashed;
 border-left-style: solid;

 border-width: 2px|medium|thick|thin;
 border-width: 1px 0 5px thin;
 border-width: 2px thin;
 border-right-width: 3px;

45 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Border Shorthands
 border: 5px solid red;
 border-top: 2px dotted #25f;

46 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Rounded Corners
 border-radius: 5px|30%;
 border-radius: 2px 1rem 10% 3em;
 border-radius: 2px 3rem 0 4em / 1rem 2px 0 10%;

 border-top-left-radius: 10px;
 border-top-right-radius: 10px 30%;

47 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Border Image
 border-image: url(border.png) 30 round;

 border-image-source: url(border.png);
 border-image-slice: 30 20% fill 10;

 border-image-width: 10px;
 border-image-repeat: repeat|round|stretch|space;

48 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Outline
 An outline is a line that is drawn just outside the border
edge of the elements
 Generally used to indicate focus or active states of the
elements such as buttons, links, form fields
 Outlines don’t take up space, may overlap other elements
 Unlike borders, an outline is the same on all sides
 Outlines may be non-rectangular, but you cannot create
circular outlines
 outline: 2px dotted green;
 outline-width: 1px|thick|thin|medium;
 outline-style: solid|dotted|dashed|ridge;
 outline-color: gray;
 outline-offset: 10px;

49 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Positioning & Display

50 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Positioning Methods
 position property:
 static (default): Elements render in order, as they appear in
the document flow
 absolute: Element is positioned relative to its first
positioned (not static) ancestor element
 fixed: Element is positioned relative to the browser window
 relative: Element is positioned relative to its normal
position
 sticky: Element is positioned based on the user’s scroll
position
 position:absolute|relative|fixed|sticky
(except static) elements are called positioned

51 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
position: static
 div.info {
position: static;
border: 3px solid #73AD21;
}
 <div class="info">
This div element has position: static;
</div>

52 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
position: relative
 div.info {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
 <div class="info">
This div element has position: relative;
</div>

53 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
position: fixed
 div.info {
position: fixed;
top: 10px;
right: 20px;
width: 300px;
border: 3px solid #73AD21;
}
 <div class="info">
This div element has position: fixed;
</div>

54 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
position: absolute
 div.parent {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.child {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

 <div class="parent">This element is relative;


<div class="child">This element is absolute;</div>
</div>

55 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
position: sticky
 div.info {
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
 <div class="info">
This element is sticky!
</div>

56 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
z-Index
 z-index property specifies the stack order of an element
 Element with greater stack order is always in front of an
element with a lower stack order
 Only works on positioned elements
 img {
position: absolute;
left: 0px;
top: -20px;
z-index: -1;
}
 <div style="position: relative">
<h1>The z-index Property</h1>
<img src="w3css.gif" width="100" height="140">
</div>

57 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Display Methods
 display property:
 inline: Element is inline (like <span>), any width and
height properties have no effect
 block: Element starts a new line and takes up the whole
width (like <div>)
 inline-block: Element is inline, but can take width and
height properties
 none: Element is not displayed
 list-item: Element behaves like a <li>
 grid: Element is a block-level grid container (discussed later)
 flex: Element is a block-level flex container (discussed later)
 table, table-cell, table-row, table-column,…

58 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Visibility Methods
 visibility property:
 visible: Element is displayed
 hidden: Element is hidden

 “visibility: hidden” vs “display: none”:


 visibility: hidden
 Takes up space in the layout
 Children are still visible if they have “visibility: visible”
 display: none
 Does not take up space
 Removes the element completely, including all children

59 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Float Methods
 Make elements float to one side of its container
 float: left|right;
 Example:
 img {
float: right;
}

60 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Clearing Floats
 Avoid floating elements on one or both sides
 clear: left|right|both;

61 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Clearfix
 Problem: If an element
is taller than the
element containing it,
and it is floated, it will
“overflow” outside of
its container
 Solution: add
“overflow:auto”
to the containing
element

62 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Create a page with the following layout

Fixed header

Panel
normally
hidden, and
shown when
mouse
pointer comes
over the
“hamburger
button”

63 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Pseudo-classes

64 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 Pseudo-classes select regular elements but under certain
conditions

 Types of pseudo-classes:
 Dynamic pseudo-classes
 State pseudo-classes
 Range pseudo-classes
 Structural pseudo-classes
 Matching pseudo-classes
 Other pseudo-classes

65 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Dynamic Pseudo-classes
 Unvisited link:
 a:link
 Visited link:
 a:visited
 Selected link:
 a:active
 Mouse-over:
 :hover
 Focused element:
 :focus

66 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
State Pseudo-classes
 Checked box/radio:
 input:checked
 Read-only control:
 input:read-only
 Not-read-only control:
 input:read-write
 Disabled control:
 :disabled
 Enabled control:
 :enabled

67 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Range Pseudo-classes
 First child:
 :first-child
 Last child:
 :last-child
 nth child:
 :nth-child(n [of selector])
 p:nth-child(5)
 p:nth-child(2 of .highlighted)
 p:nth-child(odd)
 p:nth-child(even)
 p:nth-child(2n+1)
 nth last child:
 :nth-last-child(n)
 nth child of type:
 :nth-of-type(n)
 nth last child of type:
 :nth-last-of-type(n)
68 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Structural Pseudo-classes
 Only child:
 :only-child
 Only of type:
 :only-of-type
 Root:
 :root
 Empty:
 :empty
 Target element:
 :target

69 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Matching Pseudo-Classes
 Negation: elements not matching the given selector
 :not(.intro) { }
 .intro:not(:first-child) { }
 p:not(.intro):not([title^="flower"]) { }
 Matches-any: elements matching one of the given
selectors
 :is(header, .intro, :first-child) a { }
 .button:is(a, button) { }
 p:is(.header, .footer):not(.dark) { }
 Containment: elements containing specific children
 h1:has(p) { }
 h1:has(h2):has(> p) { }
70 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercises
 Create a button group that looks like the figure
 Create a menubar with dropdown submenus

71 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Pseudo-elements

72 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 Pseudo-elements effectively create new elements that
are not specified in the markup of the document and can
be manipulated much like a regular element
 Pseudo-elements:
 ::before
 ::after
 ::first-letter
 ::first-line

73 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
::before and ::after
 Insert some content before and after the content of the
specified elements
 .intro::before {
content: "Read this:";
display: block;
color: green;
}
.intro::after {
content: "End of introduction";
display: block;
color: yellow;
}

74 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
::first-letter and ::first-line
 Used to add a style to the first letter or the first line of the
specified selector
 p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
 p::first-line {
color: #ff0000;
font-variant: small-caps;
}

75 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Style a paragraph as in the following:

76 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Effects

77 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Text Shadow
 Syntax: text-shadow: x y b c;
 x = horizontal offset
 x < 0: left of the text
 x > 0: right of the text
 y = vertical offset
 y < 0: above the text
 y > 0: below the text
 b = blur radius
 c = shadow color

 Examples:
 text-shadow: 2px 3px 5px gray;
 text-shadow: 1px 1px 1px #000, 3px 3px 5px blue;

78 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Box Shadow
 Syntax: box-shadow: [inset] x y b c;
 x = horizontal offset
 x < 0: left of the box
 x > 0: right of the box
 y = vertical offset
 y < 0: above the box
 y > 0: below the box
 b = blur radius
 c = shadow color

 Examples:
 box-shadow: 2px 3px 5px gray;
 box-shadow: 1px 1px 1px #000, 3px 3px 5px blue;

79 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Opacity
 Opacity makes the affected elements transparent

80 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Filters
 More effects with filter property:
 opacity(0.5)
 blur(5px)
 contrast(200%)
 grayscale(80%)
 invert(70%)
 saturate(30%)
 sepia(60%)
 brightness(0.4)
 hue-rotate(90deg)
 drop-shadow(2px 3px 5px red)
 Examples:
 filter: blur(5px);
 filter: contrast(175%) blur(3px) grayscale(30%);
81 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Cursor
 Specifies the cursor type to be shown when user moves the pointer over
the element
 cursor: default | none | context-menu | help | pointer
| progress | wait | cell | crosshair | text |
vertical-text | alias | copy | move | no-drop | not-
allowed | grab | grabbing | e-resize | n-resize | ne-
resize | nw-resize | s-resize | se-resize | sw-resize
| w-resize | ew-resize | ns-resize | nesw-resize |
nwse-resize | col-resize | row-resize | all-scroll |
zoom-in | zoom-out | url(cursor-image-file)

82 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Create a button with shadow and pressed effect on
mouse click

83 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Gradients

84 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Gradients
 Gradients can be used in place of images, which can be:
 background-image, border-image-source, list-
style-image, cursor
 Types:
 Linear
 Radial
 Conic
 Examples:
 background-image: linear-gradient(red, #2f8,
orange);
 border-image-source: radial-gradient(#f88,
green);
 list-style-image: conic-gradient(violet,
blue);

85 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Linear Gradients: Direction
 background: linear-gradient(blue,
pink);

 background: linear-gradient(to right,


blue, pink);

 background: linear-gradient(to bottom


right, blue, pink);

 background: linear-gradient(70deg,
blue, pink);
86 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Linear Gradients: Color Stops
 background: linear-gradient(red, yellow,
blue, orange);

 background: linear-gradient(to left, lime


28px, red 77%, cyan);

 background: linear-gradient(to bottom


left, cyan 50%, palegoldenrod 50%);

87 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Radial Gradients
 background: radial-gradient(red,
blue);

 background: radial-gradient(red
10px, yellow 30%, #1e90ff 50%);

 background: radial-gradient(at 0%
30%, red 10px, yellow 30%, #1e90ff
50%);

88 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Conic Gradients
 background: conic-gradient(red, blue);

 background: conic-gradient(at 0% 30%,


red 10%, yellow 30%, #1e90ff 50%);

 background: conic-gradient(from 45deg,


red, orange 50%, yellow 85%, green);

89 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Repeating Gradients
 Use repeating-linear-gradient(), repeating-radial-
gradient(), and repeating-conic-gradient() instead

 background: repeating-linear-gradient(-
45deg, red, red 5px, blue 5px, blue 10px);

 background: repeating-radial-
gradient(#e66465, #9198e5 20%);

90 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Multiple Gradients
 background:
radial-gradient(
rgba(255, 0, 0, 0.8),
rgba(255, 255, 0, 0.8),
rgba(30, 144, 255, 0.8)),
repeating-linear-gradient(45deg,
rgba(0, 0, 255, 1),
rgba(0, 0, 255, 1) 5px,
rgba(255, 255, 255, 0) 5px,
rgba(255, 255, 255, 0) 10px);

91 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Text Gradients
 Currently CSS has no properties for text gradients
 Use the same trick as for image in text background:
 .text {
color: transparent;
background-image: linear-gradient(
to right, red, blue, green);
-webkit-background-clip: text;
}

92 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Create a background with gradients as in the following

93 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Transformations

94 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
2D Transformations
 Use transform property with following methods
 translate(dx, dy)
 translateX(dx)
 translateY(dy)
 rotate(ang)
 scale(sx, sy)
 scaleX(sx)
 scaleY(sy)
 skew(angX, angY)
 skewX(ang)
 skewY(ang)
 matrix(m11, m12, m21, m22, dx, dy)
 transform-origin: changes the position on transformed
elements
95 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Examples
 transform: rotate(45deg) scale(2);

 transform: rotate(45deg);
transform-origin: 0 40%;

96 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
3D Transformations
 Use transform property with following methods
 translate3d(dx, dy, dz)
 rotate3d(x, y, z, a)
 scale3d(sx, sy, sz)
 perspective(d)
 matrix3d(...)

97 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Transitions

98 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Transitions
 Effects that let an element gradually change from one style to
another
 Example
 div {
width: 200px;
transition: width 2s;
}

div:hover {
width: 300px;
}
 Multiple transitions at once:
 transition: width 2s, height 1s, transform 1.5s;

99 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Detailed Properties and Shorthand
 Detailed:
 transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

 Equivalent shorthand:
 transition: width 1s linear 2s;

100 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
transition-timing-function
 linear|ease|ease-in|ease-out|ease-in-out
 steps(steps, start|end)
 cubic-bezier(n, n, n, n)

101 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Animatable Properties
 Not all properties can be animated
 In general, the animatable properties are related to:
 Color
 Background
 Border
 Outline
 Position
 Margin, padding, size
 Text
 Opacity
 Transforms, filters

102 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercises
 Create a button that changes its background color, text
color, border with transitions on mouse events

103 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Animations

104 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 Animations let an element gradually change from one style to
another
 Possible to change multiple CSS properties, multiple times
 Animations vs transitions
 Transitions require a trigger
(hover, focus,…) to run;
animations don’t
 Transitions are limited to an
initial and final state;
animation can include many
intermediate states (called
keyframes)
 Animations can loop, be
started, stopped, paused
dynamically

105 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Keyframes
 Keyframes hold the styles the element has at certain
times
 Example
 @keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

div {
animation-name: example;
animation-duration: 4s;
}

106 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Timing
 @keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
 Attn:
 from = 0%
 to = 100%

107 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Play Options
 Delayed animation:
 animation-delay: 2s;
 If using negative value, the animation will start as if it had already been playing
a while
 Repeated animation:
 animation-iteration-count: 3;
 animation-iteration-count: infinite;
 Animation play direction:
 animation-direction: normal; (forwards - default)
 animation-direction: reverse; (backwards)
 animation-direction: alternate; (fwds then bwds)
 animation-direction: alternate-reverse; (bwds then fwds)
 Timing functions
 animation-timing-function is used similarly to transition-
timing-function

108 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Animation Shorthand
 Shorthand
 animation: example 5s linear 2s infinite alternate;

 Equivalence
 animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;

109 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Pausing and Resuming an Animation
 Animation play state:
 animation-play-state: paused | running
 Example:
 div {
animation-name: example;
animation-duration: 4s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

div:hover {
animation-play-state: paused;
}
110 AC2070: Web Design & Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Create and style a bouncing ball with animation as in the
following:

111 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Media Queries and Responsive Design
Cần biết thông tin về thiết bị user dùng Thiết kế đáp ứng
- cho phép đáp ứng các thiết bị khác nhau
(xoay ngang dọc thì điều chỉnh theo)

112 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Motivation
 Document should look good on any device (desktop, tablet,
phone) → responsive (dynamic) layouts
 Solution: Use CSS to shrink, enlarge, hide or move content in
order to look good on any screen
 How to do:
 Setting viewport:
 <meta name="viewport" content="width=device-width,
initial-scale=1.0">
 Do not rely on a particular viewpoint
 Use relative dimensions (%): width, height
 Use relative units (em, rem)
 Use flexbox for layout
 Use media-queries to apply different styles to large/small screens

113 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Media Queries
 Use @media to apply CSS style only if a condition is met
 @media only screen and (max-width:500px) {
#div1 {
width: 100%;
}
}
 @media only screen and (min-width:500px) { }
 @media only screen and (orientation:landscape) { }

114 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Media Query Example
 body { display: flex; }
#left { width: 25%; }
#main { width: 75%; }

@media screen and (max-width:


800px) {
body {
flex-direction: column;
}
#left, #main {
width: 100%;
}
}

 <section id="left">…</section>
<section id="main">…</section>

115 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Mobile-First Design
 Mobile Internet use passed desktop in Oct 2016
 Mobile-first design = design for mobile before designing
for desktop or any other device
 This will make the page display faster on smaller devices
 Ex: Instead of changing styles when the width gets smaller
than 768px, we should change the design when the width gets
larger than 768px

116 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Typical Device Breakpoints
 Extra small devices: phones (≤ 600px)
 @media only screen and (max-width: 600px) { }
 Small devices: portrait tablets and large phones (≥ 600px)
 @media only screen and (min-width: 600px) { }
 Medium devices: landscape tablets (≥ 768px)
 @media only screen and (min-width: 768px) { }
 Large devices: laptops, desktops (≥ 992px)
 @media only screen and (min-width: 992px) { }
 Extra large devices: large laptops and desktops (≥ 1200px)
 @media only screen and (min-width: 1200px) { }

117 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
General Syntax
 Syntax:
 @media [not|only] mediatype and (mediafeature
and|or|not mediafeature) { }
 mediatype: all|screen|print|speech
 mediafeature: width|max-width|min-width|
orientation|...
 Examples
 @media only screen and (orientation:landscape) { }
 @media print { }
 @media screen and (max-width: 900px) and
(min-width: 600px), (min-width: 1100px) { }
(When the width is between 600px and 900px, or above 1100px)

118 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Conditional CSS Attachment
 External CSS stylesheets can be applied with conditions
 <link rel="stylesheet" type="text/css"
href="screen.css" media="screen" />
 <link rel="stylesheet" type="text/css"
href="print.css" media="print" />
 <link rel="stylesheet" type="text/css"
href="main_1.css" media="screen and (max-
device-width: 480px)" />

119 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Design the following responsive page layout with a
menubar and a sidebar

120 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Flexbox Layout

121 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 Flexbox (flexible box) aims at providing a more efficient way to
define layouts
 More flexibility to support complex page structures
 A flexbox consists of a container (parent) and its items (children)
container items
main
axis

 Display methods: cross axis


 .container {
display: flex; /* or inline-flex */
}

122 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Container: flex-direction
 row (default): left to right in ltr; right to left in rtl
 row-reverse: right to left in ltr; left to right in rtl
 column: same as row but top to bottom
 column-reverse: same as row-reverse but bottom to
top

123 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Container: flex-wrap
 nowrap (default): all items will be on one line
 wrap: items will wrap onto multiple lines, from top to bottom
 wrap-reverse: items will wrap onto multiple lines from
bottom to top

 Shorthand for flex-direction and flex-wrap:


 flex-flow: column-reverse wrap;

124 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Container: justify-content
 flex-start (default), flex-end:
items packed toward the start/end of
the flex direction
 start, end: same as flex-
start/flex-end, but wrt the
writing-mode direction
 left, right, center: items are
packed toward the left/right/center
of the container
 space-between, space-
around, space-evenly: items
evenly distributed in the line

125 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Container: align-items
 stretch (default): items stretch to fill
the container (still respect min-
width/max-width)
 flex-start, start, self-
start: items placed at the start of the
cross axis. The difference of them is
about respecting the flex-
direction or the writing-mode rules
 flex-end, end, self-end: items
placed at the end of the cross axis
 center: items centered in the cross-
axis
 baseline: items aligned such as their
baselines align

126 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Container: align-content
 normal (default): items packed in their
default position
 flex-start, start: items packed to
the start of the container, flex-start
wrt the flex-direction, while start
wrt the writing-mode direction
 flex-end, end: items packed to the
end of the container
 center: items centered in the container
 stretch: lines stretch to take up the
remaining space
 space-between, space-around,
space-evenly: items evenly
distributed

127 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Container: gap, row-gap, column-gap
 To control the gap
between rows and
columns
 Examples:
 gap: 10px
 gap: 5% 0.5rem
 row-gap: 2em
 column-gap: 10vh

128 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Items: order
 Helps to alternate the
default order
 Items with same value are
laid out in their source
order
 Default value: 0

 .item {
order: 5;
}

129 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Items: flex-grow
 Defines the ability for an item to grow if necessary: how
much the remaining space is distributed to each item
 Value serves as a proportion: an item set to 2 would take
up twice as much as space as an item set to 1
 Default value: 0

130 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Items: flex-basis
 Defines the default size of an element before the
remaining space is distributed
 Can be a length: 20%, 100px, 10rem
 0: the extra space around content isn’t factored in
 auto: the extra space is distributed based on its flex-grow
value

131 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Items: flex-self
 Allows the default alignment (or the one specified by
container’s align-items) to be overridden for
individual flex items
 See align-items for the values

132 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Multi-column Layout

133 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction
 Allows to define multi-column layouts
 Basic example
 .container {
column-count: 3;
}

134 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Layout Options
 Minimum width of columns:
 column-width: 100px;
 Shorthand for column-width and column-count:
 columns: 100px 3;
 Gap between columns
 column-gap: 40px;
 Style of the rule between columns
 column-rule: 2px solid red;
 column-rule-style: solid|dotted|dashed|...;
 column-rule-color: red;
 column-rule-width: 2px;
 Column filling mode:
 column-fill: balance|auto;

135 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Element Span
 Number of columns an element should span across
 column-span: all|none;

column-span: none column-span: all

136 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
More Features

137 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
CSS Variables (aka. Custom Properties)
 Entities that contain specific values to be reused
throughout a document
 Accessible using var(…)
 Case-sensitive

 Example:
 element {
--main-color: brown;
background-color: var(--main-color);
}

138 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Variables in :root pseudo-class
 In order to make the variables anywhere throughout the
document
 :root {
--color: brown;
--size: 10px;
}

.one {
background-color: var(--color);
}

.two {
--size-2: calc(var(--size) + 5px);
width: calc(var(--size) * 2);
}

139 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Grid Layout
 A 2D grid-based layout system that helps to design grid-
based layouts
 To be self-studied

140 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Even More
 Container queries
 CSS nesting
 Scroll driven animations
 View transitions
 …

141 AC2070: Web Design & Programming


Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology

You might also like