CSS Reference Guide

Welcome to the ultimate CSS Reference Guide. This guide is designed to introduce you to the essentials of CSS (Cascading Style Sheets) and help you understand the various properties and capabilities it offers. Whether you are just starting out in web development or looking to refine your skills, this guide will provide you with clear examples, tables, and responsive designs to aid your learning.

I. CSS Syntax

A. CSS Selectors

CSS Selectors are patterns used to select the elements you want to style. Below are the various types of selectors.

Selector Type	Example	Description
Universal Selector	* { color: red; }	Selects all elements in the document.
Type Selector	div { color: blue; }	Selects all div elements.
Class Selector	.myClass { color: green; }	Selects all elements with the class myClass.
ID Selector	#myId { color: purple; }	Selects the element with the ID myId.
Attribute Selector	input[type="text"] { border: 1px solid black; }	Selects all input elements of type text.
Pseudo-class Selector	a:hover { color: orange; }	Selects a elements when they are hovered over.
Pseudo-element Selector	p::first-line { font-weight: bold; }	Selects the first line of a p element.

B. CSS Properties and Values

CSS Properties determine the styles applied to selected elements. Values specify the settings for those properties. Here’s an example of some commonly used properties:

“`css
p {
color: black;
font-size: 16px;
}
“`

C. Color Values

Colors can be defined in different ways:

• Hex: #FFFFFF
• RGB: rgb(255, 255, 255)
• RGBA: rgba(255, 255, 255, 0.5)
• HSL: hsl(0, 0%, 100%)

D. Length Units

Length units can be absolute or relative:

Unit Type	Example	Description
Pixels (px)	width: 100px;	Fixed-size unit, best for precise layouts.
Percentages (%)	width: 50%;	Relative to the parent element’s size.
EM	font-size: 2em;	Relative to the font size of the element.
Rem	font-size: 2rem;	Relative to the root (html) font size.

II. CSS Box Model

The CSS Box Model describes the rectangular boxes generated for elements in the document tree and consists of several areas: Content, Padding, Border, and Margin.

A. Content

The actual content of the box, where texts and images appear.

B. Padding

The space between the content and the border, affecting the space inside the box.

C. Border

The line surrounding the padding (if any) and content.

D. Margin

The space outside the border, affecting the distance between elements.

Box Model Section	Description
Content	The area where text and images are rendered.
Padding	Space between the content and the border.
Border	A line surrounding the padding and content.
Margin	Space outside the border, separating this box from others.

III. CSS Backgrounds

A. Background-color

Sets the background color of an element.

“`css
div {
background-color: lightblue;
}
“`

B. Background-image

Sets an image as the background of an element.

“`css
div {
background-image: url(‘image.jpg’);
}
“`

C. Background-repeat

Defines if/how a background image should repeat.

“`css
div {
background-repeat: no-repeat;
}
“`

D. Background-position

Sets the starting position of a background image.

“`css
div {
background-position: center;
}
“`

E. Background-size

Specifies the size of the background image.

“`css
div {
background-size: cover;
}
“`

IV. CSS Text

Property	Example	Description
Color	color: red;	Sets the text color.
Font	font-family: Arial;	Specifies the font family.
Font-size	font-size: 16px;	Sets the size of the text.
Font-style	font-style: italic;	Sets the style to italic.
Font-weight	font-weight: bold;	Sets the weight of the font.
Line-height	line-height: 1.5;	Sets the space between lines of text.
Text-align	text-align: center;	Aligns text within its container.
Text-decoration	text-decoration: underline;	Underlines the text.
Text-transform	text-transform: uppercase;	Transforms text to uppercase.
White-space	white-space: nowrap;	Prevents text from wrapping to a new line.

V. CSS Lists

A. List-style

Sets the style for list items.

“`css
ul {
list-style: square;
}
“`

B. List-style-type

Defines the bullet style for list items.

“`css
ol {
list-style-type: decimal;
}
“`

C. List-style-position

Sets the position of the list-item markers.

“`css
ul {
list-style-position: inside;
}
“`

D. List-style-image

Uses an image as the list item marker.

“`css
ul {
list-style-image: url(‘marker.png’);
}
“`

VI. CSS Tables

Property	Example	Description
Border-collapse	border-collapse: collapse;	Combines adjoining table borders.
Border-spacing	border-spacing: 5px;	Sets the distance between adjacent borders.
Caption-side	caption-side: top;	Position of the table caption.
Empty-cells	empty-cells: hide;	Controls the visibility of empty cells.
Table-layout	table-layout: auto;	Sets the algorithm used to lay out a table.

VII. CSS Display

A. Display

Specifies how an element is displayed.

“`css
div {
display: block;
}
“`

B. Visibility

Controls the visibility of an element.

“`css
div {
visibility: hidden;
}
“`

VIII. CSS Positioning

A. Position

Defines how an element is positioned in the document.

“`css
div {
position: absolute;
}
“`

B. Z-index

Sets the stack order of an element.

“`css
div {
z-index: 10;
}
“`

C. Float

Places an element to the left or right of its container.

“`css
img {
float: right;
}
“`

D. Clear

Specifies whether an element should be moved below floated elements.

“`css
div {
clear: both;
}
“`

IX. CSS Flexbox

A. Flex

Defines the flexible length of a flex item.

“`css
.item {
flex: 1;
}
“`

B. Flex-direction

Sets the direction of the flex items in a flex container.

“`css
.container {
flex-direction: row;
}
“`

C. Flex-wrap

Defines whether flex items should wrap onto new lines.

“`css
.container {
flex-wrap: wrap;
}
“`

D. Justify-content

Aligns flex items along the main axis.

“`css
.container {
justify-content: center;
}
“`

E. Align-items

Aligns flex items along the cross axis.

“`css
.container {
align-items: stretch;
}
“`

F. Align-content

Aligns flex lines in a multi-line flex container.

“`css
.container {
align-content: space-between;
}
“`

X. CSS Grid

A. Grid

Grid layouts allow for complex responsive designs. Here’s a basic grid example:

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightgrey;
}
“`

FAQ Section

Q1: What is CSS?

A1: CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls layout, colors, fonts, and more.

Q2: How do I link a CSS file to my HTML?

A2: You can link a CSS file in the <head> section of your HTML using the following tag:

“`html “`

Q3: What are class selectors?

A3: Class selectors target HTML elements with a specific class attribute. They are defined with a dot (.) followed by the class name.

Q4: How does CSS affect the layout of a webpage?

A4: CSS affects the layout by controlling the size, positioning, and display properties of elements, thus determining how content is arranged and displayed in the browser.

Q5: What is the CSS Box Model?

A5: The CSS Box Model describes the rectangular boxes generated for elements, including the content, padding, border, and margin areas.