Day 7 - 29/8

CSS

1. z-index: an index specified the order of overlapping elements (only works with"positioned" ones and "flex" ones). An element with greater z-index will overlap those with less z-index. Two everlapping elements without z-index will display with the last one (compare the positions in CSS file) on top

2. .clearfix::after {content: ""; clear: both; display: table;} : to fix when a floating element is higher than the container which leads to overflow

3. Four ways to vertically center

• set line-height = height and use text-align

.class { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; }

• when there are multiple lines

.class p { line-height: 1.5; display: inline-block; vertical-align: middle; }

• using position and transform

.center { height: 200px; position: relative; border: 3px solid green; }

.center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

• using flexbox

.center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }

1. opacity: the transparency of an element from 0.0 to 1.0; when opacity is applied to background of an element, all the child will be affected, instead, we use RGBA color to set opacity with the last index is opacity. (ex: background: rgba(76, 175, 80, 0.3))

2. Attribute selector: to style elements with specific attribute

• [attribute] : elements have this attribute: a[target]

• [attribute = ""]: elements have specific value: a[target="_blank"]

• [attribute~="value"]: elements has attribute with an exactly specified word in value with not even one sign next to it: [title~="flower"]

• [attribute|="value"]: value can follow by a "-" : [class|="top"] 'top-student' still counted

• [attribute^="value"]: value start with a specified value, even with no space between [class^="top"]

• [attribute$="value"]: value end with a specified value, even with no space between [class$="test"]

• [attribute*="value"]: value contain a specified value, even with no space between [class*="te"]

Useful in styling form without using class