Descendent Selectors in CSS & Using CSS in HTML For Emphasizing Text

Tutorial # 5

CSS Descendant selector is another important technique for incorporating CSS into HTML. This techniques allows CSS to be used in CSS only when you specify in the HTML. This can only be used when element is a descendant. An important feature in style sheet tutorial.

Defining CSS Rule:

It can be define by seperating the element with the space like

h2 em { color:white; background-color:black;}
This rules assign text white color and background will be black.

Using This in HTML:

Now we will use our CSS rule where we want to implement in the header,paragraphs depends on you like but i defined rule for h2 header so this will work only in h2 header.

<h2> This is Header with <em> EMPHASZIED </em> text </h2>

Output of Above CSS Rule Used in HTML:

descendent selectors CSS Code in HTML:

Remember Do not copy paste code from here download all Codes files given at the end of post.

<html> <head><title> Tutorial # 5 descendent selectors </title> <style type=”text/css”> <!–h2 em { color:white; background-color:black;}–></style> </head><body><h2> This is Header with <em> EMPHASZIED </em> text </h2>
</body>

</html>

 

See Output in Real time HTML:

See Output

 

Complex Example :

Let say you have an emphasize text in the paragraph and you want to assign text-color:black and background-color:white;.
you have to write a CSS rule for paragraph see code below to write that CSS rule.

Output of Above CSS Rule Used in HTML:

descendent selectors 2Code Using Rule in HTML:

Remember Do not copy paste code from here download all Codes files given at the end of post.

<html> <head><title> Tutorial # 4 ID selectors </title> <style type=”text/css”> <!–.blue {color:blue} h#red {color:red}p em { color:white; background-color:black;} –></style> </head><body>

<h2 id=”red”> This is H2 Heading </h2>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> 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 of Above Code In Real Time HTML:

See Output 2

Why We Use Descendant Selectors:

If we want to assign the CSS rule to only paragraph then we have to use this technique. For example in the above example if we emphasize h2 then only heading text will emphasized its background and text color will never change because we are using it only in paragraph and h2 is not a descendant of paragraph.

Required Output of Above Discussion:

descendent selectors 3

Code Using CSS in HTML:

Remember Do not copy paste code from here download all Codes files given at the end of post.

<html> <head><title> Tutorial # 4 ID selectors </title> <style type=”text/css”> <!–.blue {color:blue} h#red {color:red} p em { color:white; background-color:black;}–></style>
</head>

<body>

<h1 id=”red”> This is H1 <em> Heading </em> </h1>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> 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 In Real Time HTML:

 See output 3

Download All Code Files and Outputs:

Download Code

See Tutorial#4

See Tutorial#6

You may be also interested in

Login With Twitter iOS

2 thoughts on “Descendent Selectors in CSS & Using CSS in HTML For Emphasizing Text”

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>