CSS Ruleset (original) (raw)

Last Updated : 11 May, 2026

A CSS ruleset is the foundation of how styles are applied to HTML elements on a web page. It consists of a selector and one or more declarations, which define how elements are displayed.

A CSS ruleset is made up of a selector and declarations.
The selector targets HTML elements to apply styles.
Declarations are pairs of property names and values that define how the selected elements should be styled.
The declarations are enclosed in curly braces {}. HTML `

<style>
    /* This is a CSS ruleset */
    p {
        color: blue;
        font-size: 16px;
    }
</style>

This is a paragraph.

The selector is p, which targets all
(paragraph) elements in the HTML.
The declarations define how the
element should look. The color property changes the text color to blue, and the font-size property sets the text size to 16px.

Declarations

A declaration specifies a CSS property and its value, separated by a colon (:). Declarations must end with a semicolon (;).

1. Color and Background

The declaration block to style the body of an element can be written by keeping body as a selector and the declaration must be kept within these {} braces.

HTML `

<style>
    body {
        color: black;
        background-color: white;
        background-image: url('background.jpg');
    }
</style>

2. Font and Text

The declaration block to style the h1 element by using an element selector.

HTML `

<style>
    h1 {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
    }
</style>

Welcome to GFG

3. Box Model (Margin, Padding, Border)

The box model describes the structure of an element as a rectangular box consisting of content, padding, border, and margin.

HTML `

<style>
    div {
        margin: 20px;
        padding: 10px;
        border: 1px solid black;
    }
</style>

4. Positioning of elements within the width and height of the screen

CSS positioning controls how an element is placed on a page using properties like static, relative, absolute, fixed, and sticky.

HTML `

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

Static

Relative

Absolute

Fixed

Sticky

CSS

/styles.css/ body { font-family: Arial, sans-serif; margin: 0; padding: 0; height: 200vh; /* To demonstrate scrolling for fixed and sticky positions */ }

.container { position: relative; height: 400px; border: 2px solid black; padding: 20px; }

.box { width: 100px; height: 50px; margin: 10px; padding: 10px; color: white; text-align: center; line-height: 50px; }

.static { position: static; background-color: gray; }

.relative { position: relative; background-color: blue; top: 20px; /* Moves relative to its original position */ left: 20px; }

.absolute { position: absolute; background-color: red; top: 50px; /* Moves relative to the nearest positioned ancestor */ left: 50px; }

.fixed { position: fixed; background-color: green; top: 10px; /* Always stays at the same position relative to the viewport */ right: 10px; }

.sticky { position: sticky; background-color: orange; top: 0; /* Sticks to the top of its container while scrolling */ }

5. Flexbox

Flexbox is a layout model that provides efficient alignment and distribution of space among items in a container, even if their size is dynamic.

HTML `

<style>
    body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: lightgray;
    }

    .box {
        width: 150px;
        height: 150px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
    }
</style>

Centered Box

6. Responsive Design

Using media queries to adjust styles for different screen sizes.

HTML `