Css external, internal and inline styling

how to link css style file
Don't miss understand linking and styling. They both are different, link is used for movement while style is used in giving the web page or website a good look.

I have so many questions in my inbox as they think linking external style sheet and linking to another website is same, no it is not.






I want to use this tutorial to clear that doubt. I'll making use of css styling in three method:

1. Inline styling
2. Internal styling
3. External styling

We'll go through them one after the other in understandable manner.

I promise you, after you read and practice through this article, you'll never have any issue regarding css styling and making a link to another website. Yes hold me to my promise.







It is the right time I need to tell you that the difference between these three styling ways is that, the EXTERNAL styling has to do with getting or linking external css style file (externalfile.css) where all the styles corresponding to the IDs and CLASSs are saved with the right file extension (.css).

The advantage of using external css file is that you can be able to use one particular style in multiple web pages while the disadvantage is that it takes longer time to load.

The INTERNAL styling method only apply to one single web page, in other words, it is limited to the page in which it is apply to.

The disadvantage of using this styling is that, no other page will be affected with this style. The advantage is that, this method load faster than the external style file.


Lastly, INLINE styling method is not commonly use but it is very important to me because it is fastest method to use when practicing designing. This very method is used in styling one single html element or tag, no other element will be affected. In this way, if you are to style all DIV elements with black background color, you will need to type it manually in all the DIV elements on the page.
The advantage is that this method load faster than the external and eternal. The disadvantage is that only the particular element that the inline apply to that will be affected.

Now we know their individual differences, let's move on to practice them.

.header
{
width:100%;
height:120px;
background-color:dar­kblue;
 color:white;
}
Save as externalfile.css
Note: this style need to be save as externalfile.css in a separate file.

Below is the html web page linked to the above css external style file (externalfile.css).

<!DOCTYPE html>
 <html>
<head>
<title>css styling</title>
 <link rel=”stylesheet” type=”text/css” href=”externalfile.css” >
</head>
<body>
<header class="header">page main menu</header>
</body>
</html>
Save as index1.html

Now you can see that we linked the externalfile.css to the index1.html page. Therefore, the header class will affected with externalfile.css. This method enable designers, developers apply one external css file to multiple html web pages.

Note: Both externalfile.css and index1.html are saved in the same directory.


Below is the internal styling method:

<!DOCTYPE html>
 <html>
<head>
<title>css styling</title>
<style  type=”text/css”>
.header
{
width:100%;
height:120px;
background-color:dar­kblue;
color:white;
}
</style>
</head>
<body>
<header class="header">page main menu</header>
</body>
</html>
Save as index2.html

The index2.html page above, we put all the styling in the HEAD opening and closing tag of the page.



Below is the inline styling method:

<!DOCTYPE html>
 <html>
<head>
<title>css styling</title>
</head>
<body>
<header style=”width:100%;height:120px;background-color:darkblue;color:white;”>page main menu</header>
</body>
</html>
Save as index3.html






As you can see in the above html page, the styling is included only inside the HEADER element.

Note: You must use STYLE attribute when writing inline style code.

This is just css styling introduction. If you like this tutorial share it.



Comments

Post a Comment

Popular posts from this blog

How to Delete Record From Table Using PHP MySQL

Image
Allowing users to deactivate/delete their account, to delete post/article and even friend and unfriend system however require the PHP MYSQL delete query if you’re dealing with PHP MYSQL database. To delete post, user account all require this same delete query. So in this tutorial I’ll be showing you how to delete post from table using MySQL delete query. some useful tutorials: Building JavaScript WYSIWYG Text Editor From Scratch How to Make Facebook Kind of Like Button Using PHP Programming Language How to Get Value from URL Using PHP Programming Language Reading on I hope you already have your database, table created and some pretty records inserted in it then next is for us to get our hands dirty with the coding process. Everything is going to be put in same web page. So I have a DATABASE name -> delete and a TABLE name -> record. My table has three rows: post_id, post_title and post_content. post_id ...
Read more

Guide to add blog URL to Google search console

Image
 In one of my recent blog posts, I explained how to submit your blog for AdSense approval and things you should do first before applying. Now, in this post, I want to teach you how to add your blog url to Google search console. maybe, you might ask why this is important. Calm down, I will explain why you need to add you blog to Google search console. For you to get better traffic result in blogging, your blog need to rank high in search engines. And Google is the world's number #1 search engine. So making your blog to show on search engines will fetch you a lot organic traffic. Now you see why you should consider adding your blog url to Google search console? This is exactly what I'm going to teach you on this post. mind you, I'm making this post for Blogspot users. So first, go to your blogger dashboard and click to open the menu tab, scroll down a bit and click settings. When the settings menu come up, scroll down and click Google search console. Now when the Google searc...
Read more

Best steps to master JavaScript programming language

Image
To build web app, JavaScript is not exceptional because of its ability to manipulate the browser environment. Beyond client side scripting, JavaScript libraries enable us to interact with server side, exchanging data with php . This tutorial is not about JavaScript libraries, this tutorial is to give you steps that will enable you understand and master the language itself. Many are battling with JavaScript without knowing the real course, what would this course may be? This is what I am going to tell you here. Don’t say JavaScript is hard because of the way you start learning. If you start in the right direction you’ll get it right. To understand JavaScript we must know how the language works, then how can we know how the language work is another question on its own. For web app, after learning html and css they usually tell us to learn JavaScript before learning php, isn’t it? The pattern in which the language report error is another annoying thing, compared to tha...
Read more