Welcome to Cascading Style Sheets (CSS)

Add Design and beauty to html
By - Ashish Singh
Engineer at NextFuturegenz
What is CSS ?

CSS (Cascading Style Sheets) is a fundamental component of web development. It provides a way to add style, layout, and design to HTML documents, making web pages look visually appealing and professional. CSS is a style sheet language that allows web developers to separate the presentation of a document from its content. In this tutorial, we will cover the basics of CSS, including syntax, selectors, properties, and values, and show you how to apply CSS to HTML documents to style web pages.

Syntax

The syntax of CSS is straightforward. It consists of a selector, followed by one or more declarations, which are enclosed in curly braces. The selector specifies which element or elements the style rules apply to, and the declarations specify the properties and values that define the style.

Here is an example of the basic syntax of CSS:


selector {
    property: value;
    property: value;
    property: value;
}
Selectors

Selectors are used to specify which elements in an HTML document the style rules apply to. There are several types of selectors in CSS, including:

  • Element selectors: These apply to all instances of a particular element. For example, the `p` selector applies to all `p` elements in the document.

  • Class selectors: These apply to all elements that have a specific class attribute. For example, the `.my-class` selector applies to all elements with the `class="my-class"` attribute.

  • ID selectors: These apply to a single element that has a specific ID attribute. For example, the `#my-id` selector applies to the element with the `id="my-id"` attribute.

  • Attribute selectors: These apply to all elements that have a specific attribute or attribute value. For example, the `[type="text"]` selector applies to all elements with the `type="text"` attribute.

Properties and Values

CSS properties are used to define the style of an element. There are many CSS properties, each with its own set of possible values. Some common properties include:

  • `color`: Specifies the text color of an element.

  • `font-size`: Specifies the size of the font used in an element.

  • `background-color`: Specifies the background color of an element.

  • `border`: Specifies the border properties of an element.

  • `padding`: Specifies the padding around the content of an element.

  • `margin`: Specifies the margin around an element.

Here is an example of CSS properties and their values: 

                            
selector {
    color: red;
    font-size: 18px;
    background-color: #f5f5f5;
    border: 1px solid black;
    padding: 10px;
    margin: 20px;
}
Properties and Values

To apply CSS to an HTML document, you need to link the CSS file to the HTML file using the `<link>` tag. The `<link>` tag goes in the `<head>` section of the HTML document, and it specifies the location of the CSS file.

Here is an example of how to link a CSS file to an HTML document: 

                            
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

In the example above, the `href` attribute specifies the location of the CSS file, and the `rel` attribute specifies the relationship between the HTML document and the CSS file.

Once the CSS file is linked to the HTML document, you can use the selectors, properties, and values to style the elements in the HTML document.

Conclusion

CSS is a powerful tool for web developers. It allows you to separate the presentation of a document from its content, making it easier to maintain and update your web pages. In this tutorial, we covered the basics of CSS