Writing CSS Rules in Bacis HTML Coding and How to Include CSS in html with External CSS

Tutorial # 2 :

In this tutorial we are going to write CSS code by using style tags just like in Tutorial # 1  we wrote CSS code in style tags.Now let say if we want to insert background rule like i want to insert a blue background behind my red text then all the code will remain same just we have to insert a background rule see the code below and the red statement shown the new insertion to our previous code.

 

<html>
<head>

<title> Tutorial # 2 writing CSS Rules </title>
<Style type=”text/css”>

<!–
p
{
color: red;
font-weight:bold;
Background-color:blue;
}

–>
</style>
</head>
<body>

<p> This Color is RED and Bacground is Blue </p>

</body>

</html>

 See Output

Now lets move towards a little complex example to practice and understand more deeply about CSS so there are different elements in CSS like h1,h1,h3 h means top heading and h1 is greater in size while h2 is also greater but not greater than h1 and in the same way h3 is also greater in size but not more than h2.

<html>
<head>

<title> Tutorial # 2 writing CSS Rules </title>

</head>

<body>

<h1> This is H1 Heading </h1>

<p> THis is first paragraph </p>

<p> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body>

</html>

 See Output

Now to understand the flow of above code see the figure below

document tree html and css 2

  • First you have to write html and the head section should be in html while title should be inside head.
  • html also contains body beside head.Header and paragraph should be inside head.
  • And lastly emphasized text code should be in the paragraph in the case you want to emphasize a word.

So this can also be describe in terms of children and parents like body is the parent of paragraphs p while in the same way p is parent of emphasize text and in the same way emphasize text is children of p.Now this is very very important for example if i assign a color to p paragraph then emphasize text will also have that color means emphasize text is inheriting attributes of p paragraph and this kindof behavior is called inheritance

 

Including CSS in html Document :

Now there are some things to know  to include as indicated in the previous tutorial

  • Style type should be set like this <style > type=”text/css”> .
  • Your CSS code should be encapsulated in html comments  like    <!–     p{  color:blue;  }      –>.
  • This is because if browser don’t understand CSS so that is shouldn’t appear in the page contents.

Now let say if you have two paragraphs and you want to insert a background only below the 2nd paragraph then your code will be like the one shown below and new insertion to older is indicated by red statement.

<html>
<head>

<title> Hello World Simple Example CSS www.Stylebizz.com </title>
<Style type=”text/css”>

<!–
p
{
color: red;
font-weight:bold;
}

–->
</style>
</head>

 

 

<body>

<p> This Color is RED becuase we assigned red color above </p>
<p style=”background-color:blue; color:white; co”> This is 2nd paragraph and its backround is blue </p>

</body>
</html>

 See Output

External Style Sheets :

Now the 3rd way to include the CSS into your html is EXTERNAL STYLE SHEETS which is more useful and accepted method of including.

Now type the code just like below

<html>
<head>

<title> Hello World Simple Example CSS www.Stylebizz.com </title>
<link rel=”stylesheet” title “StyleBizz” href=”style.css” type=”text/css”>

</head>

<body>

<p> This Color is RED becuase we assigned red color above </p>

</body>
</html>

 See Output

Now see output and in the code you can see there is no CSS Rule is defined because we have defined rules in the external CSS to make an external CSS open a text file write CSS rules like

p
{
color:red;

}

then save the file with the any name and call that file in the code like above red highlighted code.

Now this very good method you can call this style sheet at any pages and its very good to use in practice.

Now if you want to make your background white make another text file with name bacground.css

 and write CSS rule like

body { bacground-color:gray;   }

<html>
<head>

<title> Hello World Simple Example CSS www.Stylebizz.com </title>
<link rel=”stylesheet” title “StyleBizz” href=”style.css” type=”text/css”>
<link rel=”stylesheet” title “StyleBizz” href=”Background.css” type=”text/css”>

</head>

<body>

<p> This Color is RED becuase we assigned red color above </p>

</body>
</html>

 See Output

See Tutorial # 1

See Tutorial # 3

5 thoughts on “Writing CSS Rules in Bacis HTML Coding and How to Include CSS in html with External CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>