CSS is the acronym for “Cascading Style
Sheets”. CSS is an extension to basic HTML that allows you to style your web
pages.
An example of a style change would be to
make words bold. In standard HTML you would use the <b> tag like so:
<b>bold text</b>
This works fine and there is nothing wrong
with it by itself, except that now if you wanted to say change all your text
that you initially made bold to underlined, you would have to go to every spot
in the page and change the tag.
Another disadvantage can be found in this
example: say you wanted to make the above text bold, make the font style Arial
and change its color to red; you would need a lot of code wrapped around the
text. For example:
<font
color="#FF0000" face="Arial"><strong>BLABLABLA</strong></font>
This is lengthy and contributes to making
your HTML messy. With CSS, you can create a custom style elsewhere and set all
its properties, give it a unique name and then ‘tag’ your HTML to apply these
stylistic properties:
<p class="style1">CSS
Style</p>
And in between the tags at the top of your
web page you would insert this CSS code that defines the style we just applied:
<style type="text/css">
.style1
{
font-family: Arial;
font-weight: bold;
color: #FF0000;
}
</style>
In the above example we embed the CSS code
directly into the page itself. This is fine for smaller projects or in
situations where the styles you’re defining will only be used in a single page.
There are many times when you will be applying your styles to many pages and it
would be a hassle to have to copy and paste your CSS code into each page.
Besides the fact that you will be
cluttering up your pages with the same CSS code, you also find yourself having
to edit each of these pages if you want to make a style change. Like with
JavaScript, you can define/create your CSS styles in a separate file and then
link it to the page you want to apply the code to:
<link href="blabla.css"
rel="stylesheet"
type="text/css">
The above line of code links your external
style sheet called “blabla.css” to the HTML document. You place this code in
between the <head> </head> tags in your web page.
In making a webpage, time is crucial. Therefore, CSS is very helpful in terms of saving precious time and having an orderly webpage.
.jpg)
.jpg)