Scribd
Upload
7 views

Part 2: CSS: AC2070: Web Design & Programming

Uploaded by

Xuan Huong Nguyen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Part 2: CSS: AC2070: Web Design & Programming

Uploaded by

Xuan Huong Nguyen
Copyright
© © All Rights Reserved
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