life look

How to Apply Border Color, Style and Width Using CSS

mohammed alkharroubi

Link Author

Title: How to Apply Border Color, Style and Width Using CSS
Author: mohammed alkharroubi
Rating 5 of 5 Des:

With CSS border property, you can apply border along with specific color, style and width to any HTML element. In CSS border property you ...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
With CSS border property, you can apply border along with specific color, style and width to any HTML element. In CSS border property you can specify three values for width, style and color. Where width sets all borders in numeric measurement or with a named value of thin, medium and thick. The second value style is used to set the style of the border and is set to a value of dashed, dotted, double, groove, hidden, inset, none, outset, ridge, or solid. The last value color is used to set the color of the border using a CSS color value.</div>
<blockquote class="tr_bq">
Syntax: border: border-width border-style border-color</blockquote>
<blockquote class="tr_bq">
Example: p {border: 2px double red;}</blockquote>
<div style="text-align: justify;">
</div>
<h3 style="text-align: left;">
How to Apply Border for Individual Sides</h3>
<br />
<div style="text-align: justify;">
As mentioned  on border property you can apply border property for individual sides top, bottom, left and right with specifying values for them. There are border properties for each sides border-top, border-bottom, border-left and border-right respectively. You can specify values of border-width, border-style and border-color for border property of each sides. <br />
<a href="https://www.blogger.com/null" name="more"></a><br /></div>
<h4 style="text-align: left;">
Syntax:</h4>
<blockquote class="tr_bq">
<div style="text-align: justify;">
border-top: border-width border-style border-color<br />
border-bottom: border-width border-style border-color<br />
border-left: border-width border-style border-color<br />
border-right: border-width border-style border-color</div>
</blockquote>
<h4 style="text-align: left;">
Example: </h4>
<blockquote class="tr_bq">
<div style="text-align: justify;">
#topborder {border-top: thin dashed blue;}<br />
#bottomborder {border-bottom:thick dotted brown;}<br />
#leftborder {border-left: medium groove pink;}<br />
#rightborder {border-right: 2px double red;}</div>
</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="170" data-slug-hash="GJajEo" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/GJajEo/">GJajEo</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
How to Set Border Width for Each Sides</h3>
<br />
<div style="text-align: justify;">
In previous we have set border width, style and color for each sides top, bottom, left and right. If you have to apply border width only for those side without style and color, it is possible by using border width property for each sides. There are border width properties for individual sides, which are border-top-width, border-bottom-width, border-left-width and border-right-width. You can specify non-negative length or named value like medium, thick and thin value for each property. </div>
<h4 style="text-align: left;">
Syntax: </h4>
<blockquote class="tr_bq">
<div style="text-align: justify;">
border-top-width: non-negative length | thick| medium | thin | inherit<br />
border-bottom-width: non-negative length | thick| medium | thin | inherit<br />
border-left-width:  non-negative length | thick| medium | thin | inherit<br />
border-right-width:  non-negative length | thick| medium | thin | inherit</div>
</blockquote>
<h4 style="text-align: left;">
Example: </h4>
<blockquote class="tr_bq">
<div style="text-align: justify;">
#topwidth { border-top-width: 2px;border-top-style:solid;}<br />
#bottomwidth {border-bottom-width: thick;border-bottom-style:solid;}<br />
#leftwidth {border-left-width: medium;border-left-style:solid;}<br />
#rightwidth {border-right-width: thin;border-right-style:solid;}</div>
</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="159" data-slug-hash="aOrmyP" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/aOrmyP/">aOrmyP</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
How to Set Border Style for Each Sides</h3>
<br />
<div style="text-align: justify;">
As border width property for individual sides, you can specify border style property for each sides top, bottom, left and right without specifying width and color for individual sides. The border style properties for individual sides are border-top-style, border-bottom-style, border-left-style and border-right-style. You can specify named values like dashed, dotted, double, groove, hidden, inset, outset, ridge and solid along with inherit and none. </div>
<h4 style="text-align: left;">
Syntax: </h4>
<blockquote class="tr_bq">
border-top-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid<br />
border-bottom-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid<br />
border-left-style:  dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid<br />
border-right-style:  dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid</blockquote>
<h4 style="text-align: left;">
Example: </h4>
<blockquote class="tr_bq">
#topstyle { border-width: thick; border-top-style:solid;}<br />
#bottomstyle { border-width:thick; border-bottom-style:dashed;}<br />
#leftstyle { border-width:thick; border-left-style:double;}<br />
#rightstyle {border-width:thick; border-right-style:groove;}</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="182" data-slug-hash="EjzgwG" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/EjzgwG/">EjzgwG</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
How to Apply Border Color for Each Sides</h3>
<br />
<div style="text-align: justify;">
As border style property for individual sides, you can specify border color property for each sides top, bottom, left and right without specifying width and style for individual sides. If you have to apply border color only for those sides, it is possible by using border color property for each sides. There are border color properties for individual sides, which are border-top-color, border-bottom-color, border-left-color and border-right-color. You can specify any valid color value, transparent or inherit for value of each property.</div>
<h4 style="text-align: left;">
Syntax: </h4>
<blockquote class="tr_bq">
border-top-color: color | transparent | inherit<br />
border-bottom-color: color | transparent | inherit<br />
border-left-color: color | transparent | inherit<br />
border-right-color: color | transparent | inherit</blockquote>
<h4 style="text-align: left;">
Example: </h4>
<blockquote class="tr_bq">
#topcolor {border-width: thick; border-style:solid; border-top-color: red;}<br />
#bottomcolor {border-width: thick; border-style:solid;border-bottom-color: blue;}<br />
#leftcolor {border-width: thick; border-style:solid;border-left-color:brown;}<br />
#rightcolor {border-width: thick; border-style:solid;border-right-color:green;}</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="182" data-slug-hash="doEpJb" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/doEpJb/">doEpJb</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3 style="text-align: left;">
How Collapse or Separate Border Spacing</h3>
<br />
<div style="text-align: justify;">
You can make table border connected or separate by using CSS border property border-collapse which defines whether table cell borders are connected or separate. The default value for this property is separate, where each cell having a border with possible spacing. With the value of collapse, the borders appear to collapse on each other so that there is no more spacing between the borders. </div>
<blockquote class="tr_bq">
Syntax: border-collapse: collapse | separate | inherit </blockquote>
<blockquote class="tr_bq">
Example: #collapse {border-collapse: collapse;}<br />
#separate {border-collapse: separate;}</blockquote>
<div style="text-align: justify;">
</div>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="179" data-slug-hash="BNeLrW" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/BNeLrW/">BNeLrW</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br />
<br />
<h3 style="text-align: left;">
Related Posts:</h3>
<ul style="text-align: left;">
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-responsive-blogger-website-template.html">How to Create Responsive Website or Blogger Template</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-style-webpages-using-basic-core-selectors.html">How to Style Webpages Using Basic and Core CSS Selectors</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-to-design-webpages-using-css-attribute-selectors.html">How to Design Webpages using CSS Attribute Selectors</a></h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/select-particular-portion-html-using-css.html">How to Select Particular Portion of an HTML Document Using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html">How to Style Multiple Sections of an HTML Document Using CSS</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-to-set-background-image-or-color-using-css.html">How To Set Background Image or Color Using CSS</a><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.siteforinfotech.com/2015/08/how-to-set-background-image-or-color-using-css.html"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg84WwFZV3-O8p-XBNQZEIRxtsX8yDRgvHSI1J0KCKp_48aplfSGCemWJHpj-KLFiXq4q6LVM4VnLgjlm72bIRBBtNwhaOsywYrtCahY_ndFRP9EIh12QR94yPujU4nVohN2vlcUDvTz-Gv/s1600/Slide32.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg84WwFZV3-O8p-XBNQZEIRxtsX8yDRgvHSI1J0KCKp_48aplfSGCemWJHpj-KLFiXq4q6LVM4VnLgjlm72bIRBBtNwhaOsywYrtCahY_ndFRP9EIh12QR94yPujU4nVohN2vlcUDvTz-Gv/s320/Slide32.JPG" width="320" /></a></a></div>
</h3>
</li>
</ul>
</div>
</div>

How to Apply Border Color, Style and Width Using CSS

With CSS border property, you can apply border along with specific color, style and width to any HTML element. In CSS border property you ...

How To Set Background Image or Color Using CSS

mohammed alkharroubi

Link Author

Title: How To Set Background Image or Color Using CSS
Author: mohammed alkharroubi
Rating 5 of 5 Des:

