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 »

 

Category Archives: CSS

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!

email
Understand the CSS Syntax or Lexical Structure

Understand the CSS Syntax or Lexical Structure:

The lexical structure of CSS is the set of rules that explains how to write code or program in that language. This is also known as CSS syntax. You can use CSS to associate various rules to the elements which will appear on your website. These rules are responsible for the content of those elements which should be rendered. The CSS rule is basically composed of two parts:

Selector: It shows those element or elements on which declaration is applied. If this applies to more than one element then you can use coma to separate the list of elements. Or you can say that it is the name of HTML tag or element to be defined by user.

Declaration: By using declaration you can set how the elements should be styled which are mentioned in the selector.

Example:

td {width:25px;}

Here td is a selector and 25px is Declaration. The declaration has two parts which are usually separated by colon:

  1. Property
  2. Value

Selector {Property: Value}

Property:

It is the property of the selected elements which you want to declare. It is usually the attribute of the HTML tag.

Value:

It is the value of the property of the HTML element or tag.

Example:

H1 {color: maroon}

In the above example, “Title” is the HTML element name, “Color” is the attribute to be changed and “maroon” is the value of the attribute.

It is possible to modify one or two tags at the same time e.g.

H1, H2 {color: yellow}

In the above example, you can change the color of any headings of size H1 and H2 to yellow.

H1,H3 { color: green; font-family: Comic Sans M}

In this example, you can change more than one property for more than one elements. In the above example, the color and font of both H1 and H3 heading will be changed to green and Comic Sans M respectively.

It is also possible to modify one or two attributes of the same tag at the same time e.g.

H1 {color: maroon; font-family: Comic Sans M}

The way in which element or elements can carry the attributes and how the attributes control the property of the element is similar to HTML or XHTML.

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

Book a free consultation today!

CSS

CSS stands for Cascading Style Sheets. It is used to add styles to HTML documents. HTML tags are not enough to display an attractive layout of the document. Therefore, W3c (World Wide Web Consortium) recommends web developers to use CSS tags instead of HTML tags to add styles to their websites.

ADVANTAGES OF CSS:

  • CSS have different methods of attaching styles sheets to HTML documents.
  • By using one CSS sheet (externally attached CSS sheet) for whole website, a lot of time and work can be saved. To change the layout and appearance of the website you only have to edit one sheet.
  • CSS tags have very simple syntax and are easy to use.
  • CSS tags saves repetition of styles tags in HTML.

There is more information about CSS coming up on this site very soon.