In this post, we will see the way to create Style Rules in HTML 5.

Style is a rule we apply to tags

  1. These rules {style} can be applied to individual instance of tags.
  2. These rules {style} can be applied to all instances of a particular tag within a document.
  3. These rules {style} can be applied to all instances of particular tag within a group of document.

To create Style Rules you have three options as depicted in below diagram

image

Constructing Style

To construct a Style to be used in the same document, you need to follow below steps

You have to put <style></style> in head section of the document. Notice that in HTML 5, you do not need to provide any type of the style.

 

clip_image001

 

If you want to create rule for tag H1 then you can create it as below. If you notice tag is not within the bracket

 

clip_image002

You can set more than one rule for a tag in same style rule. For example if you want to set color and font size as well. Then you will have to separate both rules by the semicolon

 

clip_image003

If you want to apply same rule to more than one tag , you can very much do that by separating all tags by comma

clip_image004

If you apply above created style and use tag h1 then you will get html page rendered as below,


<!DOCTYPE html>
<html >
<head>
<title>
HTML5
</title>
<style>
h1,h2,h3
{
color:Red ;
}
</style>
</head>
<body>
<h1>Hello HTML 5</h1>
</body>
</html>

Expected rendering would be as below,

image

Constructing Style for Nested Tags

Sometime you may have requirement to put certain style rules to tags when they are nested in other tags. For example; you want to make UL as square if it is nested inside an OL. You can very much do that in HTML 5 as below,

image

 

You can apply rules to tags nested to any level. For example if you want to apply h1 tag inside a ul tag and ul tag is inside ol then you can apply very much like below,

image

In below HTML , rules [color red] being applied to tag h1 nested inside ol and ul . whereas there is no rule for usual h1.


<!DOCTYPE html>
<html >
<head>
<title>
HTML5
</title>
<style>
ol ul h1
{
color:Red
}
</style>
</head>
<body>
<h1>Hello HTML 5</h1>
<ol>
<li> One </li>
<li>Two
<ul>
<li>
<h1>Two A </h1>
</li>
</ul>
</li>
</html>

&nbsp;

When you view in browser above HTML you will get expected rendering as below. Please notice that β€œHello HTML 5” text is rending with usual h1 whereas TWO A is in the color red.

image

Creating Classes and Id for Style

So far we are creating rules for a particular tag and setting it as style. There may be scenario where you do not want to apply style to all appearance of tags in a particular document. For example you are listing all the students and want to set color red only for students enrolled newly. In that case you have two choices

  1. Apply style to each new student item manually
  2. Create a class and apply to the new students. What advantage you get here is that if tomorrow you want to change color from red to blue, you will have to change only at one place.

You can either create class or Id. Both mark a certain element to refer then in style sheet.

image

You create a class as below,

image

And then you apply it to selection in document as below,

image

You create Id as below,

image

And then you apply it in document as below,

image

Below HTML summarize abut class and id


<!DOCTYPE html>
<html >
<head>
<title>
HTML5
</title>
<style>
.MyStyleClass
{
color:Red
}
#MyStyleId
{
font-size : 42px
}
</style>
</head>
<body>
<h1 id=MyStyleId >Hey I am ID </h1>
<h2>Hey I am Class 1</h2>
<h3>Hey I am Class 2</h3>
</body>
</html>

&nbsp;

On rendering you should get the output as below in the browser

image

 

This was all about Style Rules in HTML5. I hope this post is useful. Thanks for reading Smile

If you find my posts useful you may like to follow me on twitter http://twitter.com/debug_mode or may like Facebook page of my blog http://www.facebook.com/DebugMode.Net If you want to see post on a particular topic please do write on FB page or tweet me about that, I would love to help you.

Advertisements

6 thoughts on “Creating Style Rules in HTML 5

  1. Nice post Dhananjay….

    But one observation from my side … these rules are not HTML5 specific πŸ™‚

    this is the way you apply styles using CSS πŸ™‚ this is a CSS basic primer πŸ™‚

    Keep up the good work …

  2. When you say Style , it is assumed you are talking about CSS reagrdless of the HTML 5 version. What I talked in this post “Styles in HTML 5” . So CSS to HTML 5

  3. HTML5 does not control the CSS. The CSS is governed by W3C and we have seen CSS 1 to 3 now with 3 i believe still in works. Having said that HTML5 just made it easy for devs to write the tag. Earlier semantics of HTML which was HTML4 needed you to specify what type is the tag i.e. . With HTML5 it was decided that as the name of the tag says is a style tag nothing else can be there. So HTML5 brings in the concept of browsers to respect the tag and interpret it as style without expecting the type attribute.

    Now coming to rules itself … take a look at this example from W3C.org http://www.w3.org/Style/Examples/011/firstcss. Aparently it says First CSS :). This page was created in April 2004 … way back for even HTML5 to be in sight :). Look at the doctype used – its HTML4 :). If you go through the example of CSS styles you will see the nesting and simple declaration of rules. for e.g.

    Here is a simple rule for body:
    body {
    padding-left: 11em;
    font-family: Georgia, “Times New Roman”,
    Times, serif;
    color: purple;
    background-color: #d8da3d }

    Here is a nested rule for a UL which says find any ul with class navbar and then find LI inside that hierarchy and apply the rule:
    ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }

    My point was to say that the rules are not governed by HTML5. They are governed by CSS spec. Thats why i said CSS Primer πŸ™‚

    Again this is just my perspective. Thoughts can differ. Have a good day πŸ™‚

  4. Hi Thanks for your detail comment ,

    very first , “HTML5 it was decided that as the name of the tag says is a style tag nothing else can be there. So HTML5 brings in the concept of browsers to respect the tag and interpret it as style without expecting the type attribute.”

    I am trying to make above line which is obvious for you [since u may have great exposure and exp ) to my readers { who are mainly college freshers and people with less than 3 year of exp } . that in HTML 5 only broswers respects tag even wut explictly saying.

    Thanks for ur comment from next time will try to be more sepcific .

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s