CSS Tutorial

 

The CSS stand for Cascading Style Sheets

 

Cascading Style Sheets (CSS) it is a style sheet language that is used for describing the presentation of a document written in a markup language like HTML or XML.

CSS describes how elements should be displayed on a screen.

 

To start using Cascading Style Sheets (CSS)  follow these  steps:

 

1. Create an HTML File:
This can be done using a  text editor like Sublime Text or any code editor.

e.g (index.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

</body>
</html>

 

2. Create a CSS File:


Create  CSS file (styles.css) in the same directory as your HTML file.

This is where you will write your CSS code.

 

example

style.css

body{

     background: blue;

     font-size: 14px;

}

 

3. Link CSS to HTML: 

Link your CSS file to your HTML file.

add this link <link rel="stylesheet" href="styles.css"> in your html file within the head e.g <head><link rel="stylesheet" href="styles.css"> </head>

 

selector{

      properties: value; 

}

 

Selectors:

Selectors target HTML elements to which you want to apply styles.

 

Properties:

Properties define the  elements that you want to style.

 

Values:

Values are assigned to properties and define how the property should be applied.

 

example:

div{

      background: blue;

      color: white;

      font-size: 16px

      text-align: center;

}

 

Notice:

- You need to identify the element you want to style in your HTML page.