**CSS (Cascading Style Sheets)** describes how *HTML* elements will be displayed on a webpage. It controls the design elements of a webpage such as color schemes, dimensions of the HTML elements, webpage layout, and variations in display for different devices and screen sizes. 

# Syntax
A CSS rule consists of a *selector* and a *declaration block​*:






The **selector** points the HTML element to a style. In the illustration above, the selector is pointing to an h1 element.
The declaration block contains one or more declaration, separated by semi-colons.
Each declaration includes a CSS property name and a value separated by a colon.

This particular CSS rule will color all h1 elements blue and make them bold.

# Where is CSS written?
CSS rules can be written in the same HTML files between `<style> </style>` tags, as shown below:





<html>
 <head>
    <style>
        h1 {color: blue; font-weight: bold}
    </style>
 </head>
 <body>
   <h1> "Hello" </h1>
 </body>
</html>

codemirror

<html>
 <head>
 </head>
 <body>
   <h1 style="color:blue; font-weight:bold"> "Hello" </h1>
 </body>
</html>

CSS rules can also be defined in an external CSS file with a *.css* extension. This file needs to be imported into the relevant HTML file(s).

h1 {
    color: blue;
    font-weight: bold;
}

<html>
 <head>
 </head>
 <body>
   <h1> "Hello" </h1>
 </body>
</html>

## Styling specific elements

In the examples above, the CSS rule applies a particular style to *all* h1 elements. However, if one wants to *only* style one particular element, then it needs to be targeted by either its *ID* or its *class*. 

This functionality is shown in the code below: 


#element1 {
    color: blue;
    font-size: 20px;
}

.element2 {
    color: red;
    font-size: 20px;
}

<html>
 <head>
 </head>
 <body>
     <p id="element1"> This is styled using ID. </p>
     <p class="element2"> This is styled using class. </p>
 </body>
</html>

> Note how the class is styled with a `.` before the class's name, and the ID is styled using a `#` before the ID's name.

What is CSS?

CSS (Cascading Style Sheets) describes how HTML elements will be displayed on a webpage. It controls the design elements of a webpage such as color schemes, dimensions of the HTML elements, webpage layout, and variations in display for different devices and screen sizes. Syntax A CSS rule consists of a selector and a declaration block​: 