An brief introduction to CSS

October 3, 2022

What is CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.. It makes page looks more engaging to the visitors.

  • CSS stands for Cascading Style Sheets.
  • CSS describes how HTML elements are to be displayed on different media devices, and enables the developers to do this independent of HTML

Where to write CSS?

You can use any text editor (Notepad, or any advanced IDE such as VS Code) to create stylesheets for your HTML document. Simply save it with .css  extension and include it in head of your html document or you can also write css in the same html document, both the methods are described later in this series.

CSS Syntax

CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document..

  • The selector points to the HTML element 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.
  • CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Example 

File 1: css-intro.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Intro</title>

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .container {
            padding: 10px 25px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>CSS Designing</h1>
        <p>This is my first CSS Design.</p>
    </div>
</body>

</html>

<style> & </style> are opening and closing tags for writing css. If you are writing css in the same page then everything should go between these tags.

html,body this is known as group selectors - when you need to apply same css to different elements, rather then writing the same style again and again just seperate the selectors with a comma and you are done.

.container is a class selector - this will select all the elements having the class container.

More css rules and techniques will be explained in next chapters.

Comments ()