With background property in CSS, you can set background color or image in HTML element. There are different sub-properties of background p...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
With background property in CSS, you can set background color or image in HTML element. There are different sub-properties of background property, which are background-color-to set background color, background-image-to set image in a background, background-repeat-to tile image in background when image is smaller than the canvas space, background-attachment-to set an image to scroll or fixed and background-position-to set the position or align of an image. Using short hand property of background, you can specify all of these sub-properties at a time as given below. </div>
<blockquote class="tr_bq">
Syntax: background: background-color background-image background-repeat background-attachment background-position;</blockquote>
<blockquote class="tr_bq">
Example: #section1 {background: pink url(back.png) no-repeat fixed 10px 10px;}</blockquote>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
How to Set Background Color Using CSS</h3>
<br />
<div style="text-align: justify;">
You can set background color using background-color property. The default value of this property is transparent, which allows any underlying content to show through. You can specify color value in any format for this property. </div>
<blockquote class="tr_bq">
Syntax: background-color: color|transparent|inherit</blockquote>
<blockquote class="tr_bq">
Example: #para1{background-color:#00AAFF;}</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="119" data-slug-hash="zGQGzx" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/zGQGzx/">zGQGzx</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3 style="text-align: left;">
How to Set Background Image Using CSS</h3>
<br />
<div style="text-align: justify;">
CSS allows to set an image in background using background-image property. This property associates a background image with an element. Content laying under may show through transparent regions in the source image. The background image requires a URL whether complete or relative to link it to the source image specified with the url() syntax. The default value for this property is none which sets the background so that is doesn't display image. <br />
<a href="https://www.blogger.com/null" name="more"></a><br /></div>
<blockquote class="tr_bq">
Syntax: background-image: url(image-url)|none|inherit</blockquote>
<h4 style="text-align: left;">
Example: </h4>
<blockquote class="tr_bq">
#div1 {background-image: url(background1.gif);}<br />
#div2 {background-image: none;}</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="178" data-slug-hash="ZGNGyg" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/ZGNGyg/">ZGNGyg</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
How to Make Background Image to Scroll or not Using CSS</h3>
<br />
<div style="text-align: justify;">
There is a property in CSS called background-attachment property to make background image to scroll or not to scroll with the associated content. The default value for this property is scroll, which sets the background to scroll with the associated content. The alternate value of this property is fixed which is intended to make the background static while associated content such as text scrolls over background. There is a another value called inherit to apply the value of this property from a containing parent element. </div>
<blockquote class="tr_bq">
Syntax: background-attachment: scroll|fixed|inherit</blockquote>
<h4 style="text-align: left;">
Example: </h4>
<blockquote class="tr_bq">
div {background-image: url(image1.gif); background-attachment:scroll;}<br />
#para1{background-image: url(image2.gif); background-attachment:fixed;}</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="226" data-slug-hash="YXbXxQ" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/YXbXxQ/">YXbXxQ</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
How to Set Background Image Position Using CSS</h3>
<br />
<div style="text-align: justify;">
Background position property determines how a background image is positioned within the canvas space used by its associated element. You can specify the position of the background image "upper-left corner" as an absolute distance in pixels or as an relative distance in percentage along with horizontal and vertical dimensions. The position of the image can be specified as named values for the horizontal axis like left, center and right and vertical axis like top, center and bottom. The default value for an unspecified dimension os assumed to be center. </div>
<blockquote class="tr_bq">
Syntax: background-position: percentage|length|left|center|right percentage|length|top|center|bottom</blockquote>
<h4 style="text-align: left;">
Example: </h4>
<blockquote class="tr_bq">
#para1 {background-image: url(imge1.gif); background-position: 20px; 30px;}<br />
#div1{ background-image: url(image2.gif); background-position:5% 10%;}<br />
#position{background-image: url(image3.gif); background-position:top right;}<br />
#position2{background-image: url(image3.gif); background-position:bottom left;}</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="251" data-slug-hash="BNeNmV" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/BNeNmV/">BNeNmV</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
How to Tile Background Image Using CSS</h3>
<br />
<div style="text-align: justify;">
You can tile background image horizontally or vertically using CSS property background-repeat. This property determines how background images specified by the property background or background-image tile when they are smaller than the canvas space used by their associated elements. The possible value in this property are repeat-which repeats in both direction, repeat-x repeats only horizontally, repeat-y repeats vertically and no-repeat. The default value for this property is repeat. </div>
<blockquote class="tr_bq">
Syntax: background-repeat: repeat|repeat-x|repeat-y|no-repeat|inherit</blockquote>
<h4 style="text-align: left;">
Example:</h4>
<blockquote class="tr_bq">
#div1{background-image: url(image1.gif) background-repeat:repeat;}<br />
#div2{background-image: url(image2.gif) background-repeat:repeat-x;}<br />
#div3{background-image: url(image3.gif) background-repeat:repeat-y;}<br />
#div4{background-image: url(image4.gif) background-repeat:no-repeat;}</blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="242" data-slug-hash="vOwOpe" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/vOwOpe/">vOwOpe</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<div style="text-align: justify;">
<br /></div>
<h4 style="text-align: left;">
Read Next:<a href="http://www.siteforinfotech.com/2015/08/how-to-apply-border-color-style-width-css.html">How to Apply Border Color, Style and Width Using CSS</a></h4>
<h3 style="text-align: left;">
Related Posts:</h3>
<ul style="text-align: left;">
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-responsive-blogger-website-template.html">How to Create Responsive Website or Blogger Template</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-style-webpages-using-basic-core-selectors.html">How to Style Webpages Using Basic and Core CSS Selectors</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-to-design-webpages-using-css-attribute-selectors.html">How to Design Webpages using CSS Attribute Selectors</a></h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/select-particular-portion-html-using-css.html">How to Select Particular Portion of an HTML Document Using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html">How to Style Multiple Sections of an HTML Document Using CSS</a><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV45WCD3V8fdWAPgI9MjWEcktRs68WArDLwtdvzC1qBNOQgMJkGpky59vaN_8YgsCIHCoAvZYQqTiVScJ_CtxJ7pcOL_HFo2bxq2eFyN8YywIzj4mIhyphenhyphenosQ-RnZkDq9JNtjhfb6TY43Yd9/s1600/Slide21.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV45WCD3V8fdWAPgI9MjWEcktRs68WArDLwtdvzC1qBNOQgMJkGpky59vaN_8YgsCIHCoAvZYQqTiVScJ_CtxJ7pcOL_HFo2bxq2eFyN8YywIzj4mIhyphenhyphenosQ-RnZkDq9JNtjhfb6TY43Yd9/s320/Slide21.JPG" width="320" /></a></a></div>
</h3>
</li>
</ul>
</div>

How To Set Background Image or Color Using CSS

With background property in CSS, you can set background color or image in HTML element. There are different sub-properties of background p...

How to Style Multiple Sections of an HTML Document Using CSS [cont.]

mohammed alkharroubi

Link Author

Title: How to Style Multiple Sections of an HTML Document Using CSS [cont.]
Author: mohammed alkharroubi
Rating 5 of 5 Des:

