Saturday, 21 December 2013

Saturday, December 21, 2013
2
Part 4
In the first three tutorials that we have done till now, we went through the basics of creating a CSS files and we got a basic idea of what 'id' and 'class' selectors mean and do. Now, in this tutorial we will be taking a look into the methods of applying or including the CSS files in our web pages.

If you want to refresh your memory about CSS and what it does then please do go through the previous tutorials.

Other CSS Tutorials in this Series : Part 1-3

How to Insert CSS in a Web page


The answer is very simple and its three. They are as follows.
  • Using External Style Sheets
  • Using Internal Style Sheets
  • Using Inline Styles
Now we will go through each of these methods and in each we will see an example as well.

Using External Style Sheets :


Lets imagine you have a website that has a lot of pages and adding the CSS styles to very page is really not a feasible idea.

What do you do in this case?
You provide a link that will include the CSS file to your web pages.

Why does this benefit you?

The answer is simple and important. As because you have included a single CSS file to all the pages, if you have to make any changes to the CSS code then you can simply do it in the CSS file. The update is reflected to all the pages that are importing the file.

How to link External CSS Style Sheets ?
To link the external CSS style sheets you need to use the <link> tag.

Syntax:
<link rel="stylesheet" type="text/css" href="your_css_files_source_link.css">
Example:
<link rel="stylesheet" type="text/css" href="aji_text.css">

Where do you place the link ?
Place your external CSS file links in between the <head>  </head> section.

Using Internal Style Sheets


The internal style sheets are to be used if you want to implement a single web page with a different style than that of the others (To make it unique).
  • They are placed in the head section of the page
  • To define internal style sheets we use the <style> tag
Here is an example:

<head>
<style>
hr {color:blue;}
p {margin-left:10px;font-size:12px;}
body {background-image:url("images/bg.jpg");}
</style>
</head>

Using Inline Style


This method should be avoided if possible and can be used in rare case if needed. The reason you should avoid this is because it make the presentation of the code look bad. There are methods that we showed in the previous tutorial that will help you to style specific HTML elements thereby making the use of Inline style less needed.


Here is an example of Inline Style:

 <p style="color:red;margin-left:10px;">This paragraph is using inline style.</p>

Tip : Placing a  link to an external style sheet after the internal style sheet in HTML <head>, will make the external style sheet override the internal style sheet!

This concludes our fourth CSS tutorial. We hope that this tutorial has helped you. Do share your thoughts about this tutorial and also share this with your friends.

2 comments: