Learning CSS

Box Model

Summary

• Mọi thứ trong CSS đều được hiển thị dưới dạng box.
• Có 2 cách để control size của box: extrinsic sizing (control dựa vào thuộc tính width/heigh của box) vs intrinsic sizing (control dựa vào size của content bên trong)
• Order: Content box ⇒ Padding ⇒ Border ⇒ Margin
• Key properties: box-sizing, display, position, grid/flex layout

Link to original

Selectors

Help to apply CSS to an element.

• Normal selector: .my-css-rule
• Universal selector: *
• Type selector: eg: section - HTML element directly
• Class/ ID
• Attribute selector: eg: [data-type='primary']
• Grouping selectors: strong, em, .my-class, [lang] { color: red }
• Pseudo-classes: a:hover, p:nth-child(even)
• Pseudo-elements: .my-element::before/after - decorate purpose, ::mark, ::selection
• Combinators:
  • Descendant combinator: p > strong
  • Next sibling combinator: + , eg: .top * + *
• Compound: a.my-class

The cascade

Summary

• Sau khi trình duyệt load HTML và CSS, nó sẽ phải Parse CSS. Quá trình này gồm 2 bước quan trọng:
  • (1) Resolve conflicting CSS declarations (cascade)
  • (2) Process final CSS Values
• Resolve conflicting theo thứ tự: Important > Specificity > Source Order
  • Important: Mức độ quan trọng (declarations của User/Author/Browser, có !important hay không, …)
  • Specificity: Mức độ rõ ràng: inline style > ids > classes > element - Tính điểm (eg: (0, 0, 1, 2) ) để so sánh.
  • Source Order: Thứ tự xuất hiện của các declarations.

Link to original

Specificity is a key part of cascade.

Inheritance

Summary

• Inheritance trong CSS tương tự các ngôn ngữ khác. Nếu parent elements không set properties, nó sẽ lấy initial value (được set trong CSS trình duyệt)
• Inheritable properties: color, font-size, font-familty, ..... Non-inheritable properties: padding, margin, border, width, height, animation, ...
• Main related keywords: inherit, initial, unset

Link to original

Color

Summary

• Trong CSS có 2 cách sử dụng color: Numeric colors (Hex, RGB, HSL) và Color keywords (red, green, …).
• Có thể add thêm độ transparency (alpha) vào trong các color trên.
• Được sử dụng với 1 số properties như: border, background, …

Link to original

Sizing Units

Summary

• Các đơn vị sizing trong CSS.
• Numbers & Percentages: Đôi khi là số cụ thể (vd: 24px), đôi khi là tỷ lệ (%), tính dựa trên phần tử cha hoặc giá trị trước đó, như opacity: 0.5 là 50% độ trong suốt.
• Absolute & Relative Lengths: Đơn vị tuyệt đối (cm, mm, px) và đơn vị tương đối (em, rem) thường dùng trong thiết kế responsive, với relative lengths linh hoạt hơn.
• Viewport & Angle Units: Đơn vị theo kích thước viewport (vw, vh) dùng để điều chỉnh theo chiều rộng/chiều cao màn hình; đơn vị góc (vd: rotate(60deg)).

Link to original

Layout

Summary

• display - Xác định cách mà các phần tử bên trong sẽ hiển thị.
  • inline - Các phần tử được hiển thị/ show cạnh nhau
  • block - Mỗi phần tử nằm trên 1 dòng (block)
  • flex - Linh hoạt. Nó sẽ hiển thị các phần tử con theo trục. Các elements bên trong sẽ thành flex items, có thể config custom hiển thị. ⇒ One-dimension layouts
  • grid - Các elements bên trong được bố trí dưới dạng lưới ⇒ Two-dimension layouts
• position - Xác định vị trí cụ thể của 1 elements.
  • static - Mặc định, hiển thị theo document flow.
  • relative - Hiển thị ở vị trí tương đối so với vị trí ban đầu. (control qua top, right, left, bottom)
  • absolute - Hiển thị ở vị trí tuyệt đối so với phần tử cha, hoặc viewport.
  • fixed - Hiển thị cố định ở 1 vị trí so với viewport.
  • sticky - Bình thường sẽ hiển thị như relative, nhưng nếu scroll qua thì sẽ hiển thị như fixed.

Link to original

Flexbox

Flexbox là kỹ thuật thiết kế layout, group items trên 1 chiều.

Grid

2 dimensional layout. Control layout in rows and columns

Logical Properties

Spacing

How to select the best method of spacing elements for the layout method you’re using and the component you’re building.

Pseudo-elements

Pseudo-classes

Borders

A frame for your boxes. Find out how to change the size, style, and color of borders using CSS.

Shadows

Add shadows to text and elements in CSS

Focus

Z-index and stacking contexts

Order in which elements layer on top z-index

Functions

CSS có sẵn nhiều functions. Learn about some of the key functions and how to use them.

Gradients

Type of gradients in CSS →tạo effects.

Animations

Highlight interactive elements, and add interest and fun to your designs

Filters

Blend Modes

Lists

Transitions

Overflow

Cách để control content mà không fit với parent size.

Backgrounds

Style boxes’ background.

Text and typography

Style text.

Resources

• Web.dev CSS Course