We have already discussed that, we can style multiple sections of an HTML document using CSS selectors pseudo classes and have discussed ...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
We have already discussed that, we can <a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html" target="_blank">style multiple sections of an HTML document using CSS selectors pseudo classes</a> and have discussed on some pseudo-class selectors like link related pseudo classes, activity related pseudo classes and interface state pseudo classes. In this post we are going to discuss about rest of the other pseudo class selectors which are document tree pseudo classes, language pseudo class and negation pseudo class. <br />
<br />
<h3>
Document Tree Pseudo Classes </h3>
<br />
The HTML document tree is a standard object model and programming interface for HTML. It defines the HTML elements as objects, properties of all HTML elements, methods to access all HTML elements and events for all HTML elements. You can control and style different elements in HTML document tree using CSS pseudo classes. <br />
<br />
CSS2 supports different pseudo classes for a HTML document tree like :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n) and :nth-last-of-type(n). <br />
<br />
The :first-child pseudo class selector selects the elements that are the default among a set of similar elements. For example, <br />
<blockquote class="tr_bq">
ul li:first-child {color:brown;}</blockquote>
would make the first <li> tag found within <ul> brown color. <br />
<br />
Similarly, the :last-child pseudo class selector selects the elements that is the last child or its parent. For example, <br />
<blockquote class="tr_bq">
ul li:last-child {background-color:pink;}</blockquote>
would make the last list item in an unordered list have blue text and background color pink.<br />
<a href="https://www.blogger.com/null" name="more"></a><br />
<h4>
Example: </h4>
Here is an example to illustrate the uses of :first-child and :last-child pseudo-classes in HTML document.<br />
<blockquote class="tr_bq">
CSS code:ul li:first-child {color:brown;}<br />
ul li:last-child {background-color:pink;}</blockquote>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <ul><li>This is the first child of unordered list </li><br />
<li>This is the second child of unordered list </li><br />
<li>This is the last child of unordered list </li></ul></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="128" data-slug-hash="yNrqQX" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/yNrqQX/">yNrqQX</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
The :first-of-type pseudo class selector selects the element that is the first child of its parent that is of its type. Similarly, :last-of-type selects the element that is the last child of its parent that is of its type. For example<br />
<blockquote class="tr_bq">
p span:first-of-type {color:red;}<br />
p span:last-of-type {color:green;}</blockquote>
would set the first <span> tag found in the paragraph to red and the last <span> tag found in the paragraph to green. <br />
<br />
The :nth-of-type(n) pseudo class selector selects the element that is the nth child of its parent that is its type. Similarly, :nth-last-of-type(n) selects the element that is the nth from last child of its parent that is its type. For example,<br />
<blockquote class="tr_bq">
p span:nth-of-type(3) {color:brown;}<br />
p span:nth-last-of-type(2) {background-color:pink;}</blockquote>
would set the third <span> tag found in the paragraph to brown and the second-to-last <span> tag background-color pink.<br />
<h4>
Example:</h4>
Here is an example to illustrate the uses of :first-of-type, :last-of-type, :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes in HTML document.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
CSS code:p span:first-of-type {color:red;}<br />
p span:last-of-type {color:green;} <br />
p span:nth-of-type(3) {color:brown;}<br />
p span:nth-last-of-type(2) {background-color:pink;}</blockquote>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code:<p><span>It is first paragraph is red</span><br/> <span>It is second paragraph </span><br/> <span>It is third paragraph is brown </span><br/> <span>It is fourth paragraph is pink </span><br/> <span>It is fifth paragraph is green</span></p></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="177" data-slug-hash="rVbrPJ" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/rVbrPJ/">rVbrPJ</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
The :only-child pseudo class selector selects the element if it's the only child of its parent and :only-of-type selects an element if its the only child of its parent with its type. For example, <br />
<blockquote class="tr_bq">
span:only-child {color:blue;}<br />
p:only-of-type {color:purple;}</blockquote>
First line would set the color of <span> element to blue if the <span> is the only child of its parent and second line would set the <p> element to purple if it is the only <p> tag child of its parent.<br />
<br />
The :nth-child(n) pseudo class selector selects the element that is the nth child of its parent and :nth-last-child(n) selects the element that is the nth-from-last child of its parent. For example, <br />
<blockquote class="tr_bq">
div:nth-child(2) {background-color:yellow;}<br />
div:nth-last-child(2) {color:green;}</blockquote>
would set the background color to yellow if the div is its parent's second child and font color to green if the div is its parent's second-to-last child.<br />
<br />
The :root pseudo class selector selects the element that is the root of the document and :empty selects an element that has no children. For example, <br />
<blockquote class="tr_bq">
:root {background-color: brown;}<br />
div:empty{background-color:green;}</blockquote>
would sets the background-color brown for the root element and sets the background-color green if it has no children.<br />
<h4>
Example:</h4>
Here is an example to illustrate the uses of :only-child, :only-of-type, :nth-child(n), :nth-last-child(n), :root and :empty pseudo-classes in HTML document.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
CSS code: span:only-child {color:blue;} p:only-of-type {color:purple;} div:nth-child(2) {background-color:yellow;} div:nth-last-child(4) {color:green;} :root {background-color: pink;} p:empty{background-color: green; width:100px;height:20px;}</blockquote>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <b><span>This line is blue</span></b> <div>It is first "div" tag </div> <div>It is second "div" tag </div> <div>It is third "div" tag </div> <p>It is first "p" tag </p> <p></p></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="219" data-slug-hash="XbQBwq" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/XbQBwq/">XbQBwq</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Language Pseudo Class</h3>
<br />
We have already discussed in CSS attribute selectors, which can be used to address values set for the common lang attribute. The :lang() pseudo-class also performs the same thing as the |= selector. <br />
Instead of writing <br />
<blockquote class="tr_bq">
p[lang |="en"] {color:red}</blockquote>
we can write using :lang() pseudo-class as the following <br />
<blockquote class="tr_bq">
p:lang(en) {color:red;}</blockquote>
which makes all paragraphs written in English to red.<br />
<h4>
Example:</h4>
<div style="text-align: left;">
<blockquote class="tr_bq">
CSS code: p:lang(en) {color:red;}</blockquote>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <p lang="en">This is English and red</p><br />
<p lang="en-uk">This is British English and red</p><br />
<p>This is not red</p><br />
<p lang="fr">Ceci est le français et pas rouge</p></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="205" data-slug-hash="EjJeVd" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/EjJeVd/">EjJeVd</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Negation Pseudo Class</h3>
<br />
There is one of the most interesting pseudo-classes introduced by CSS3 is :not() selector. Which takes simple parameters such as element type selectors, the wildcard selector, attribute selector, id selectors, class selectors and pseudo-class selectors. For example the rule,<br />
<blockquote class="tr_bq">
#menubar > a:not (:visited) {color:pink;}</blockquote>
would select all links with an element having id "menubar" that are not being visited set them to pink color.<br />
<h4>
Example:</h4>
<div style="text-align: left;">
<blockquote class="tr_bq">
CSS code: #menubar > a:not (:visited) {color:pink;}</blockquote>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <div id="menubar"><a href="www.siteforinfotech.com">Infotech Site</a></div></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="82" data-slug-hash="vOMzLY" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/vOMzLY/">vOMzLY</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
</div>
<br />
<h4 style="text-align: left;">
Read Next:<a href="http://www.siteforinfotech.com/2015/08/how-to-set-background-image-or-color-using-css.html">How To Set Background Image or Color Using CSS</a></h4>
<h3 style="text-align: left;">
Related Posts:</h3>
<ul style="text-align: left;">
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-responsive-blogger-website-template.html">How to Create Responsive Website or Blogger Template</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-style-webpages-using-basic-core-selectors.html">How to Style Webpages Using Basic and Core CSS Selectors</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-to-design-webpages-using-css-attribute-selectors.html">How to Design Webpages using CSS Attribute Selectors</a></h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/select-particular-portion-html-using-css.html">How to Select Particular Portion of an HTML Document Using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html">How to Style Multiple Sections of an HTML Document Using CSS</a></h3>
</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKGFUs5JQPtbSGkMfK14oVLoWL40NuSHxyf6CTBgXs7AOgf3EIlwCRDuMjQ8JpOdTOQRU-hbIOLqc_aQEdL6i5gxahL9M9YIwYSvowaZFbfOBJeTnXIYSZ62etmwE9PveQ0TsUVBfpCJua/s1600/Slide52.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKGFUs5JQPtbSGkMfK14oVLoWL40NuSHxyf6CTBgXs7AOgf3EIlwCRDuMjQ8JpOdTOQRU-hbIOLqc_aQEdL6i5gxahL9M9YIwYSvowaZFbfOBJeTnXIYSZ62etmwE9PveQ0TsUVBfpCJua/s320/Slide52.JPG" width="320" /></a></div>
<ul style="text-align: left;"></ul>
</div>

How to Style Multiple Sections of an HTML Document Using CSS [cont.]

We have already discussed that, we can style multiple sections of an HTML document using CSS selectors pseudo classes and have discussed ...

How to Style Multiple Sections of an HTML Document Using CSS

mohammed alkharroubi

Link Author

Title: How to Style Multiple Sections of an HTML Document Using CSS
Author: mohammed alkharroubi
Rating 5 of 5 Des:

