CSS TUTORIAL
Let us quickstart by introducing styling element for the existing structures that we know about.Let us assume that you want to create a paragraph with a bigger font and red text color. As you know, you may do this using html. Here is a section of the code to accomplish this task.
Rendering a text in Blue
<html> <head> </head> <body> <p align ="center"> <font color="red" size="25px"> This is some header</font> </p> </body> </html> |
This is some header
You may like to try this code using online tool here
As you can see, we have to apply formatting for everytime we wish to change. Let us say we applied such font color, alighning on hundreds of pages and then figured out a better way to display it. We will have to change each and every page which can be a pain.
Fortunately, CSS is there for the help. Let us see how we solve the problem using CSS.
Here is the section of the code that does the same thing
<html>
<head>
<style type="text/css">
p
{
color:red;
text-align:center;
font-size:25;
}
</style>
</head>
<body>
<p>This is some Header</p>
</body>
</html>
|
You may like to try this code using online tool here
Explanation
A CSS element can be defined inside an html page. As we will see later, it is beneficial to keep the CSS in a separate file.
It is possible to include the CSS styling inside the html page. For the moment we will focus on the CSS styling inside the page itself.
A CSS rule is defined using has two main parts: a selector followed by and one or more than one declaration. Here is how it looks like
As you can see, we have three declarations inside the selector "p". Each declaration has a property and its corresponding value. By using the selector p, we have altered the way a paragraph is rendered inside an html page. In the html page, we still use the same paragraph tags, but the way it is rendered has be altered thanks to the styling.
What if you have two paragraphs and you wish to display it in different ways in the two parahgraphs ? This is the topic of our next page.