crus4

crus4

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 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>

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.

Note:- The declaration block may contain one or more declarations that are separated by semicolons.


Related Posts

HTML Tutorial

Add CSS to HTML

Add JavaScript to HTML

Introduction to CSS – crus4