How to use CSS to style a web page using inline, internal and external styling methods
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.
Related articles:
how to create a blog using blogger
how to connect namecheap domain name to blogger
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.
Related articles:
how to create a blog using blogger
how to connect namecheap domain name to blogger
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.
In
summary
The goal is for every
developer to make the work easier for his/herself. I believe from what you
learned so far, you get to understand that a single style sheet can be use for
apply for every html elements on a web page. Same thing, if you want one
particular style to take effect on more than one web page, then you just the
external method by creating the style file separate and link it to all the
pages you want the style to affect.
So the disadvantages of
using inline css styling method is, you will rewrite same style code multiple
times, as each individual html element needs its code within and not outside.
Another disadvantage is of
using inline styling method is that, the web page take longer time to load,
every single code need to load finish before the page will be consider open. It
is even difficult when it comes to site maintenance.
So I will advice you get
use to either eternal or external styling methods, which save time and also
make work easier. But for a practice purpose, you make use inline method, but
when it comes to a serious project, a website that will be taking online for
the world to see, try you r possible to only use eternal or external styling.
You should do well to
check out for some of our great articles that teach more about css and web page
designing tips to master more.
I wish you a happy coding life!
Comments
Post a Comment