How to apply CSS (advance)

After knowing the basic, we can use them together and nested.

1. tagName.className – This will apply the style to tagName element with that className.

This will avoid unwanted style applying to tagName or className only element.

Or grouping of same tagName.

CSS:

tagName.className{ …style… }

HTML:

<tagName class=”className”></tagName>

example:

div.fontStyle{ font-size:24px; }

<div class=”fontStyle”>Font with 24px</div>

2. Nested style – This will apply the style to tagName element with the correct nested structure.

This will avoid style to be active on parent elements.

Or different style of same tagName but different parents.

CSS:

#idName tagName1 tagName2{}{ …style… }

HTML:

<tagName1 id=”idName”>

<tagName2></tagName2>

<otherTag></otherTag>

</tagName1>

example:

#container div p{ font-size:24px; }

<div id=”container”>

<div>

<p>Font with 24px</p>

<a>no style</a>

</div>

</div>

3. Nested style with className – This will apply the style to tagName element with the correct nested structure and className.

Even finer application of style.

CSS:

#idName tagName.className{}{ …style… }

HTML:

<tagName0 id=”idName”>

<tagName class=”className”></tagName>

<otherTag></otherTag>

</tagName0>

example:

#container a.fontStyle{ font-size:24px; }

<div id=”container”>

<a class=”fontStyle”>Font with 24px</a>

<a>no style</a>

</div>

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

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