Tutorial for learning CSS

CSS is essential for every web designer and web developer. It’s work with html and save lots of your work. You can control style of single or multiple web pages with CSS at once. You must need to know HTML before learn CSS. You may learn JavaScript after learn this.

You can learn CSS easily from this post. To know about advance CSS you must know basic CSS. I try my best to do something for my visitors and learners.

The basic structure of CSS

<style>
p{
color:#777;
}
</style>

With HTML:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color:#777;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Types of CSS style sheet:

1. Inline style
2. Internal style sheet
3. External style sheet

Description:
1. Inline style: To use inline style you need to add style attribute to the specific tag. Example:

<p style = "color: green" >My first paragraph.</p>

2. Internal style sheet: This type of style sheets are use in head section under style tag.
Example:

<head>
<style>
p{
color:#777;
}
</style>
</head>

3. External style sheet: In this type of style sheet the styles are going to an external file and link to the document head section. Example:
a) At first create a file called “style.css”.
b) Then write the following code on this file:

p{
color:#777;
font-size:22px;
}

c) Add this to your page head section.

<link type="text/css" href="style.css" rel="stylesheet">

Here type=”text/css” says that this is a CSS style sheet file.
Then href=”style.css” says the styles are located in this file.
Last rel=”stylesheet” describe the relation between the document and the style file.

Which type of style sheet should be use and why?

1. Inline style: Inline style should use for small style changes. This is not recommend to use inline styles. So if you need a small style then you can use inline CSS style. I you want to set inline style on too many tags then it’s will be hard to manage and change the style.

2. Internal style sheet: This is used for medium size CSS style in head section. This is also page specific but this can dynamically generate by PHP. With a single line of code you can target many tags on your page and apply style. Code Reusability is better Inline style.

3. External style sheet: External style sheets are used when you write style for many page of your site. With one external style sheet you can control your hole site. This is simple to apply and change style to all your page at once.

So what is best?

Inline styles are best for one or two tags. Internal style sheets are best for small or medium size styles. External style sheets are best for large and several page of your site.
So external style sheets are better and easy to manage your hole site withe one style sheet.

Now you can choose what is essential for you.

Tags: , , ,

Leave a Reply