I believe you’re excited anytime you come across a new article on this site because you are about learning something completely new or about adding more to what you already know.
Well,
without taking much of your time as usual, I will be discussing with you on how
to add CSS (cascading style sheet) to any HTML web page. This can be achieving
by either adding the style code within the HTML individual element or adding it
on the page header or creating another special file for it.
So the three
styling methods I just mentioned above are called inline, eternal and external
CSS styling methods.
But before I
dive into details, you need to know that adding your web styling codes in same
page with your HTML codes will slow down how your load on web browsers. And it
will even slow you down from coding fast as you’ll need to rewrite all your CSS
styles on each page. So just imagine you have 30 to 35 HTML pages.
One good
about the external styling method is that you just need to only write your
style codes once.
Note:
external method is writing and saving all your style codes in one file and link
it to all your web pages.
You can save
with whatever name you want, following with CSS file extension.
Example;
cascadingstylesheet.css
Class and id
attributes
The class
and ID are attributes assigned to any HTML element you want to style
differently. It is just like a name given to an element as a unique identity.
The class
attribute have “.” As the symbol, while ID attribute have “#” as the symbol. When
we get to the eternal and external styling methods, you find out more about the
class and ID attributes.
Note: you
must give a name to the class or id before calling it when styling.
CSS inline
styling
This is the method
that enables you to add a style to just one single HTML element. This styling
will never affect another element within the web page.
Note: the advantage
of the inline styling method is that, it makes the page load faster and the
disadvantage is, you will write a lot of codes since each element will have its
own individual style code.
Inline style
example;
<body>
<p style=”color:red;font-size:15px;”>This
is my paragraph</p>
</body>
Explanation;
I write out
HTML body opening and closing tags, and then in between, I make a paragraph
using the HTML paragraph element. Now in the opening tag of the paragraph
element, I used the style attribute and set the text color to red and font size
to 15px.
The reason
why I don’t really recommend this inline styling for my students is, if you
have five to eight paragraphs, you will need to add the style in each of them
and that is time consuming.
CSS internal
styling
The eternal
styling method enables you to style countless number of HTML elements with just
one single line of style code. You’re to assign class or id to all the elements
you want to give a particular style.
Internal style
example;
<html>
<head>
<style type=”text/css”>
#paragraph
{
color:red;
font-size:15px;
}
</style>
</head>
<body>
<p
id=”paragraph”>This is my paragraph</p>
</body>
</html>
Explanation;
I applied
same style to the paragraph HTML element like I did on the inline styling
method, but this time around, I assigned paragraph to id attribute, then color
text red and font size 15px.
The advantage
is, any element I assign the paragraph id attribute to, will have the style
effect.
Note: this
styling method will never affect another web page.
CSS external
styling
This method
is my favorite styling method. I call it write once and finish all. Using external
css styling, you just need to write out all your style codes in one file and save
it with any name with .css file extension then link it to all your HTML pages
and you’re good to go.
External style
example;
<html>
<head>
</head>
<body>
<p
class=”paragraph”>This is my paragraph</p>
</body>
</html>
Save this
file as home.html
<style
type=”text/css”>
.paragraph
{
color:red;
font-size:15px;
}
</style>
Save this
file as style.css
Now head
over to your home.html file and in between the opening and closing tags add the
following line of code and you just linked your style codes external file to
your html page.
Happy coding life!
0 Comments