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