In the previous post I have talked about selecting particular portion of an HTML document while designing web pages. Similarly this, you m...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
In the previous post I have talked about selecting particular portion of an HTML document while designing web pages. Similarly this, you may also style multiple sections of an HTML document using CSS. There are selectors pseudo classes like pseudo elements allow CSS selectors to specify styles for multiple sections of a document tree that may not have style groups clearly associated with them.  Traditionally, pseudo classes were dominantly used with link states and simple interface states, but under CSS2 and CSS3, the number of pseudo classes has exploded to include a wide variety of document position and tree logic selectors. Here I am describing syntax and examples of different pseudo-class selectors used in CSS. <br />
<br />
<h3>
Link Related Pseudo Classes</h3>
<br />
If you are new with using web sites, you'll know that there are three primary states of typical text links: unvisited, visited and active -in which the link text color is blue, purple and red, respectively. In CSS, the presentation of link states is controlled through the pseudo class selectors- a:link, a:visited and a:active.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
a:link    {color:green; text-decoration:none;}<br />
a:active  {color:pink; background-color: #00aaff;}<br />
a:visited {color:brown; text-decoration:none;}</blockquote>
</div>
CSS2 also adds a:hover for the mouse hovering over a link. Similarly, the pseudo class :focus would be selected when the link gains focus, generally through keyboard navigation.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
a:hover {color:red; text-decoration:underline;}<br />
a:focus {border:1px dashed #00aaff}</blockquote>
</div>
<h4>
Example: </h4>
Here is an example to illustrate the uses of a:link, a:active, a:visited, a:hover and a:focus Pseudo-Classes in HTML document.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
CSS code: a:link    {color:green; text-decoration:none;}<br />
a:active  {color:pink; background-color: #00aaff;}<br />
a:visited {color:brown; text-decoration:none;}<br />
a:hover {color:red; text-decoration:underline;}<br />
a:focus {border:1px dashed #00aaff}</blockquote>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <a href="http://www.siteforinfotech.com">Infotech Site-Best Place For Complete IT Tips</a></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="167" data-slug-hash="PqgqXX" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/PqgqXX/">PqgqXX</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Activity Related Pseudo Classes </h3>
<br />
I have just talked about link related pseudo classes a:hover and a:focus-used mainly to change the appearance of links when user hover and focus on them. There are another pseudo classes related to user activity, they are :hover and :focus-can apply pseudo class to any element. The :focus pseudo class is used to apply a rule to an element only when that element has focus. To set any text input field to have pink background color when it gains focus, you could use the following rule.<br />
<a href="https://www.blogger.com/null" name="more"></a><br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input[type=text]:focus {background-color:pink;}</blockquote>
</div>
Similarly, to set any paragraph to have light-blue color when mouse is hover to it, you could use a rule such as the following.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
p:hover {background-color:pink;}</blockquote>
</div>
<h4>
Example: </h4>
<br />
Here is an example to illustrate the uses of :hover and :focus activity related pseudo-classes in HTML document.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
CSS code: input[type=text]:focus {background-color:pink;}<br />
input[type=text]:hover {background-color:yellow;}<br />
.animate:hover {background-color<code class=" cm-s-default" data-alt-lang="css" data-lang="css" data-og-lang="css" id="actual-css-code"><span class="cm-keyword">:pink</span>;</code>}</blockquote>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <p class="animate">This whole paragraph will animate on mouse hover</p><br />
<p>Now only<span class="animate>this word</span> will animate on mouse hover</p><br />
<form action="#"><div><input type="text" value="Hover or Focus on this"></div></form></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="164" data-slug-hash="mJgJvz" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/mJgJvz/">mJgJvz</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Interface State Pseudo Classes</h3>
<br />
User interface elements such as forms have various states depending on user activity. CSS3 introduces pseudo classes to style form elements depending on state. For example, :enabled and :disabled are used to specify the style for elements that have been enabled or disabled, respectively. For example the rule<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input[type=text]:enabled {background-color:pink;}<br />
input[type=text]:disabled {background-color:gray;}</blockquote>
</div>
Similarly, the style of check boxes and radio buttons can be controlled using the :checked pseudo class. For example the rule<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input[type=checkbox]:checked {border:1px dotted red;}</blockquote>
</div>
There are another user interface selectors defined in CSS3 like :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write. For an example here are the rules<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input[type=text]:read-only {border:2px solid brown;}</blockquote>
</div>
<br />
In a web form, there may be any option default in a input field, for example in a set of radio buttons there may be any option default. Similarly in checkbox option there may be one or more option default. Using :default selector you can apply custom style for them using the following rule.<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input:default + label{color: blue;}</blockquote>
</div>
<br />
It will make the label color blue for default value of input field. <br />
<br />
The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted.The :optional pseudo-class may be used to provide an appearance for optional form fields. For example here are the rules<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input:required {border-color: blue;border-width: 3px;}<br />
input:optional {border-color: green;border-width: 3px;}</blockquote>
</div>
<br />
The :invalid CSS pseudo-class represents any <input> or <form> element whose content fails to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors. Similarly :valid pseudo class is used for valid data. For example here are the rules<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input:invalid {background-color: brown;} <br />
input:valid {background-color: pink;} </blockquote>
</div>
<br />
The :read-write CSS pseudo-class matches when an element is editable by user like text input element and :read-only CSS pseudo-class matches when an element is not editable by user like label element. For example here are the rules<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input:read-write {background: white;}<br />
input:read-only{background: #999;}</blockquote>
</div>
<br />
The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits. The CSS pseudo-class :out-of-range is opposite of :in-range pseudo-class. For example here are the rules<br />
<div style="text-align: left;">
<blockquote class="tr_bq">
input:in-range {background-color: light-green;}<br />
input:out-of-range {background-color: pink;}</blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="462" data-slug-hash="zGXvvd" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/zGXvvd/">zGXvvd</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
</div>
<br />
<h4 style="text-align: left;">
Read Next:<a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css2.html">How to Style Multiple Sections of an HTML Doucment Using CSS [cont.]</a></h4>
<h3 style="text-align: left;">
Related Posts:</h3>
<ul style="text-align: left;">
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-responsive-blogger-website-template.html">How to Create Responsive Website or Blogger Template</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-style-webpages-using-basic-core-selectors.html">How to Style Webpages Using Basic and Core CSS Selectors</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-to-design-webpages-using-css-attribute-selectors.html">How to Design Webpages using CSS Attribute Selectors</a></h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/select-particular-portion-html-using-css.html">How to Select Particular Portion of an HTML Document Using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html">How to Style Multiple Sections of an HTML Document Using CSS</a><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinilkYiWfeUGmd4C0puw2qrdFceHK4nAYkqqAc1xJZyLMIEBjxI-Q1ds898RJeyAAhEE1L-_GATO8fwc3Bw3ZWIm38R2oCK9JKgptL9I9tshp6bxb0A0LlvRPnXzSHLQVN7rGtGmE2QWuR/s1600/Slide41.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinilkYiWfeUGmd4C0puw2qrdFceHK4nAYkqqAc1xJZyLMIEBjxI-Q1ds898RJeyAAhEE1L-_GATO8fwc3Bw3ZWIm38R2oCK9JKgptL9I9tshp6bxb0A0LlvRPnXzSHLQVN7rGtGmE2QWuR/s320/Slide41.JPG" width="320" /></a></a></div>
</h3>
</li>
</ul>
</div>

How to Style Multiple Sections of an HTML Document Using CSS

In the previous post I have talked about selecting particular portion of an HTML document while designing web pages. Similarly this, you m...

How to Select Particular Portion of an HTML Document Using CSS

mohammed alkharroubi

Link Author

Title: How to Select Particular Portion of an HTML Document Using CSS
Author: mohammed alkharroubi
Rating 5 of 5 Des:

While designing web pages, you may face a problem in which you want to select particular portion of an HTML document but there is not a de...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
While designing web pages, you may face a problem in which you want to select particular portion of an HTML document but there is not a defined element associated with it. CSS provides the ability to style portions of a document tree without a unique element associated with the content. CSS creates an element to effect this change in a particular portion of an HTML document, such selectors are called pseudo-element selectors. Here I am describing syntax and examples of different pseudo-element selectors used in CSS. </div>
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: left;">
:first-letter and :first-line Pseudo-Elements</h3>
<div style="text-align: justify;">
<br />
If you want to style the first line of a paragraph or a first character of a paragraph, it would be easy enough to specify a CSS selector. However, we might not actually have a full element that the rule is bound to, so a pseudo-element is thus implied. For example If you want to make the first character of a paragraph large, which was usually in Newspaper design, you can use pseudo-element rule :first-letter to bind style. </div>
<blockquote class="tr_bq">
p:first-letter {font-size:xx-large; color:red;}</blockquote>
<div style="text-align: justify;">
<br />
It would make every first letter of paragraph large and red. You can also make the initial line of paragraph a different style using the :first-line pseudo-element.</div>
<blockquote class="tr_bq">
p:first-line {font-size:large; font-weight:bold;}</blockquote>
<div style="text-align: justify;">
<br />
It would make every first line of paragraph large and bold. These pseudo-classes aren't limited to <p> tags but they are generally limited to block elements. <br />
<br />
Under CSS3, the syntax of pseudo-elements has been changed to have two colons, so :first-line becomes ::first-line and :first-letter becomes ::first-letter.<br />
<a href="https://www.blogger.com/null" name="more"></a><br /></div>
<h4 style="text-align: left;">
Example: </h4>
<div style="text-align: justify;">
Here is an example to illustrate the uses of :first-letter and :first-line Pseudo-Elements in HTML document. </div>
<blockquote class="tr_bq">
CSS code: p:first-letter {font-size:5em; color:red; font-weight:bold; float:left; margin-right:0.1em}<br />
p:first-line {font-size:x-large; font-weight:bold;}</blockquote>
<blockquote class="tr_bq">
HTML code: <body><p>It was the first paragraph, the first letter of the paragraph was 5em, bold and red. The first line of this paragraph was large and bold, letters in rest of the paragraph are normal</p></body></blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="133" data-slug-hash="jPJLJX" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/jPJLJX/">jPJLJX</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3 style="text-align: left;">
:before and :after Pseudo-Elements</h3>
<div style="text-align: justify;">
<br />
:before and :after Pseudo-Elements are very useful pair of pseudo-elements, they are under CSS3 are written as :before and ::after. These selectors are used to add generated content before or after an element and nearly always are combined with the CSS2 property content, which is used to insert dynamically generated content. For example the rule to insert special image before and after article includes the following.</div>
<blockquote class="tr_bq">
div.article:before {content: url(article-start.png);}<br />
div.article:after {content: url(article-end.png);}</blockquote>
<h4 style="text-align: left;">
Example:</h4>
<div style="text-align: justify;">
Here is an example to illustrate the uses of :before and :after Pseudo-Elements in HTML document.<br />
<br />
In the first CSS code, external site image will be added after external link and in the second and third CSS code a text is inserted before and after paragraph.</div>
<blockquote class="tr_bq">
CSS code: ext:after {content:url('external.png'); margin-left:2em;}<br />
.warning:before {content:"Warning!"; background-color:pink; border:1px blue dashed; margin-right:1em;}<br />
.warn:after {content:"The End"; background-color:brown; border:2px red solid; margin-left:1em;}</blockquote>
<blockquote class="tr_bq">
HTML code: <p><a href="#">This is local link</a><br><br />
<a href="http://www.codepen.io" class="ext">This is External link</a></p><br />
<br />
<p class="warn">This is warning paragraph. Here warning text is added before the paragraph and ending text is added after the paragraph</p></blockquote>
<div style="text-align: justify;">
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="171" data-slug-hash="VLRzNb" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/VLRzNb/">VLRzNb</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
</div>
<br />
<h3 style="text-align: left;">
::selection Pseudo-Element</h3>
<div style="text-align: justify;">
<br />
CSS3 introduces a pseudo-element ::selection that is used to style parts of an element that is currently selected. For example the rule to style the highlighted text includes the following.</div>
<blockquote class="tr_bq">
p::selection {background-color:pink;}</blockquote>
<h4 style="text-align: left;">
Example:</h4>
<div style="text-align: justify;">
Here is an example to illustrate the uses of ::selection Pseudo-Elements in HTML document.</div>
<blockquote class="tr_bq">
CSS code:#select1::-moz-selection { color: blue; background: brown;}<br />
#select1::selection {color: blue; background: brown;}<br />
#select2::-moz-selection { color: green; background: pink;}<br />
#select2::selection {color: green; background: pink;}</blockquote>
<blockquote class="tr_bq">
HTML code: <p id="select1">This is first paragraph. It has pink background at the time of selection of text.</p><br />
<p id="select2">This is second paragraph. It background color will be light blue while selecting</p></blockquote>
<h4 style="text-align: left;">
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="166" data-slug-hash="YXgrVe" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/YXgrVe/">YXgrVe</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h4 style="text-align: left;">
Read Next:<a href="http://www.siteforinfotech.com/2015/08/how-to-style-multiple-sections-html-css.html">How to Style Multiple Sections of an HTML Document Using CSS</a></h4>
<h3 style="text-align: left;">
Related Posts:</h3>
<ul style="text-align: left;">
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-responsive-blogger-website-template.html">How to Create Responsive Website or Blogger Template</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-style-webpages-using-basic-core-selectors.html">How to Style Webpages Using Basic and Core CSS Selectors</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-to-design-webpages-using-css-attribute-selectors.html">How to Design Webpages using CSS Attribute Selectors</a><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.siteforinfotech.com/2015/08/how-to-design-webpages-using-css-attribute-selectors.html"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVd67RZ3Owwc_XzsPQxn4Y_wqxWEX7goFqHEiVW4OtAT3G_QSk_q-5EaxIrKRH3m2KAsM6MwIKX6KMyL3vUwb4KzOmlxCzS1PNiN4ktNX7crs5fo0boWNtCIINYi45XLDk5BmEpieIvE10/s1600/A-CARD3.GIF" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVd67RZ3Owwc_XzsPQxn4Y_wqxWEX7goFqHEiVW4OtAT3G_QSk_q-5EaxIrKRH3m2KAsM6MwIKX6KMyL3vUwb4KzOmlxCzS1PNiN4ktNX7crs5fo0boWNtCIINYi45XLDk5BmEpieIvE10/s320/A-CARD3.GIF" width="320" /></a></a></div>
</h3>
</li>
</ul>
</div>

How to Select Particular Portion of an HTML Document Using CSS

While designing web pages, you may face a problem in which you want to select particular portion of an HTML document but there is not a de...

How to Design Webpages using CSS Attribute Selectors

mohammed alkharroubi

Link Author

Title: How to Design Webpages using CSS Attribute Selectors
Author: mohammed alkharroubi
Rating 5 of 5 Des:

We can select any HTML elements based on its attributes, these type of CSS selectors are called CSS attribute selecors. Attribute selector...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
We can select any HTML elements based on its attributes, these type of CSS selectors are called CSS attribute selecors. Attribute selectors are first introduced in CSS2, which allow rules to match elements with particular attributes or attribute value. CSS3 also introduces a number of new attribute selectors along with the attributes defined in CSS2. The different types of attribute selectors defined in CSS2 and CSS3 are listed below.<br />
<br />
<br />
<h3>
Attribute Selector 1: E[attr]</h3>
<br />
It is a basic type of CSS attribute selector, which selects all elements of E that have the given attribute attr. For example, a rule such as<br />
a[href] {background-color:yellow}<br />
<br />
It would match all <a> tags that simply have the href attribute and apply its background color yellow. <br />
<br />
<h4>
Example:</h4>
<blockquote class="tr_bq">
CSS code: a[href] {background-color:yellow}</blockquote>
<div style="text-align: left;">
<blockquote>
HTML code: <a href="www.siteforinfotech.com" target=_blank>Infotech Site</a></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="79" data-slug-hash="oXVYQd" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/oXVYQd/">oXVYQd</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Attribute Selector 2: E[attr=value]</h3>
<br />
This type of selector selects all elements of E that have set the given attribute attr equal to the given value. For example the rule such as <br />
<br />
a{href="http://www.siteforinfotech.com"] {color:red;}<br />
<br />
It would sets the font color to red on all a tags that have their href attribute set to http://www.siteforinfotech.com<br />
<br />
<a href="https://www.blogger.com/null" name="more"></a><br />
<h4>
Example:</h4>
<div style="text-align: left;">
<blockquote class="tr_bq">
CSS code: a{href="http://www.siteforinfotech.com"] {color:red;}</blockquote>
</div>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <a href="www.siteforinfotech.com" target=_blank>Infotech Site</a><br />
<a href="www.codepen.io" target=_blank>codepen</a></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="100" data-slug-hash="mJoOQa" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/mJoOQa/">mJoOQa</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Attribute Selector 3: E[attr|=value]</h3>
<br />
This type of selector selects all elements of E that have an attribute that contains a value that starts with a value that starts with a value that is a list of hyphen-separated values. For example the rule such as <br />
p[lang|="en"] {color:red} /* It would make all english text in red*/<br />
<br />
<h4>
Example:</h4>
<blockquote class="tr_bq">
CSS code: p[lang|="en"] {color:red}</blockquote>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <p lang="en">This is English and red</p><br />
<p lang="en-uk">This is British English and red</p><br />
<p>This is not red</p><br />
<p lang="fr"><span class="short_text" id="result_box" lang="fr"><span class="hps">Ceci est</span> <span class="hps">le français et</span> <span class="hps">pas rouge</span></span></p></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="196" data-slug-hash="jPJVXb" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/jPJVXb/">jPJVXb</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Attribute Selector 4: E[attr~=value]</h3>
<br />
This selector selects all elements of E that have a space separated list of values for attr where one of those values is equal to the given value. It is possiple to match multiple attribute values or even pieces of attribute values. For example the rule such as <br />
<br />
p[title~="Test"] {font-style:italic;}<br />
<br />
It would sets the font style to italic on all p tags that have one word in their title equal to test.<br />
<br />
<h4>
Example:</h4>
<blockquote class="tr_bq">
CSS code:p[title~="Test"] {font-style:italic;}</blockquote>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <p title="My First Test">This is italic </p><br />
<p title="Test">It is also italic</p><br />
<p title="Second-Test">This is not italic</p></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="159" data-slug-hash="XbGNoR" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/XbGNoR/">XbGNoR</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Attribute Selector 5: E[attr^=value]</h3>
<br />
This is a new selector defined in CSS3, it selects all elements of E that have the attribute attr that begins with the given value. For example the rule such as <br />
p[title^="html"] {color:blue;}<br />
<br />
It would sets the color to blue if the title starts with html.<br />
<br />
<h4>
Example:</h4>
<blockquote class="tr_bq">
CSS code: p[title^="html"] {color:blue;}</blockquote>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <p title="html lession">This paragraph is blue</p><br />
<p title="This is html">This paragraph is not blue</p></blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="128" data-slug-hash="aOMBPL" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/aOMBPL/">aOMBPL</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Attribute Selector 6: E[attr$=value]</h3>
<br />
This selector is also defined in CSS3, it selects all elements of E that have the atttibute attr that ends with the given value. For example the rule such as <br />
P[title$="#"] {color:red;}<br />
<br />
It would sets the color to red if the title ends with a hash.<br />
<br />
<h4>
Example: </h4>
<blockquote class="tr_bq">
CSS code: P[title$="#"] {color:red;} </blockquote>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <p title="It ends with #">This title is red</p><br />
<p title="This symbol # ends">This title is not red</p</blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="126" data-slug-hash="qdvqLx" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/qdvqLx/">qdvqLx</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<h3>
Attribute Selector 7: E[attr*=value]</h3>
<br />
This is another selector defined in CSS3, it selects all elements of E that contains the given value. For example the rule such as <br />
<br />
P[title*="css"] {background-color:red;}<br />
<br />
It would sets the background color to red in any p tag taht has CSS in its title. <br />
<br />
<h4>
Example: </h4>
<blockquote class="tr_bq">
CSS code: P[title*="css"] {color:red;}</blockquote>
<div style="text-align: left;">
<blockquote class="tr_bq">
HTML code: <p title="It is CSS">This title is red</p><br />
<p title="CSS is the best">This title is also t red</p</blockquote>
</div>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="125" data-slug-hash="vOPyvV" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/vOPyvV/">vOPyvV</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Using Multiple Attribute Selectors</h3>
<br />
You can select HTML elements by combining more than one attribute selectors or combining with basic selectors as given below. <br />
<br />
p.post[title] {background-color:red;}<br />
<br />
It would select any <p> tag with the class "post" and with title attribute set. <br />
<br />
#sidelinks a[href="http//"] {font-weight:bold;}<br />
<br />
It would select any <a> tags which are descendents of some element with an id value of "sidelinks" that have href values that start with "http://" and make them bold. <br />
<br />
You can also use multiple attribute characteristics at once as the following.<br />
<br />
p[title="Test"] [lang|="en"] {border: 2px solid blue;}<br />
<br />
It would select a <p> tag with title "Test" and a lang value in the English family and sets blue border having 2px solid. <br />
<br />
<h4>
Read Next:<a href="http://www.siteforinfotech.com/2015/08/select-particular-portion-html-using-css.html">How to Select Particular Portion of an HTML Document Using CSS</a></h4>
<h3 style="text-align: left;">
Related Posts:</h3>
<ul style="text-align: left;">
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-responsive-blogger-website-template.html">How to Create Responsive Website or Blogger Template</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a></h3>
</li>
<li><h3 class="post-title entry-title" itemprop="name">
<a href="http://www.siteforinfotech.com/2015/08/how-style-webpages-using-basic-core-selectors.html">How to Style Webpages Using Basic and Core CSS Selectors</a></h3>
</li>
</ul>
  <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqfk4H7gc7IXnPIFR1YuXXt4S50T62Jyj9_cmXc7h5CnAnvJcEP8A9yp1XoOmVZn4rkkIiD25Mgbr0coclvhtbiesgKXdCcuTYtB7wSKbo1dCC1DZ37H467xTxUFIyJ8VRfx10vosbFCnk/s1600/www.MyEgY.com+by+MeRNa+%252812%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqfk4H7gc7IXnPIFR1YuXXt4S50T62Jyj9_cmXc7h5CnAnvJcEP8A9yp1XoOmVZn4rkkIiD25Mgbr0coclvhtbiesgKXdCcuTYtB7wSKbo1dCC1DZ37H467xTxUFIyJ8VRfx10vosbFCnk/s1600/www.MyEgY.com+by+MeRNa+%252812%2529.jpg" /></a></div>
</div>
</div>

How to Design Webpages using CSS Attribute Selectors

We can select any HTML elements based on its attributes, these type of CSS selectors are called CSS attribute selecors. Attribute selector...

How to Style Webpages Using Basic and Core CSS Selectors

mohammed alkharroubi

Link Author

Title: How to Style Webpages Using Basic and Core CSS Selectors
Author: mohammed alkharroubi
Rating 5 of 5 Des:

You may already know that CSS helps to style your Webpages or your HTML documents to make them attractive and beautiful. To understand and...

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
You may already know that CSS helps to style your Webpages or your HTML documents to make them attractive and beautiful. To understand and implement CSS rules, you must first know about CSS selectors. CSS selectors help to select any HTML element and style them. In this post I am going to discuss about some basic selectors such as element selectors, Id selectors and Class selectors and some core CSS selectors such as Direct descendant selector, Adjacent sibling selectors and General sibling selectors. </div>
<div style="text-align: justify;">
<br />
<h3>
Element Selectors</h3>
<br />
There are different element selectors from which you can select any HTML element and apply CSS rules for them. Using element selectors, simplest rules can be applied to all documents of a particular tag such as <p>, <h1>, <h2> etc. You can apply element selectors as the following. <br />
<blockquote>
syntax: element-name{/*properties*/}</blockquote>
As an example, to set the line spacing for all paragraphs, you can use a rule such as the following.<br />
<blockquote class="tr_bq">
Example: p{line-height:150%;}</blockquote>
<h4>
Demo:</h4>
<blockquote class="tr_bq">
CSS code: h4{color:blue;} /*makes all h4 tags blue */ </blockquote>
<blockquote class="tr_bq">
HTML code: <h4>This is first h4 tag</h4><br />
<h5>This is second h5 tag</h5></blockquote>
<br />
<div class="codepen" data-default-tab="result" data-height="150" data-slug-hash="YXBLYV" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/YXBLYV/">YXBLYV</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>To set values for all elements, the wildcard selector * can be used. For example to remove margins on all elements, use<br />
<blockquote class="tr_bq">
Example: *{margin:0;}</blockquote>
<h4>
Demo:</h4>
<blockquote class="tr_bq">
CSS code: *{color:blue;} </blockquote>
<blockquote class="tr_bq">
HTML code: <p>This is a paragraph</p><br />
<h5>This is  a h3 tag</h5></blockquote>
<br />
If you have to set values for more than one but fewer than all elements, you can group elements by separating them with a comma. For example if you want the tags <h4>, <h5>, and <h6> to have the same basic background and color, you can apply the following rule.<br />
<blockquote class="tr_bq">
Example: h4, h5, h6 {background-color:yellow; color:black;}</blockquote>
<h4>
Demo:</h4>
<blockquote class="tr_bq">
CSS code:  h4, h5, h6 {background-color:yellow; color:black;} </blockquote>
<blockquote class="tr_bq">
HTML code: <h4>This is h4 tag</h4><br />
<h5>This is h5 tag</h5><br />
<h6>This is h6 tag</h6></blockquote>
<h3>
Id Selectors</h3>
<br />
<a href="https://www.blogger.com/null" name="more"></a>With element selectors, you can select any HTML element or tags and apply CSS rules while with applying and Id rule, you can apply a style just for a single element or tag. Using Id selectors, simplest rules can be applied to a single tag such as <p id="top">, <h1 id="first"> etc. You can apply Id selectors as the following.<br />
<blockquote class="tr_bq">
syntax: #Id_value{/*properties*/} </blockquote>
As an example, to set the font color "red" for a paragraph with Id "top", you can use the rule as the following.<br />
<blockquote class="tr_bq">
Example: #top{color:red;}</blockquote>
<h4>
Demo:</h4>
<blockquote class="tr_bq">
CSS code:  #top{color:red;} </blockquote>
<blockquote class="tr_bq">
HTML code: <p id="top">Paragraph with id top is red</p><br />
<p id="bottom">This paragraph is not red</p></blockquote>
<h4>
</h4>
<br />
If you have to select specified element E with the given id attribute set, you can apply a style just for a given tag with given id value. For example if you want to set the color to red on the h3 tag with the id equal to contact, you can apply the following rule. <br />
<blockquote class="tr_bq">
Example: h3#content{background-color:yellow;}</blockquote>
<h4>
Demo:</h4>
<blockquote class="tr_bq">
CSS code:   h3#content{background-color:yellow;} </blockquote>
<blockquote class="tr_bq">
HTML code:<h3 id="content">Its background is yellow</h3><br />
<h4 id="content">Background is not yellow</h4></blockquote>
<br />
<h3>
Class Selectors</h3>
<br />
Using class selectors you can select all tags with the specified class value. Unlike id values, class values don't have to be unique because many elements can be members or the same class. You can write selector rules for classes by simply specify the class name of your own choosing, such as "nature", with the period before it as the selector. You can apply class selectors as the following rule.<br />
<blockquote class="tr_bq">
syntax: .class{/*properties*/}</blockquote>
<br />
As an example, to set the background color "green" for a paragraph with class "nature", you can use the rule as the following.<br />
<blockquote class="tr_bq">
Example: .nature{background-color: green;}</blockquote>
<h4>
Demo:</h4>
<blockquote class="tr_bq">
CSS code:  .nature{background-color: green;} </blockquote>
<blockquote class="tr_bq">
HTML code:  <p class="nature">This p tag background is green</p><br />
<div class="nature">This div tag background also green</div></blockquote>
<br />
If you have to select all elements with the given class attribute sets, you can apply style for all the tags with given class value. For example if you want to underline all h1 tags with class "note", you can apply the following rule.<br />
<blockquote class="tr_bq">
Example: h1.note{text-decoration: underline;}</blockquote>
<h4>
Demo:</h4>
<blockquote class="tr_bq">
CSS code: h4.note{text-decoration: underline;} </blockquote>
<blockquote class="tr_bq">
HTML code: <h4 class="note">This heading is underlined</h4><br />
<h5 class="nature">This heading is not underlined</h5></blockquote>
<br />
<h3>
General Descendant Selector</h3>
<br />
You can select descendant HTML tag using general descendant selector, where one element is eventual descendant of another element. You can write selector rules for descendant selector by simply writing descendant tags, such as <strong> tag which is descendant of <p> tag. You can apply descendant selectors as the following rule.<br />
<blockquote class="tr_bq">
Syntax: tag1 tag2 {/*properties*/}</blockquote>
<br />
As an example, to set the color "purple" for a strong tag that are descendant of p tags, you can use the rule as the following.<br />
<blockquote class="tr_bq">
Example: p strong {color:purple;}</blockquote>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="121" data-slug-hash="vObraQ" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/vObraQ/">vObraQ</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Direct Descendant Selector</h3>
<br />
You can select immediate parent of HTML tag using direct descendant selector, where one element is direct descendant of another element. You can write selector rules for direct descendant selector by simply writing descendant tags, such as <p> tag  which is descendant of <body> tag. You can apply descendant selectors as the following rule.<br />
<blockquote class="tr_bq">
Syntax: tag1>tag2 {/*properties*/}</blockquote>
<br />
An an example, to make all p tags that have the body tag as their immediate parent have the background color pink.<br />
<blockquote class="tr_bq">
Example: body>p {background-color:pink;}</blockquote>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="129" data-slug-hash="YXBvLJ" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/YXBvLJ/">YXBvLJ</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
Adjacent Sibling Selectors</h3>
<br />
Adjacent sibling selectors has a similar rule to direct descendant selector, which is specified using the plus sign (+) and is used to select elements that would be siblings of each other. You can apply adjacent sibling selectors as the following rule.<br />
<br />
<blockquote class="tr_bq">
Syntax: tag1+tag2 {/*properties*/}</blockquote>
<br />
Here is an example to make all p tags that are immediately preceded by an h1 tag pink.<br />
<blockquote class="tr_bq">
Example: h1+p {background-color:pink;}</blockquote>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="164" data-slug-hash="JdxZLM" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/JdxZLM/">JdxZLM</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<br />
<h3>
General Sibling Selectors</h3>
<br />
General sibling selector is a CSS3 selector(~) that can be used to select elements that happen to have a particular element preceding them as a sibling directly. You can apply general sibling selectors as the following rule. <br />
<blockquote class="tr_bq">
tag1~tag2{/*properties*/}</blockquote>
<br />
Here is an example, to set the font style to italic on all strong tags that have a p tag as a preceding sibling.<br />
<blockquote class="tr_bq">
Example: p~strong{font-style: italic;}</blockquote>
<h4>
Demo:</h4>
<div class="codepen" data-default-tab="result" data-height="209" data-slug-hash="GJzGyz" data-theme-id="17625" data-user="shuseel">
See the Pen <a href="http://codepen.io/shuseel/pen/GJzGyz/">GJzGyz</a> by Shuseel Baral (<a href="http://codepen.io/shuseel">@shuseel</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
</div>
<br />
<h4 style="text-align: left;">
Read Next:<a href="http://www.siteforinfotech.com/2015/08/how-to-design-webpages-using-css-attribute-selectors.html"> How to Design Webpages using CSS Attribute Selectors</a></h4>
<h3 style="text-align: left;">
Related Posts:</h3>
<ul style="text-align: left;">
<li><h3 style="text-align: left;">
 <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a> </h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/09/create-responsive-blogger-website-template.html">How to Create Responsive Website or Blogger Template</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-make-simple-css-stylesheet.html">How To Make Simple CSS Stylesheet for a Website ?</a></h3>
</li>
<li><h3 style="text-align: left;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html">How To Create Simple Menu Using CSS ?</a><div class="separator" style="clear: both; text-align: center;">
<a href="http://www.siteforinfotech.com/2014/01/how-to-create-simple-menu-using-css.html"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKh3bkfcN-L6OBUk2tDZjoISJoPsbGEN37L1JbgIYljVninD3k342B6LKveZG2975K_BAqtyvjQol49Vjhq_0mclm1wf0b9C57rdLuq-ISg8xL2Iy_UGCQqkzOh_RSuEUdgEkcoEfwpHU/s1600/www.MyEgY.com+by+MeRNa+%252811%2529.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKh3bkfcN-L6OBUk2tDZjoISJoPsbGEN37L1JbgIYljVninD3k342B6LKveZG2975K_BAqtyvjQol49Vjhq_0mclm1wf0b9C57rdLuq-ISg8xL2Iy_UGCQqkzOh_RSuEUdgEkcoEfwpHU/s320/www.MyEgY.com+by+MeRNa+%252811%2529.jpg" width="320" /></a></a></div>
</h3>
</li>
</ul>
</div>

How to Style Webpages Using Basic and Core CSS Selectors

You may already know that CSS helps to style your Webpages or your HTML documents to make them attractive and beautiful. To understand and...

How to Create Show/Hide Effect in Image SlideShow Using JQuery

mohammed alkharroubi

Link Author

Title: How to Create Show/Hide Effect in Image SlideShow Using JQuery
Author: mohammed alkharroubi
Rating 5 of 5 Des:

The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted...

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted, makes elements invisible but retains space for them in the document layout. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The hide() method, by contrast, removes the elements from the layouts as if the CSS display property was set to none. When invoked with no arguments, hide() and show() simply hide or show the selected elements immediately. With a duration argument, however, they animate the hiding or showing process. hide() shrinks an element's width and height to 0 at the same time that it reduces the element's opacity to 0. show() reverses the process.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">toggle() changes the visibility state of the elements, it is invoked on, if they are hidden, it calls show(), and it they are visible, it calls hide(). As with show() and hide(), you must pass a toggle() to get an animated effect. Passing true to toggle() is the same as calling show() with no arguments. Note also that if you pass two or more function arguments to toggle() it registers event handlers.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Here is an example that invokes methods for show/hide effect animation. The first image has show() effect animation, second image has hide() effect animation and the third animation has toggle() effect animation.<br /><br /><pre class="prettyprint">$("#img1").show(2000);<br />$("#img2").hide(3000);<br />$("#img3").toggle(1000);</pre><br />Here are some examples to show show(), hide() and toggle() effects using jQuery.<br /><br /><h4>Example of show() Effect </h4><br /><pre class="prettyprint"><script><br />  $(document).ready(function(){<br />    $(#btn1).click(function () {<br />      $("#img1").show(2000);<br />    });<br />  });<br />  </script><br /><br /><input type=button id="btn1" value="Start Show"/><br /><img id="img1" src="img1.jpg"> </pre><br /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){ $("#img1").show(3000);  });  }); </script> <input id="btn1" type="button" value="Start Show" /><img id="img1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_RsF_i7AGa1oiYncuhETclBkav3BMmnNy5Imh0LPd5Mc2H9LkX9QL0ds-ychdl24NY5CZn56btgLk0CnnvpYW8cTENWpCF57dcpcjQp5cFJh5ZAaaQ-bgdm6S7mnhPSTwjfs0fnupMgTO/s1600/img1.JPG" style="display: none;" />  <br /><br /><h4>Example of hide() Effect</h4><br /><pre class="prettyprint"><script><br />  $(document).ready(function(){<br />    $(#btn2).click(function () {<br />      $("#img2").hide(3000);<br />    });<br />  });<br />  </script><br /><br /><input type=button id="btn2" value="Start Hide"/><br /><img id="img2" src="img2.jpg"> </pre><br /><script>$(document).ready(function(){  $("#btn2").click(function(){ $("#img2").hide(3000); });  }); </script><input id="btn2" type="button" value="Start Hide" /><img id="img2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXeNd9nDtlLgx4OYATEY7nAmm9TwUxk_bCzjb0wvIpS79hxff7pVLXdBatF6uKrvA98dKXZIPBiKbaLJpp4zVSPWdoeFA7q3BtI2-iagKv_d6vREbVLYTYQNNNDzy-51TMJw2AFSlT6GM/s1600/img2.JPG" />    <br /><br /><h4>Example of toggle() Effect </h4><br /><a name="more"></a><pre class="prettyprint"><script><br />  $(document).ready(function(){<br />    $(#btn3).click(function () {<br />      $("#img3").toggle(1000);<br />    });<br />  });<br />  </script><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><input type=button id="btn3" value="Start Toggle"/><br /><img id="img3" src="img3.jpg"></pre><br /><script>$(document).ready(function(){ $("#btn3").click(function(){ $("#img3").toggle(3000); });  }); </script> <input id="btn3" type="button" value="Start Toggle" /><img id="img3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlcg7gpv22uTS6gYK162X2Sb1ojivDrMBCmjdc3fGEnOB7RMcbrBr47zJf5vwU_EG2234eGwadjmHJ62ipS4VtYieVt7DkB9bbzwaHFaaDVxbIAQ1Zy6Lf85KAgVwldDl3pP14ufCXNu-/s1600/img3.JPG" />  </div><br /><h3 style="text-align: left;">Full jQuery code for Show/Hide effect image animation</h3><br /><pre class="prettyprint"><script <br /><br />src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br /></script><br /><br /><style><br />.show_hide<br />{<br /> box-shadow:1px 1px 5px 2px #6DC83C;<br /> position:relative;<br /> width:448px;<br /> height: 336px;<br /> border-radius:19px;<br />}<br /><br />.show_hide img<br />{<br /> border-radius:19px;<br /> position:absolute;<br /> left:0;<br /> top:0;<br />}<br /><br /></style><br /><br /><script><br />$(function(){<br /> $('.show_hide img:gt(0)').hide();<br /> setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end<br /><br />().appendTo('.show_hide');}, 6000);<br />});<br /></script><br /><br /><div class="show_hide"><br /><img src="img1.JPG" /><br /> <img src="img2.JPG" /><br /> <img src="img3.JPG" /><br /></div><br /></pre><br /><br /><h3 style="text-align: left;">Preview of Show/Hide effect image animation</h3><br /></div><style> .show_hide {  box-shadow:1px 1px 5px 2px #6DC83C;  position:relative;  width:448px;  height: 338px;  max-width:100%;  border-radius:19px;  }  .show_hide img {  border-radius:19px;  position:absolute;  left:0;  top:0;  }  </style> <script> $(function(){  $('.show_hide img:gt(0)').hide();  setInterval(function(){$('.show_hide :first-child').hide(3000).next('img').show(3000).end().appendTo('.show_hide');}, 6000); });    </script>  <br /><div class="show_hide"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_RsF_i7AGa1oiYncuhETclBkav3BMmnNy5Imh0LPd5Mc2H9LkX9QL0ds-ychdl24NY5CZn56btgLk0CnnvpYW8cTENWpCF57dcpcjQp5cFJh5ZAaaQ-bgdm6S7mnhPSTwjfs0fnupMgTO/s1600/img1.JPG" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXeNd9nDtlLgx4OYATEY7nAmm9TwUxk_bCzjb0wvIpS79hxff7pVLXdBatF6uKrvA98dKXZIPBiKbaLJpp4zVSPWdoeFA7q3BtI2-iagKv_d6vREbVLYTYQNNNDzy-51TMJw2AFSlT6GM/s1600/img2.JPG" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlcg7gpv22uTS6gYK162X2Sb1ojivDrMBCmjdc3fGEnOB7RMcbrBr47zJf5vwU_EG2234eGwadjmHJ62ipS4VtYieVt7DkB9bbzwaHFaaDVxbIAQ1Zy6Lf85KAgVwldDl3pP14ufCXNu-/s1600/img3.JPG" /></div><br /><br /><br /><br /><h3> Related Posts:</h3><ul><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-scroll-top-or-bottom-of-document.html">How to Scroll Top or Bottom of Document Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-create-table-of-contents-using-javascript.html">How to Create Table of Contents Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-select-document-elements-using-javascript.html">How to Select Document Elements Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-window-using-javascript.html">How to Show Pop Up Window Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-go-back-browsing-history-using.html">How to go Back Browsing History Using JavaScript</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-click-button-using-javascript.html">How to Click Button Using JavaScript?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-function-url-hyperlink.html">How to Write JavaScript Function as URL in Hyperlink?</a></h3></li><li><h3><a href="http://www.siteforinfotech.com/2015/02/how-to-use-round-random-min-and-max-in-javascript.html">How to use Round, Random, Min and Max in JavaScript</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-concatenate-join-and-sort-array-javascript.html">How to Concatenate, Join and Sort Array in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-through-javascript-array.html">How to Loop Through JavaScript Array?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-loop-using-javascript.html">How to Loop using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-show-pop-up-boxes-using-javascript.html">How to Show Pop Up Boxes Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-conditional-statements-in-javascript.html">How to Write Conditional Statements in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-write-javascript-with-html.html">How to Write JavaScript With HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/create-changable-date-and-time-javascript.html">How to create Changeable Date and Time Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Sideshow with Links</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3> <a href="http://www.siteforinfotech.com/2015/02/how-to-create-timer-using-javascript.html">How to create Timer Using JavaScript?</a> </h3></li></ul></div>

How to Create Show/Hide Effect in Image SlideShow Using JQuery

The fadeOut() effect presented on the post "How to create Fade Effect in Image Slideshow using JQuery" which I have already posted...

How to Reveal the Contents using JavaScript?

mohammed alkharroubi

Link Author

Title: How to Reveal the Contents using JavaScript?
Author: mohammed alkharroubi
Rating 5 of 5 Des:

If you wanted to show/hide(reveal) the contents in HTML document by using simple methods, it is possible by using a simple javascript code r...

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;">If you wanted to show/hide(reveal) the contents in HTML document by using simple methods, it is possible by using a simple javascript code running in it. This feature not only helps to make your webpage more stylist and attractive, also helps to present main contents or headings for the first look. It also helps to minimize the space for webpage which have very long content.<br /><br />In this post, I am going to describe "<a href="http://www.siteforinfotech.com/2015/02/how-to-reveal-contents-using-javascript.html" target="_blank">How to Reveal the Contents using simple JavaScrpt code</a>". Here I am using simple CSS code to set the CSS property of HTML element show or hidden and executed a JavaScript function on window.onload event handler. <br /><br />You can use the following simple CSS code to set the CSS property of HTML element show or hidden.<br /><br /><blockquote class="tr_bq">.reveal * {display:none;}<br /><br /> // This code specifies the display property of HTML element having class name "reveal" to none<br /><br />.reveal *.handle{display:block;} <br /><br />// This code specifies the display property of HTML element having class name "handle" for child of "reveal" class to block.</blockquote><br /><br />You can use the following simple JavaScript function to Reveal the Contents.<br /><br /><blockquote class="tr_bq">window.onload=function(){<br /><br />var elements=document.getElementsByClassName("reveal");<br />for(var i=0; i<elements.length; i++) {<br />var elt=elements[i];<br />//find the "handle" element with the container<br />var title=elt.getElementsByClassName("handle")[0];<br />//when that element is clicked, reveal the rest of the content <br />title.onclick=function(){<br />if(elt.className=="reveal") {elt.className="revealed"; title.innerHTML="Hide Contents";}<br />else if (elt.className=="revealed") {elt.className="reveal"; title.innerHTML="Show Contents";}<br />}<br />}<br />};</blockquote><br />Here document.getElementsByClassName("reveal"); finds all container elements with class "reveal" and uses a simple for loop to assign each elements of "reveal" class to elt and assign first element of "handle" to title variable. At last CSS property of the elements are changed by assigning a function on onclick event. <br /><br /><br /><h3>Full HTML Code with JavaScript to Reveal the Contents</h3><br /><pre class="prettyprint"><html><br /><head><br /><title>How to Reveal the Contents Using JavaScript</title><br /><style><br />.reveal * {display:none;}<br />.reveal *.handle{display:block;} /*Except for the class "handle" child */<br /></style><br /><script><br />window.onload=function(){<br />//find all container elements with class "reveal".<br /><br />var elements=document.getElementsByClassName("reveal");<br />for(var i=0; i<elements.length; i++) {<br />var elt=elements[i];<br />//find the "handle" element with the container<br />var title=elt.getElementsByClassName("handle")[0];<br />//when that element is clicked, reveal the rest of the content <br />title.onclick=function(){<br />if(elt.className=="reveal") {elt.className="revealed"; title.innerHTML="Hide Contents";}<br />else if (elt.className=="revealed") {elt.className="reveal"; title.innerHTML="Show Contents";}<br />}<br />}<br />};<br /></script><br /></head><br /><body><br /><div class="reveal"><br /><h3 class="handle">Show Contents</h3><br /><h4 class="handle">Click Here to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><h4 class="handle">Click Here to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><h4 class="handle">Click Here to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /><p> This paragraph is hidden. It appears when you click on the title.</p><br /></div><br /></body><br /></html><br /></pre></div><div style="text-align: justify;"><br /><a name="more"></a><br /></div><div style="text-align: justify;"><h3>Preview of Above HTML Code to Reveal the Contents</h3><style>.reveal * {display:none;} .reveal *.handle{display:block;} /*Except for the class "handle" child */ </style><script>window.onload=function(){ //find all container elements with class "reveal".  var elements=document.getElementsByClassName("reveal"); for(var i=0; i<elements.length; i++) { var elt=elements[i]; //find the "handle" element with the container var title=elt.getElementsByClassName("handle")[0]; //when that element is clicked, reveal the rest of the content  title.onclick=function(){ if(elt.className=="reveal") {elt.className="revealed"; title.innerHTML="Hide Contents";} else if (elt.className=="revealed") {elt.className="reveal"; title.innerHTML="Show Contents";} } } }; </script> <br /><div class="reveal"><h3 class="handle">Show Contents</h3><h4 class="handle">Click Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you click on the title.<br /><h4 class="handle">Click Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.<br /><h4 class="handle">Click Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.<br />This paragraph is hidden. It appears when you click on the title.</div><br />You can also use Mouse over and Mouse out event to generate instant preview of the contents for the given headings for the above function as follows. <br /><br />title.onmouseover=function()<br />{elt.className="revealed";}<br /><br />title.onmouseout=function()<br />{elt.className="reveal";}<br /><br />Here is a full HTML code for the above JavaScript code. <br /><br /><pre class="prettyprint"><html><br /><head><br /><title>How to Reveal the Contents Using JavaScript</title><br /><style><br />.reveal * {display:none;}<br />.reveal *.handle{display:block;} <br /></style><br /><script><br />window.onload=function(){<br />var elements=document.getElementsByClassName("reveal");<br />for(var i=0; i<elements.length; i++) {<br />var elt=elements[i];<br />//find the "handle" element with the container<br />var title=elt.getElementsByClassName("handle")[0];<br />//when that element is clicked, reveal the rest of the content <br />title.onmouseover=function()<br />{elt.className="revealed";}<br />title.onmouseout=function()<br />{elt.className="reveal";}<br />}<br />};<br /></script><br /></head><br /><body><br /><div class="reveal"><br /><h4 class="handle">Mouse over to Reveal Hidden text</h4><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /><p> This paragraph is hidden. It appears when you mouse over on the title.</p><br /></div><br /></body><br /></html><br /><br /></pre><br /><h3>Preview of Above HTML Code to Reveal the Contents</h3><style>.reveal * {display:none;} .reveal *.handle{display:block;}  </style><script>window.onload=function(){ var elements=document.getElementsByClassName("reveal"); for(var i=0; i<elements.length; i++) { var elt=elements[i];  var title=elt.getElementsByClassName("handle")[0];   title.onmouseover=function() {elt.className="revealed";} title.onmouseout=function() {elt.className="reveal";} } }; </script> <br /><div class="reveal"><h4 class="handle">Mouse Over Here to Reveal Hidden text</h4>This paragraph is hidden. It appears when you mouse over on the title.<br />This paragraph is hidden. It appears when you mouse over on the title.<br />This paragraph is hidden. It appears when you mouse over on the title.<br />This paragraph is hidden. It appears when you mouse over on the title.<br /><br /><br /><h3 style="text-align: left;">Related Posts: </h3><ul style="text-align: left;"><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/07/create-simple-image-slideshow-using-javascript.html">How To Create Simple Image Slideshow Using JavaScript ?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/image-slideshow-with-navigation-buttons.html">Image Slideshow with Navigation Buttons Using JavaScript</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2013/11/javascript-image-slideshow-with-links.html">How to Create JavaScript Image Slideshow with LInks</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/03/how-to-display-date-format-in-javascript.html">How to Display Date Format in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-validate-html-form-using-javascript.html">How to Validate a HTML Form Using JavaScript?</a></h3><h3 style="text-align: left;"> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/different-ways-to-redirect-page-in-javascript.html">What are the Different Ways to Redirect Page in JavaScript?</a> </h3></li><li><h3 style="text-align: left;"><a href="http://www.siteforinfotech.com/2014/02/detecting-visitors-browser-using-javascript.html">How to Detect Visitor's Browser Using JavaScript?</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/11/make-rounded-corners-border-using-css.html">How to make rounded corners border using CSS</a> </h3></li><li><h3 style="text-align: left;"> <a href="http://www.siteforinfotech.com/2014/09/create-custom-css-template-for-printing.html">How to Create Custom CSS Template for Printing</a></h3></li><li><h3 style="text-align: left;"></h3><h3 class="post-title entry-title"><a href="http://www.siteforinfotech.com/2015/02/how-to-create-simple-form-using-html.html">How to create a simple form using HTML?</a></h3></li></ul></div></div></div>

How to Reveal the Contents using JavaScript?

If you wanted to show/hide(reveal) the contents in HTML document by using simple methods, it is possible by using a simple javascript code r...

Contact Form