HTML Online Tutorial Contents

Following are the posts for HTML online Tutorial. To learn everything about HTML, just read these posts: HTML Online Tutorial HTML TAGS (2) HTML BASICS (3) HTML ELEMENTS (4) HTML ATTRIBUTES (5) More »

XHTML

XHTML stands for Extensible Hypertext Markup Language. It is also known as XML (Extensible Markup Language). It is a markup language. In XHTML, there are no predefined tags. The user defines the More »

HTML SUMMARY

In this tutorial, you learned: HTML Introduction HTML Tags HTML Basics HTML Elements HTML Attributes HTML Paragraphs HTML Headings HTML Formats HTML Image HTML Links HTML Lists HTML Frames HTML Table After More »

HTML TABLES (13)

HTML Tables are used to arrange data in web pages. HTML allows the use of tables by <table>…</table> tags. Each row in HTML table is recognized by <tr>…</tr> tag. In each row More »

HTML FRAMES (12.2)

Nested frames example: For the following example to work, there are two other simple HTML files : “HMTL11e1 frame a.html” and “HMTL11e1 frame b.html”. your browser will divide your screeub half. The More »

 

Tag Archives: grouping selector

Learn how to use CSS Selectors

Learn how to use CSS Selectors:

As explained earlier. you can use selectors to select certain HTML elements and manipulate them as well. The elements can be selected or found on the basis of their classes, id, types, attributes and their values etc. Following are example of few selectors:

Element Selector: This selector is used to chose the elements based on their name. You can select all <P> elements (as described in HTML Paragraphs,  HTML Paragraphs 2 this is a paragraph element) on one page and can align the text to right and set the color green by using following example:

p

{

text-align: right;

color: green;

 }

Id Selector: This selector is used to find or select any element by its id attribute of HTML tag. Since the id tag is unique on the page therefore you can use it to find the unique element on any page. You must remember that to select or find a unique id element, you must put a hash character followed by the element’s id. For example, you want to apply a style to the paragraph element whose id is “Paragraph3”.

#Paragraph3

{

text-align: left;

font-family: Comic Sans M

}

In the above example, the color of paragraph will be green and the alignment will be set to left and the font will be set Comic Sans M.

Class Selector: This selector is used to find the elements with a particular tags.  This selector uses HTML class attributes. You must remember that to write a period character, you must put a period character before the class name. In the following example, all the elements with class = car will be aligned to left and font will be Comic Sans M.

.car

{

text-align: left;

font-family: Comic Sans M

}

You have the ability to select a particular element of one class as well. For example, The paragraph element p will have the left alignment and Comic Sans M font.

p.car

{

text-align: left;

font-family: Comic Sans M

}

Grouping Selectors:

But what if you want to give various elements same style, you cannot write a code for each element separately as:

h1

{

text-align: left;

color: green

font-family: Comic Sans M

}

h2

{

text-align: left;

color: green

font-family: Comic Sans M

}

p

{

text-align: left;

color: green

font-family: Comic Sans M

}

h3

{

text-align: left;

color: green

font-family: Comic Sans M

}

 

To solve this issue you can group various elements as follows and assign them the same style.

h1,h2,p,h3

{

text-align: left;

color: green

font-family: Comic Sans M

}

In the above example, h1,h2,h3 and p will be left aligned, and green colored and with the font Comic Sans M.

 

To get a mobile app for your business visit www.codescamp.com

Book a free consultation today!