Introduction to CSS

What is CSS

CSS stands for Cascading Style Sheets. With the help of CSS we can apply styles to any web page we want. It also describes the fonts, spacing, text color and background color of a web page. CSS also saves our lot of time and effort, as it controls the layout of multiple web pages all at once. It also describes how HTML Elements are to be displayed on screen. In short it describes the look of your website.

Note:- Before learning CSS you must have good enough knowledge about HTML. You can learn HTML from our HTML Tutorial.

Why Use CSS

CSS saves our time and effort:- we have to write our CSS only once and reuse the same sheet in multiple HTML pages.
Easy Maintenance:- If we wanna to make a global change we can simply change the style, and all elements in all the webpages will be updated automatically.
Clean code:- CSS is considered a clean coding technique, which means Search Engines won’t have to struggle to read the content.
Make our website stylish:- CSS is used to define styles for our web pages, including the design, layout and more.

CSS Example

So far we have learnt that CSS is used to apply styles on a web page. We can change the Text color, text font, background color and many more with CSS. Now let’s write a short CSS code to see how the things work.

body {
  background-color:violet;
}
h1 {
  color:blue;
  text-align:center;
}
h3 {
  color:blue;
  text-align:center;
}
p {
  color:red;
  text-align:left;
}

So we have write a short CSS code, where we set the background color of the web page as Violet, h1 and h3 color as blue and paragraph color as red. We have also aligned the h1 and h3 text to center and paragraph text to left.

Now we need to add this CSS code to our HTML document, to see the results. There are many methods to add the CSS to HTML, you can learn it from here; How to add CSS to HTML. However, here we will use the internal CSS method to add CSS to HTML.

In an Example below let’s add our CSS code to HTML to see how CSS changes the look of our web page.

Example

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
  background-color:violet;
}
h1 {
  color:blue;
  text-align:center;
}
h3 {
  color:blue;
  text-align:center;
}
p {
  color:red;
  text-align:left;
}
</style

</head>
<body>
<h1>This is a heading</h1> 
<h3>This is also a heading</h3>
<p>This is a paragraph</p>
<p>This is an another paragraph</p>
</body>
</html>

Copy the code and run it here

CSS Syntax

The CSS code consists of two blocks, Selector block and Declaration block. In an above CSS code we have write something like this:

body {
  background-color:powderblue;
}

Here the body is an HTML Element that we wanna style, and it falls in selector block. In a declaration block we have CSS property name (background-color) and a value (powderblue) separated by a colon.

To clearly understand the Selector and Declaration block take a look at this Image.