CSS Introduction

Last Updated : 30 Jan, 2025

CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.

It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.
The main advantages are the separation of content (in HTML) and styling (in CSS) and the same CSS rules can be used across all pages and not have to be rewritten.
HTML uses tags and CSS uses rule sets.
CSS styles are applied to the HTML element using selectors.

Why CSS?

Saves Time: Write CSS once and reuse it across multiple HTML pages.
Easy Maintenance: Change the style globally with a single modification.
Search Engine Friendly: Clean coding technique that improves readability for search engines.
Superior Styles: Offers a wider array of attributes compared to HTML.
Offline Browsing: CSS can store web applications locally using offline cache, allowing offline viewing.

CSS Syntax

CSS consists of style rules that are interpreted by the browser and applied to the corresponding elements. A style rule set includes a selector and a declaration block.

Selector: Targets specific HTML elements to apply styles.
Declaration: Combination of a property and its corresponding value.

// HTML Element
<h1>GeeksforGeeks</h2>

// CSS Style
h1 { color: blue; font-size: 12px; }

Where - 
Selector - h1
Declaration - { color: blue; font-size: 12px; }

The selector points to the HTML element that you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.

Example

CSS

p {
    color: blue;
    text-align: center;
}

CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. In this example, all paragraph element (<p> tag) will be centre-aligned, with a blue text color.

Ways to Apply CSS

1. Inline CSS: Directly within the HTML element using the style attribute.

HTML

<html>
<head>
</head>
<body>
    <p style="color: red;">This is inline CSS.</p>
</body>
</html>

2. Internal CSS: Within a <style> tag in the <head> section.

HTML

<html>
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Welcome to the world of GFG</p>
</body>
</html>

3. External CSS: The external CSS is the CSS linked to an HTML file using the <link> tag.

HTML

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Hello GFG</p>
</body>
</html>

CSS

/* styles.css */
p {
    font-family: sans-serif;
    font-size: xx-large;
    font-weight: 900;
    color: green;
}

CSS Features and Use Cases

1. Changing Text Color

Changes the text color of all <p> elements to green.

HTML

<html>
<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>
<body>
    <p>This text is green.</p>
</body>
</html>

2. Cascading in CSS

CSS resolves conflicts by prioritizing rules based on specificity and order. Shows how CSS applies rules based on specificity.

HTML

<html>
<head>
    <style>
        * {
            color: black;
        }
        p {
            color: blue;
        }
        #special {
            color: orange;
        }
    </style>
</head>
<body>
    <p>This text is blue.</p>
    <p id="special">This text is orange.</p>
</body>
</html>

3. Background Color

Sets the background color of a <div> to chocolate.

HTML

<html>
<head>
    <style>
        div {
            background-color: chocolate;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div>Hello GFG</div>
</body>

</html>

4. Centering Text

Centers text horizontally within a container.

HTML

<html>
<head>
    <style>
        .center-text {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="center-text">Hello, World!</div>
</body>
</html>

5. Adding Padding

Adds padding around the content inside a <div>.

HTML

<html>
<head>
    <style>
        div {
            padding: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>Hello with padding</div>
</body>
</html>

6. Hover Effects

Changes button color on hover for interactive effects.

HTML

<html>
<head>
    <style>
        button {
            background-color: greenyellow;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: blue;
        }
    </style>
</head>
<body>
    <button>Hover me</button>
</body>
</html>

7. Font Weight

Makes text bold using the font-weight property.

HTML

<html>
<head>
    <style>
        p {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>This is bold text.</p>
</body>
</html>

8. Flexbox for Centering Items

Centers an item within a container using Flexbox.

HTML

<html>
<head>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f4f4f4;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 200px;
            background: #4caf50;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">Centered</div>
</body>
</html>

9. Font Size

Sets the font size of text to 24 pixels.

HTML

<html>
<head>
    <style>
        p {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>Large text</p>
</body>
</html>

Key Advantages and Disadvantages of CSS

Advantages of CSS

Simplifies web design and maintenance.
Enhances website performance and user experience.
Supports responsive and adaptive designs for all devices.

Disadvantages of CSS

Cross-Browser Compatibility Issues: Different browsers may interpret CSS differently, causing inconsistencies in design.
Complexity in Large Projects: As projects grow, CSS can become hard to manage, leading to cluttered code and style conflicts.
Limited Dynamic Behavior: CSS is mainly for static design, so it can’t handle complex interactions or animations without JavaScript

For more, please read our detailed article on Advantages and Disadvantages of CSS.