You are here

Inline CSS

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 :

And this is what we call , Inline CSS

you can use it on anything , not only on colors !

 

important tip : when you use this technique , don't forget to put these marks ""

 

 

Author : Ibrahim Kettaneh

www.grook.net