Tue, 06/14/2011 - 07:44 — Isk

Inline css

Css can be implemented on the html code in many ways , you can use the external style sheet or many ways , today we are going to use the inline css .

Inline css

There are a lot of benefits of using the inline css , it’s the highest css priority , that means if you used a code in an external style sheet that changes the H1 tag to the red color for example and you used the inline css to change to a blue color , What will appear is the blue one , so you can use it in special situations .

In this tutorial about the inline css , we will make 2 H1 tags , and we will use this technique in one of them , let’s start :

1- This is the code which we will start from :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Inline CSS</title>

<style>

H1 {

color: #F00;

}

</style>

</head>

<body>

<h1>This is without inline css</h1>

<h1>This is with inline css</h1>

</body>

</html>

As you can see , we have defined the H1 tag to be a red color , and when you add any h1 tag , it will be red !! , but imagine if you want to make H1 tag with another color such as blue for example , without changing the color of the previous H1s , Here we will use what is called “ Inline css “

2- Now we want to change the phrase “This is with inline css “ to the blue color , without changing the other phrase , so instead of

<h1>This is with inline css</h1>

it will be

<h1 style="color: #33F;">This is with inline css</h1>

And the result :