Introduction to css

Introduction to css ( Cascading Stylesheet )

In webpage development, the inline style lines are responsible for formatting HTML elements.

For example in last tutorial we looked at the example Make me italic

[code language=”HTML”]<i>Make me italic</i>[/code]

Here the tag converts its content to Italic font.

Inline Styling

You can also stylize text this way using style attribute:

[code language=”HTML”]<p style=“text-formate:italic”>Make me Italic </i>[/code]

Output: Make me Italic

This works well however, it is usually not good practice to use formatting directly in the HTML file.

For example let’s say you also want the color of the text to be red

[code language=”HTML”]<p style=“text-formate:italic;color:red;”>Make me Italic </p>[/code]

Output: Make me Italic

More styles like making the text bold can be done this way:

[code language=”HTML”]<p style=“text-formate:italic;color:red;font-weight:bold”>Make me Italic </p>[/code]

Output: Make me Italic

It may not be conducive to have that many lines of style written into your HTML. It soon becomes illegible. This is alright if you can manage it, but there are other ways to make this less of an issue.

For example if you have three paragraphs and they all have the same style you can do the following:

[code language=”HTML”]
<p style=“text-formate:italic;color:red;font-weight:bold”>Paragraph 1 </p>
<p style=“text-formate:italic;color:red;font-weight:bold”>Paragraph 2</p>
<p style=“text-formate:italic;color:red;font-weight:bold”>Paragraph 3 </p>
[/code]

As you can see using style the attribute you have to repeat the same style three times. What’s worse is when you have 100 paragraphs where you want to apply the same style. Now, imagine you do all the work by adding the style to each paragraph as above and your boss ask you to change the font from italic to normal. This is where CSS comes to rescue!

Instead of writing inline style for each element move the style to a separate file with extension (.CSS)

intro to css3
html and css link reference

In HTML you can use tag-name or you will have to provide an attribute hook such as “id” or “class” and in the CSS you would refer to the hook to style that element. In the example below you can see the paragraph element has an attribute hook id with value “thisP” and in CSS using that hook you can color the font red. # (Pound sign) is called a css selector for id. In the next post we will discuss css selectors in detail.

HTML file ( Only showing what goes within body tag) :

[code language=”HTML”]
<p id=“thisP”> Using CSS<p>
[/code]

CSS file :

[code language=”CSS”]
#thisP{
color:red;
}
[/code]

Output:
Using CSS

 

 

[embedplusvideo height=”360″ width=”640″ editlink=”http://bit.ly/1qR8jZ6″ standard=”http://www.youtube.com/v/o1GdsNVYDHA?fs=1″ vars=”ytid=o1GdsNVYDHA&width=640&height=360&start=&stop=&rs=w&hd=0&autoplay=1&react=1&chapters=&notes=” id=”ep1903″ /]

HTML Attributes Tutorial

Attribute: a quality or feature regarded as a characteristic or inherent part of someone or something.

Translating that to HTML world attribute means “a piece of information that determines the properties of an HTML element

Lets look at the real world example. In order to describe someone we use his/her name , age, sex, hight , attitude , etc.. When we say someone is tall, we usually mean that his/her height is greater than normal. In the previous statement “height” is the characteristic and “greater than normal” is the value. in shorthand we can say height = “greater than normal” and to be precise you can use the actual height by writing height=“6.5feet”. In the HTML world this is called key/value pair, where height is a key and 6.5feet is a value.

HTML element can have attributes using the format key=“value” to provide additional information about the element.

[code language=”HTML”] <tagname key="value">content</tagname> [/code]

here is an example of attribute

[code language=”HTML”] <p id="first paragraph"> Once upon a time … </p> [/code]

id is one of the predefined attributes in HTML and it has a specific job/meaning in HTML. The id attribute specifies a unique id for an HTML element. here are some of the predefined attributes. id, class, style , href,

html is a very flexible language it allows users to create their own attributes.

[code language=”HTML”]<p mycrazyattribute="i have lost my mind"> blah</p>[/code]

Why do we need attributes in HTML?

Now, you know how to write attributes but the big question is why do we need attributes HTML?

Its the same reason why we have a names , so when i call someone he/she would know who I am referring to. one of the reason to have attribute in HTML so we can call specific element(s) via javascript or CSS and change its style such as background-color, font , etc..

This is a very basic html attributes tutorial. Next tutorial we will look at some of the most important attributes and get an introduction to css ( cascading stylesheets). Bookmark techsith for the future tutorials.