CSS Reference Guide - askthedev.com

Welcome to the CSS Reference Guide, where you will discover the basics of Cascading Style Sheets (CSS). CSS is a cornerstone technology for web development, allowing you to control the style and layout of web pages. This guide is structured for beginners, complete with examples and tables to help you grasp the concepts easily.

I. CSS Introduction

A. What is CSS?

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS manages colors, fonts, layouts, and responsive design.

B. Why Use CSS?

Separation of content and presentation
Improved page load speed
Consistency across web pages
Better accessibility

C. How CSS Works

CSS works by associating styles with HTML elements through selectors. When a browser interprets HTML, it applies the corresponding styles as defined in CSS.

D. CSS Syntax

The basic syntax of CSS consists of a selector and a declaration block:

selector {
    property: value;
}

Example:

h1 {
    color: blue;
}

E. CSS Selectors

Selectors are patterns used to select the elements you want to style.

Selector Type	Description
Element Selector	Selects elements by tag name.
Class Selector	Selects elements with a specific class (e.g., .classname).
ID Selector	Selects an element with a specific id (e.g., #idname).
Attribute Selector	Selects elements with a specific attribute (e.g., [type=”text”]).

II. CSS Colors

A. CSS Color Names

You can use predefined color names in CSS. Example:

p {
    color: red;
}

B. RGB Colors

RGB colors are defined by the red, green, and blue components.

p {
    color: rgb(255, 0, 0); /* Red */
}

C. RGBA Colors

RGBA includes an alpha channel for opacity.

p {
    color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
}

D. HEX Colors

HEX colors are represented by a 6-digit hexadecimal number.

p {
    color: #ff0000; /* Red */
}

E. HSL Colors

HSL stands for hue, saturation, and lightness.

p {
    color: hsl(0, 100%, 50%); /* Red */
}

F. HSLA Colors

HSLA includes an alpha channel for opacity.

p {
    color: hsla(0, 100%, 50%, 0.5); /* Red with 50% opacity */
}

III. CSS Backgrounds

A. Background Color

div {
    background-color: lightblue;
}

B. Background Image

div {
    background-image: url('image.jpg');
}

C. Background Repeat

Control how images are repeated.

div {
    background-repeat: no-repeat;
}

D. Background Position

You can set the position of the background image.

div {
    background-position: center;
}

E. Background Size

Set the size of the background image.

div {
    background-size: cover;
}

F. Background Attachment

Control the scrolling behavior of a background image.

div {
    background-attachment: fixed;
}

IV. CSS Borders

A. Border Style

Define the style of a border.

div {
    border-style: solid;
}

B. Border Width

div {
    border-width: 2px;
}

C. Border Color

div {
    border-color: black;
}

D. Border Radius

Creates rounded corners.

div {
    border-radius: 10px;
}

V. CSS Box Model

A. Content

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

B. Padding

The space between the content and the border.

div {
    padding: 20px;
}

C. Border

The border surrounding the padding.

D. Margin

The space outside the border.

div {
    margin: 10px;
}

E. Box Sizing

Control box sizes with the box-sizing property.

div {
    box-sizing: border-box;
}

VI. CSS Text

A. Text Color

p {
    color: green;
}

B. Text Align

p {
    text-align: center;
}

C. Text Decoration

a {
    text-decoration: underline;
}

D. Text Transform

Control the case of text.

p {
    text-transform: uppercase;
}

E. Text Shadow

p {
    text-shadow: 2px 2px 4px gray;
}

F. Letter Spacing

p {
    letter-spacing: 2px;
}

G. Line Height

p {
    line-height: 1.5;
}

H. White Space

Control how white space is handled.

p {
    white-space: nowrap;
}

VII. CSS Fonts

A. Font Family

p {
    font-family: Arial, sans-serif;
}

B. Font Size

p {
    font-size: 16px;
}

C. Font Weight

p {
    font-weight: bold;
}

D. Font Style

p {
    font-style: italic;
}

E. Font Variation

For variable fonts.

p {
    font-variation-settings: 'wght' 700;
}

F. Font Kerning

p {
    font-kerning: normal;
}

G. Font Size Adjust

Adjusts font size for different screens.

p {
    font-size-adjust: 0.5;
}

VIII. CSS Layout

A. Display Property

Defines how an element is displayed.

div {
    display: block;
}

B. Positioning

Control the positioning of elements.

Position Type	Description
Static	The default position, elements are placed in the normal document flow.
Relative	Position relative to its normal position.
Absolute	Position relative to its closest positioned ancestor.
Fixed	Position relative to the viewport.
Sticky	A hybrid position that switches between relative and fixed.

C. Float

Let elements sit next to each other.

img {
    float: left;
}

D. Clear

Control the behavior of elements next to floated elements.

div {
    clear: both;
}

E. Flexbox

Flexbox is used for creating one-dimensional layouts.

.container {
    display: flex;
}

F. Grid

CSS Grid is used for two-dimensional layouts.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

IX. CSS Lists

A. List Style

ul {
    list-style: none;
}

B. List Style Type

ul {
    list-style-type: square;
}

C. List Style Position

ul {
    list-style-position: inside;
}

D. List Style Image

ul {
    list-style-image: url('bullet.png');
}

X. CSS Tables

A. Table Layout

Control table display properties.

table {
    width: 100%;
    border-collapse: collapse;
}

B. Table Borders

td, th {
    border: 1px solid black;
}

C. Table Cell Padding

td, th {
    padding: 10px;
}

FAQ

Q1: What is the difference between classes and IDs in CSS?

A1: IDs are unique and can only be used once in a document, while classes can be applied to multiple elements.

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

A2: Use the <link> tag in the <head> section of your HTML:

<link rel="stylesheet" href="styles.css">

Q3: What are media queries in CSS?

A3: Media queries are used to apply styles based on screen resolution or device characteristics, enabling responsive design.

Q4: How can I center a block element?

A4: Set the margins to auto and define a width:

div {
    width: 50%;
    margin: auto;
}

Q5: What is a CSS preprocessor?

A5: CSS preprocessors like SASS and LESS allow you to use variables, nested rules, and functions, which can make writing CSS more powerful and easier.

askthedev.com Latest Articles