CSS QUICK REFERENCE

IN THIS SECTION

This section covers some of the most popular elements of CSS to give you a quick reference when you are programming your website.

CSS Quick Reference Guide

Text and Fonts

Property	Example	Description
color	color: blue;	Changes text colour.
font-family	font-family: Arial;	Sets the font style.
font-size	font-size: 18px;	Sets the size of text.
text-align	text-align: center;	Aligns text left, right or centre.

Layout and Positioning

Property	Example	Description
display	display: block;	Defines how an element is displayed.
position	position: absolute;	Sets how an element is positioned.
top / left	top: 10px;	Moves positioned elements.
overflow	overflow: hidden;	Controls content that exceeds container size.
z-index	z-index: 10;	Controls stacking order of elements.

Flexbox

Property	Example	Description
display	display: flex;	Turns container into a flex container.
justify-content	justify-content: center;	Aligns items horizontally.
align-items	align-items: center;	Aligns items vertically.
flex-direction	flex-direction: column;	Sets direction of items.

Lists and Tables

Property	Example	Description
list-style-type	list-style-type: square;	Changes bullet style.
border-collapse	border-collapse: collapse;	Removes gaps between table borders.
border-spacing	border-spacing: 5px;	Adds space between table cells.

Images

Property	Example	Description
max-width	max-width: 100%;	Makes image responsive.
border-radius	border-radius: 50%;	Creates circular images.
object-fit	object-fit: cover;	Controls how image fills container.

Links

Selector	Example	Description
a	a { color: blue; }	Styles all links.
a:hover	a:hover { color: red; }	Styles link when hovered.
a:visited	a:visited { color: purple; }	Styles visited links.

Responsive Design

Feature	Example	Description
@media	@media (max-width:600px) { }	Applies styles at certain screen sizes.
max-width	max-width: 100%;	Prevents elements exceeding container.
min-width	min-width: 300px;	Sets minimum element size.