CSS is for Cascading Style Sheets.

CSS delivers layout web pages and can control multiple web pages all at once.


What is CSS?

CSS (Cascading Style Sheets) is used to format the design of a web page.


With CSS, you can control color, font, text size, spaces among elements, how elements are set and managed, what background images or background colors will be used, various displays for different devices, and screen sizes, and much more!


How to use CSS?

You can attach CSS to HTML documents in 3 ways:

  • Inline 
  • Internal 
  • External

Inline CSS

you can use with HTML elements inline but this way is recommended for SEO and Website speed it will decrease your site performance 

example

<p style="color:red;font-size:22px;">This is paragraph.</p>
<!--I am using the style attribute to add CSS to the p tag. you can add as much property--->


Internal CSS

This is also not recommended way but you have underrated 

example

<!DOCTYPE html>
<html>
    <head>
        <title>How to use CSS in HTML</title>
        <style>
            p{
                color:red;
                font-size:22px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <p>This is paragraph.</p>
    </body>
</html>

Output:

This is paragraph.


External CSS

The best and recommended way to add CSS to HTML. you have a separate CSS file and link to HTML let's understand by example.


Example:

html-tutorial/
┣ index.html
┗ style.css

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>How to use CSS in HTML</title>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <p>This is paragraph.</p>
    </body>
</html>


style.css

p{
    color:red;
    font-size:22px;
    background-color: green;
}

output

This is paragraph.