CSS Introduction

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, describing how a webpage should look by prescribing colors, fonts, spacing, and positioning. CSS provides developers and designers with powerful control over the presentation of HTML elements.

HTML uses tags and CSS uses rulesets. CSS styles are applied to the HTML element using selectors. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

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 Versions Release Year

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>w3wiki</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.

Without CSS: In this example, we have not added any CSS style.

html

<!DOCTYPE html>
<html>
  
<head>
    <title>Simple Web Page</title>
</head>
  
<body>
    <main>
       <h1>HTML Page</h1>
       <p>This is a basic web page.</p>
    </main>
</body>
  
</html>

Output:

Without CSS

Using CSS: In this example, we will add some CSS styles inside the HTML document to show how CSS makes a HTML page attractive and user-friendly.

html

<!DOCTYPE html>
<html>

<head>
    <title>Simple web page</title>
    <style>
        main {
            width: 600px;
            height: 200px;
            padding: 10px;
            background: beige;
        }
        
        h1 {
            color: olivedrab;
            border-bottom: 1px dotted darkgreen;
        }
        
        p {
            font-family: sans-serif;
            color: orange;
        }
    </style>
</head>

<body>
    <main>
        <h1>My first Page</h1>
        <p>This is a basic web page.</p>
    </main>
</body>

</html>

Output:

With CSS

CSS is essential for creating visually appealing and maintainable web pages. It enhances the website look and feel and user experience by allowing precise control over the presentation of HTML elements. Mastering CSS is crucial for effective web design and development.

Why CSS?

CSS Versions Release Year

CSS Syntax

Example

Web Page with & without CSS

Contact Us