Tại sao CSS lại quan trọng ?

CSS thường được sử dụng để can thiệp vào Front-end (Giao diện bên ngoài của Website). CSS thường được sử dụng để tùy biến màu sắc văn bản, font chữ, hình ảnh, bố cục, màu nền,… Với sự hỗ trợ của CSS thì bạn có thể thay đổi, chỉnh sửa những yếu tố trên theo ý muốn một cách đơn giản.

Giúp tạo những đoạn code dễ đọc hơn

Dễ dàng thay đổi

Tiết kiệm được nhiều thời gian

Trang tải nhanh hơn

Chỉnh sửa dễ dàng

Các thuộc tính cơ bản của CSS ?

accent-color	Chỉ định màu cho nhấp chuột giao diện người dùng
align-content	Chỉ định căn chỉnh giữa các dòng bên trong box chứa linh hoạt
align-items	Chỉ định căn chỉnh cho các mục bên trong box chứa linh hoạt
align-self	Chỉ định căn chỉnh cho các mục đã chọn bên trong một box chứa linh hoạt
all	Đặt lại tất cả các thuộc tính (ngoại trừ unicode)
animation	Thuộc tính viết tắt cho tất cả các thuộc tính animation- *
animation-delay	Chỉ định thời gian trễ để bắt đầu animation
animation-direction	Chỉ định xem một hoạt ảnh sẽ được phát tới, lùi hoặc theo các chu kỳ thay thế
animation-duration	Chỉ định thời lượng hoạt ảnh sẽ hoàn thành một chu kỳ
animation-fill-mode	Chỉ định kiểu cho phần tử khi hoạt ảnh không phát (trước khi bắt đầu, sau khi kết thúc hoặc cả hai)
animation-iteration-count	Chỉ định số lần một hoạt ảnh sẽ được phát
animation-name	Chỉ định tên cho hoạt ảnh @keyframes
animation-play-state	Chỉ định hoạt ảnh đang chạy hay bị tạm dừng
animation-timing-function	Chỉ định đường cong tốc độ của hoạt ảnh
aspect-ratio	Chỉ định tỷ lệ co ưa thích của một phần tử
backdrop-filter	Xác định hiệu ứng đồ họa cho khu vực phía sau một phần tử
backface-visibility	Xác định xem có nên nhìn thấy mặt sau của một phần tử khi đối diện với người dùng hay không
background	Thuộc tính viết tắt cho tất cả các thuộc tính background- *
background-attachment	Đặt xem hình nền cuộn với phần còn lại của trang hay được cố định
background-blend-mode	Chỉ định chế độ hòa trộn của mỗi lớp nền (màu / hình ảnh)
background-clip	Xác định khoảng cách nền (màu hoặc hình ảnh) sẽ kéo dài trong một phần tử
background-color	Chỉ định màu nền của một phần tử
background-image	Chỉ định một hoặc nhiều hình nền cho một phần tử
background-origin	Chỉ định vị trí gốc của hình nền
background-position	Chỉ định vị trí của hình nền
background-position-x	Chỉ định vị trí của hình nền trên trục x
background-position-y	Chỉ định vị trí của hình nền trên trục y
background-repeat	Đặt nếu / cách một hình nền sẽ được lặp lại
background-size	Chỉ định kích thước của hình nền
border	Thuộc tính viết tắt cho chiều rộng đường viền, kiểu đường viền và màu đường viền
border-bottom	Thuộc tính viết tắt cho đường viền-dưới-độ rộng, kiểu đường viền-dưới cùng và màu đường viền-dưới cùng
border-bottom-color	Đặt màu của đường viền dưới cùng
border-bottom-left-radius	Xác định bán kính của đường viền góc dưới bên trái
border-bottom-right-radius	Xác định bán kính của đường viền góc dưới bên phải
border-bottom-style	Đặt kiểu của đường viền dưới cùng
border-bottom-width	Đặt chiều rộng của đường viền dưới cùng
border-collapse	Đặt xem các đường viền bảng nên thu gọn thành một đường viền duy nhất hay được tách ra
border-color	Đặt màu của bốn đường viền
border-image	Thuộc tính viết tắt cho tất cả các thuộc tính border-image- *
border-image-outset	Chỉ định số lượng mà vùng hình ảnh đường viền mở rộng ra ngoài hộp đường viền
border-image-repeat	Chỉ định xem hình ảnh đường viền nên được lặp lại, làm tròn hay kéo dài
border-image-slice	Chỉ định cách cắt hình ảnh đường viền
border-image-source	Chỉ định đường dẫn đến hình ảnh được sử dụng làm đường viền
border-image-width	Chỉ định chiều rộng của hình ảnh đường viền
border-left	Thuộc tính viết tắt cho tất cả các thuộc tính border-left- *
border-left-color	Đặt màu của đường viền bên trái
border-left-style	Đặt kiểu của đường viền bên trái
border-left-width	Đặt chiều rộng của đường viền bên trái
border-radius	Thuộc tính viết tắt cho thuộc tính bốn đường viền – * – radius
border-right	Một thuộc tính viết tắt cho tất cả các thuộc tính border-right- *
border-right-color	Đặt màu của đường viền bên phải
border-right-style	Đặt kiểu của đường viền bên phải
border-right-width	Đặt chiều rộng của đường viền bên phải
border-spacing	Đặt khoảng cách giữa các đường viền của các ô liền kề
border-style	Đặt kiểu của bốn đường viền
border-top	Thuộc tính viết tắt cho đường viền-trên cùng-độ rộng, kiểu đường viền trên cùng và màu viền-trên cùng
border-top-color	Đặt màu của đường viền trên cùng
border-top-left-radius	Xác định bán kính của đường viền góc trên bên trái
border-top-right-radius	Xác định bán kính của đường viền góc trên cùng bên phải
border-top-style	Đặt kiểu của đường viền trên cùng
border-top-width	Đặt chiều rộng của đường viền trên cùng
border-width	Đặt chiều rộng của bốn đường viền
bottom	Đặt vị trí các phần tử, từ cuối phần tử mẹ của nó
box-decoration-break	Đặt hành vi của nền và đường viền của một phần tử tại ngắt trang hoặc đối với các phần tử trong dòng, tại ngắt dòng.
box-shadow	Gắn một hoặc nhiều bóng vào một phần tử
box-sizing	Xác định cách tính chiều rộng và chiều cao của một phần tử: chúng có bao gồm phần đệm và đường viền hay không
break-after	Chỉ định liệu ngắt trang, cột- hoặc ngắt vùng có xảy ra sau phần tử được chỉ định hay không
break-before	Chỉ định liệu ngắt trang, cột- hoặc ngắt vùng có xảy ra trước phần tử được chỉ định hay không
break-inside	Chỉ định xem liệu ngắt trang, cột- hoặc ngắt vùng có xảy ra bên trong phần tử được chỉ định hay không
caption-side	Chỉ định vị trí của chú thích bảng
caret-color	Chỉ định màu của con trỏ (dấu mũ) trong đầu vào, vùng văn bản hoặc bất kỳ phần tử nào có thể chỉnh sửa
@charset	Chỉ định mã hóa ký tự được sử dụng trong biểu định kiểu
clear	Chỉ định điều gì sẽ xảy ra với phần tử bên cạnh phần tử nổi
clip	Cắt một phần tử được định vị tuyệt đối
color	Đặt màu cho văn bản
column-count	Chỉ định số cột mà một phần tử sẽ được chia thành
column-fill	Chỉ định cách điền vào các cột, cân bằng hay không
column-gap	Chỉ định khoảng cách giữa các cột
column-rule	Thuộc tính viết tắt cho tất cả các thuộc tính column-rule- *
column-rule-color	Chỉ định màu của quy tắc giữa các cột
column-rule-style	Chỉ định kiểu của quy tắc giữa các cột
column-rule-width	Chỉ định chiều rộng của quy tắc giữa các cột
column-span	Chỉ định số lượng cột mà một phần tử sẽ trải qua
column-width	Chỉ định chiều rộng cột
columns	Thuộc tính viết tắt cho chiều rộng cột và số cột
content	Được sử dụng với: before và: after pseudo-element, để chèn gen
counter-increment	Tăng hoặc giảm giá trị của một hoặc nhiều bộ đếm CSS
counter-reset	Tạo hoặc đặt lại một hoặc nhiều bộ đếm CSS
cursor	Chỉ định con trỏ chuột được hiển thị khi trỏ qua một phần tử
direction	Chỉ định hướng văn bản / hướng viết
display	Chỉ định cách một phần tử HTML nhất định sẽ được hiển thị
empty-cells	Chỉ định có hay không hiển thị đường viền và nền trên các ô trống trong bảng
filter	Xác định các hiệu ứng (ví dụ: làm mờ hoặc chuyển màu) trên một phần tử trước khi phần tử đó được hiển thị
flex	Một thuộc tính tốc ký cho các thuộc tính flex-grow, flex-co và các thuộc tính flex-base
flex-basis	Chỉ định độ dài ban đầu của một mục linh hoạt
flex-direction	Chỉ định hướng của các mục linh hoạt
flex-flow	Thuộc tính viết tắt cho hướng uốn và thuộc tính bọc uốn
flex-grow	Chỉ định mục sẽ phát triển bao nhiêu so với phần còn lại
flex-shrink	Chỉ định cách mục sẽ thu nhỏ so với phần còn lại
flex-wrap	Chỉ định xem các mục linh hoạt có nên bọc hay không
float	Chỉ định xem một phần tử có nên nổi sang trái, phải hay không
font	Thuộc tính viết tắt cho kiểu phông chữ, biến thể phông chữ, phông chữ-weight, font-size / line-height và các thuộc tính font-family
@font-face	Quy tắc cho phép các trang web tải xuống và sử dụng phông chữ khác với phông chữ “an toàn cho web”
font-family	Chỉ định họ phông chữ cho văn bản
font-feature-settings	Cho phép kiểm soát các tính năng đánh máy nâng cao trong phông chữ OpenType
@font-feature-values	Cho phép tác giả sử dụng một tên thông thường bằng phông chữ-biến thể-thay thế cho tính năng được kích hoạt khác nhau trong OpenType
font-kerning	Kiểm soát việc sử dụng thông tin kerning (cách các chữ cái được viết cách nhau)
font-language-override	Kiểm soát việc sử dụng glyph dành riêng cho ngôn ngữ trong một kiểu chữ
font-size	Chỉ định kích thước phông chữ của văn bản
font-size-adjust	Duy trì khả năng đọc của văn bản khi xảy ra dự phòng phông chữ
font-stretch	Chọn một khuôn mặt bình thường, cô đọng hoặc mở rộng từ họ phông chữ
font-style	Chỉ định kiểu phông chữ cho văn bản
font-synthesis	Kiểm soát những kiểu chữ bị thiếu (đậm hoặc nghiêng) có thể được trình duyệt tổng hợp
font-variant	Chỉ định xem một văn bản có nên được hiển thị bằng phông chữ viết hoa nhỏ hay không
font-variant-alternates	Kiểm soát việc sử dụng các glyph thay thế được liên kết với các tên thay thế được xác định trong @ font-feature-values
font-variant-caps	Kiểm soát việc sử dụng các glyph thay thế cho các chữ cái viết hoa
font-variant-east-asian	Kiểm soát việc sử dụng các glyph thay thế cho các chữ viết Đông Á (ví dụ: tiếng Nhật và tiếng Trung)
font-variant-ligatures	Kiểm soát các chữ ghép và các dạng ngữ cảnh được sử dụng trong nội dung văn bản của các phần tử mà nó áp dụng
font-variant-numeric	Kiểm soát việc sử dụng các glyph thay thế cho số, phân số và dấu thứ tự
font-variant-position	Kiểm soát việc sử dụng các glyph thay thế có kích thước nhỏ hơn được đặt dưới dạng chỉ số trên hoặc chỉ số dưới liên quan đến đường cơ sở của phông chữ
font-weight	Chỉ định trọng lượng của phông chữ
gap	Thuộc tính viết tắt cho thuộc tính khoảng cách hàng và khoảng cách cột
grid	Thuộc tính viết tắt cho các thuộc tính lưới-mẫu-hàng, lưới-mẫu-cột, khu vực lưới-mẫu, lưới-tự động-hàng, lưới-tự động-cột và thuộc tính lưới-tự động dòng
grid-area	Chỉ định tên cho mục lưới hoặc thuộc tính này là thuộc tính viết tắt cho các thuộc tính lưới-hàng-bắt đầu, lưới-cột-bắt đầu, lưới-hàng-kết thúc và lưới-cột-cuối thuộc tính
grid-auto-columns	Chỉ định kích thước cột mặc định
grid-auto-flow	Chỉ định cách các mục được đặt tự động được chèn vào lưới
grid-auto-rows	Chỉ định kích thước hàng mặc định
grid-column	Thuộc tính viết tắt cho thuộc tính lưới-cột-bắt đầu và thuộc tính lưới-cột-kết thúc
grid-column-end	Chỉ định nơi kết thúc mục lưới
grid-column-gap	Chỉ định kích thước của khoảng cách giữa các cột
grid-column-start	Chỉ định nơi bắt đầu mục lưới
grid-gap	Thuộc tính viết tắt cho thuộc tính lưới-hàng-khoảng cách và lưới-cột-khoảng cách
grid-row	Thuộc tính viết tắt cho thuộc tính lưới-hàng-bắt đầu và thuộc tính lưới-hàng-kết thúc
grid-row-end	Chỉ định nơi kết thúc mục lưới
grid-row-gap	Chỉ định kích thước của khoảng cách giữa các hàng
grid-row-start	Chỉ định nơi bắt đầu mục lưới
grid-template	Thuộc tính viết tắt cho các thuộc tính lưới-mẫu-hàng, lưới-mẫu-cột và thuộc tính vùng lưới
grid-template-areas	Chỉ định cách hiển thị các cột và hàng, sử dụng các mục lưới được đặt tên
grid-template-columns	Chỉ định kích thước của các cột và số lượng cột trong một bố cục lưới
grid-template-rows	Chỉ định kích thước của các hàng trong bố cục lưới
hanging-punctuation	Chỉ định liệu một ký tự dấu câu có thể được đặt bên ngoài hộp dòng hay không
height	Đặt chiều cao của một phần tử
hyphens	Đặt cách tách các từ để cải thiện bố cục của đoạn văn
image-rendering	Chỉ định loại thuật toán sử dụng để chia tỷ lệ hình ảnh
@import	Cho phép bạn nhập một biểu định kiểu vào một biểu định kiểu khác
isolation	Xác định xem một phần tử có phải tạo nội dung xếp chồng mới hay không
justify-content	Chỉ định căn chỉnh giữa các mục bên trong một hộp chứa linh hoạt khi các mục đó không sử dụng hết không gian có sẵn
@keyframes	Chỉ định mã hoạt ảnh
left	Chỉ định vị trí bên trái của một phần tử được định vị
letter-spacing	Tăng hoặc giảm khoảng cách giữa các ký tự trong văn bản
line-break	Chỉ định cách / nếu để ngắt dòng
line-height	Đặt chiều cao dòng
list-style	Đặt tất cả các thuộc tính cho một danh sách trong một khai báo
list-style-image	Chỉ định một hình ảnh làm điểm đánh dấu mục danh sách
list-style-position	Chỉ định vị trí của các điểm đánh dấu mục danh sách (dấu đầu dòng)
list-style-type	Chỉ định loại điểm đánh dấu mục danh sách
margin	Đặt tất cả các thuộc tính ký quỹ trong một khai báo
margin-bottom	Đặt lề dưới cùng của một phần tử
margin-left	Đặt lề trái của một phần tử
margin-right	Đặt lề phải của một phần tử
margin-top	Đặt lề trên của một phần tử
mask	Ẩn các phần của một phần tử bằng cách che hoặc cắt một hình ảnh ở những vị trí cụ thể
mask-clip	Chỉ định vùng mặt nạ
mask-composite	Đại diện cho một hoạt động tổng hợp được sử dụng trên lớp mặt nạ hiện tại với các lớp mặt nạ bên dưới nó
mask-image	Chỉ định một hình ảnh được sử dụng làm lớp mặt nạ cho một phần tử
mask-mode	Chỉ định xem hình ảnh lớp mặt nạ được coi là mặt nạ độ sáng hay mặt nạ alpha
mask-origin	Chỉ định vị trí gốc (khu vực vị trí mặt nạ) của hình ảnh lớp mặt nạ
mask-position	Đặt vị trí bắt đầu của hình ảnh lớp mặt nạ (liên quan đến khu vực vị trí mặt nạ)
mask-repeat	Chỉ định cách lặp lại hình ảnh lớp mặt nạ
mask-size	Chỉ định kích thước của hình ảnh lớp mặt nạ
mask-type	Chỉ định xem phần tử SVG <mask> được coi là mặt nạ độ sáng hay mặt nạ alpha
max-height	Đặt chiều cao tối đa của một phần tử
max-width	Đặt chiều rộng tối đa của một phần tử
@media	Đặt quy tắc kiểu cho các loại phương tiện / thiết bị / kích thước khác nhau
min-height	Đặt chiều cao tối thiểu của một phần tử
min-width	Đặt chiều rộng tối thiểu của một phần tử
mix-blend-mode	Chỉ định cách nội dung của phần tử sẽ kết hợp với nền gốc trực tiếp của nó
object-fit	Chỉ định cách nội dung của phần tử được thay thế sẽ được lắp vào hộp được thiết lập theo chiều cao và chiều rộng đã sử dụng của nó
object-position	Chỉ định căn chỉnh của phần tử được thay thế bên trong hộp của nó
opacity	Đặt mức độ mờ cho một phần tử
order	Đặt thứ tự của mục linh hoạt, liên quan đến phần còn lại
orphans	Đặt số dòng tối thiểu phải để lại ở cuối trang hoặc cột
outline	Thuộc tính viết tắt cho các thuộc tính outline-width, outline-style và outline-color
outline-color	Đặt màu cho đường viền
outline-offset	Thiết lập một đường viền và vẽ nó ra ngoài rìa đường viền
outline-style	Đặt kiểu của một đường viền
outline-width	Đặt chiều rộng của đường viền
overflow	Chỉ định điều gì sẽ xảy ra nếu nội dung tràn hộp phần tử
overflow-wrap	Chỉ định xem trình duyệt có thể ngắt dòng với các từ dài hay không, nếu chúng làm tràn vùng chứa
overflow-x	Chỉ định có cắt các cạnh trái / phải của nội dung hay không, nếu nó làm tràn vùng nội dung của phần tử
overflow-y	Chỉ định có cắt các cạnh trên / dưới của nội dung hay không, nếu nó làm tràn vùng nội dung của phần tử
padding	Một thuộc tính viết tắt cho tất cả các thuộc tính padding- *
padding-bottom	Đặt phần đệm dưới cùng của một phần tử
padding-left	Đặt phần đệm bên trái của một phần tử
padding-right	Đặt phần đệm bên phải của một phần tử
padding-top	Đặt phần đệm trên cùng của một phần tử
page-break-after	Đặt hành vi ngắt trang sau một phần tử
page-break-before	Đặt hành vi ngắt trang trước một phần tử
page-break-inside	Đặt hành vi ngắt trang bên trong một phần tử
paint-order	Đặt thứ tự cách tô một phần tử hoặc văn bản SVG.
perspective	Cung cấp cho một phần tử được định vị 3D một số góc nhìn
perspective-origin	Xác định vị trí mà người dùng đang nhìn vào phần tử được định vị 3D
pointer-events	Xác định xem một phần tử có phản ứng với các sự kiện con trỏ hay không
position	Chỉ định loại phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, tuyệt đối hoặc cố định)
quotes	Đặt loại dấu ngoặc kép cho các trích dẫn được nhúng
resize	Xác định nếu (và cách thức) một phần tử có thể thay đổi kích thước bởi người dùng
right	Chỉ định đúng vị trí của một phần tử được định vị
rotate	Chỉ định sự xoay vòng của một phần tử
row-gap	Chỉ định khoảng cách giữa các hàng lưới
scale	Chỉ định kích thước của một phần tử bằng cách tăng hoặc giảm tỷ lệ
scroll-behavior	Chỉ định xem có nên tạo hoạt ảnh mượt mà vị trí cuộn trong một hộp có thể cuộn hay không, thay vì chuyển thẳng
tab-size	Chỉ định chiều rộng của một ký tự tab
table-layout	Xác định thuật toán được sử dụng để sắp xếp các ô, hàng và cột trong bảng
text-align	Chỉ định căn lề ngang của văn bản
text-align-last	Mô tả cách dòng cuối cùng của một khối hoặc một dòng ngay trước dấu ngắt dòng bắt buộc được căn chỉnh khi căn chỉnh văn bản là “justify”
text-combine-upright	Chỉ định sự kết hợp của nhiều ký tự vào khoảng trống của một ký tự
text-decoration	Chỉ định trang trí được thêm vào văn bản
text-decoration-color	Chỉ định màu của trang trí văn bản
text-decoration-line	Chỉ định kiểu dòng trong trang trí văn bản
text-decoration-style	Chỉ định kiểu của dòng trong trang trí văn bản
text-decoration-thickness	Chỉ định độ dày của đường trang trí
text-emphasis	Áp dụng các dấu nhấn mạnh cho văn bản
text-indent	Chỉ định thụt lề của dòng đầu tiên trong khối văn bản
text-justify	Chỉ định phương pháp căn chỉnh được sử dụng khi căn chỉnh văn bản là “căn đều”
text-orientation	Xác định hướng của các ký tự trong một dòng
text-overflow	Chỉ định điều gì sẽ xảy ra khi văn bản tràn phần tử chứa
text-shadow	Thêm bóng vào văn bản
text-transform	Kiểm soát cách viết hoa của văn bản
text-underline-position	Chỉ định vị trí của gạch dưới được đặt bằng thuộc tính text-decoration
top	Chỉ định vị trí trên cùng của một phần tử được định vị
transform	Áp dụng chuyển đổi 2D hoặc 3D cho một phần tử
transform-origin	Cho phép bạn thay đổi vị trí trên các phần tử đã chuyển đổi
transform-style	Chỉ định cách các phần tử lồng nhau được hiển thị trong không gian 3D
transition	Một thuộc tính viết tắt cho tất cả các thuộc tính chuyển đổi- *
transition-delay	Chỉ định khi nào hiệu ứng chuyển tiếp sẽ bắt đầu
transition-duration	Chỉ định bao nhiêu giây hoặc mili giây để hoàn thành một hiệu ứng chuyển tiếp
transition-property	Chỉ định tên của thuộc tính CSS mà hiệu ứng chuyển tiếp dành cho
transition-timing-function	Chỉ định đường cong tốc độ của hiệu ứng chuyển tiếp
translate	Chỉ định vị trí của một phần tử
unicode-bidi	Được sử dụng cùng với thuộc tính hướng để đặt hoặc trả lại xem văn bản có nên được ghi đè để hỗ trợ nhiều ngôn ngữ trong cùng một tài liệu hay không
user-select	Chỉ định xem văn bản của một phần tử có thể được chọn hay không
vertical-align	Đặt căn chỉnh theo chiều dọc của một phần tử
visibility	Chỉ định xem một phần tử có hiển thị hay không
white-space	Chỉ định cách xử lý khoảng trắng bên trong một phần tử
widows	Đặt số dòng tối thiểu phải để lại ở đầu trang hoặc cột
width	Đặt chiều rộng của một phần tử
word-break	Chỉ định cách ngắt các từ khi đến cuối dòng
word-spacing	ăng hoặc giảm khoảng cách giữa các từ trong văn bản
word-wrap	Cho phép ngắt các từ dài, không thể ngắt được và chuyển sang dòng tiếp theo
writing-mode	chế độ viết Chỉ định xem các dòng văn bản được bố trí theo chiều ngang hay chiều dọc
z-index	Đặt thứ tự ưu tiên của một phần tử