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″ /]

Difference between id and class attributes in html

Difference between id and class attributes in html

Writing attributes

ID and class are attributes in HTML, they are predefined attributes meaning that they have specific meaning within HTML language. Just like any other attributes in HTML, you would write id and class in key value pair format like this:
key=“value”

Example

[code language=”HTML”]
<p id=“this paragraph”>blah</p>
<p class=“all blue paragraphs”>blah</p>
[/code]

ID and class are a way to access elements via css or javascript. Just like we have attributes such as name, address, age, driver’s license number, social security number (if you live in the USA), HTML has id and class attributes that do the same thing.

ID is like your social security number (Mr Unique)

In the US a social security number is a unique identification number given to each citizen. When the government collects taxes from you using this unique identification number they know exactly who you are. id does the same job for an HTML page. Once you use an ID for an element you cannot use the same id for any other elements. This helps javascript precisely pinpoint specific element.

Example

[code language=”HTML”]
<p id=“123121234”>My social security number is 123-12-1234</p>

[/code]

Class is like your birth date (Mr  IcanBeAnyone-Or-Everyone )

Birthdays are not unique however, within a country there could be more than one person with same birthday. For people, eye color, hair color, etc. are also not unique attributes. Class is just like your birthday. Let’s say the government wants to give $100 to each citizen over the age of 65, they would use everyone’s birthday to classify. Similarly, in HTML, let’s say you like to make first paragraph of every chapter bold, you would create a class and add it to first paragraphs of every chapter. You can use this class in .css files to change the fonts.

Example

[code language=”HTML”]
<p class=“01011995”>My birthday is 01/01/1995</p>
<p class=“01011995”>His birthday is 01/01/1995</p>
<p class=“01011995”>Her birthday is also 01/01/1995</p>

[/code]
In nutshell id allows you to pinpoint a specific element in the page and class allows you to group similar elements.

 

 

 

Difference between id and class attributes in html

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.

Introduction to HTML

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

What is HTML?

HTML stands for Hyper Text Markup Language.

Means, HTML is a set of Markup Tags.

p is one of the markup tags.

HTML Element

This is how you use markup tag to create an HTML Element.

<p>This is a paragraph</p>

Each tag is surrounded by angle brackets  like this <p>

As you can see the example has three parts

Screen Shot 2014-07-24 at 7.18.48 AM

Closing Tags are written like Opening Tag but with “/” like this </p>

Each tag has its own purpose, the Tag “p”  converts its content to a paragraph when its rendered on the webpage.

 HTML Element without content

Not every HTML Element has content,   br is one of those tags.  br creates newline on the webpage.

Since br doesn’t have content there is no need to write two tags.  Here is a shorthand for that.

Screen Shot 2014-07-24 at 7.49.45 AM

 Markup Tags are not case-sensitive

<p> = <P>

The general rule of thumb is to write tags in lowercase.

HTML Elements can have nested elements

Most HTML Elements can have elements within elements.

For example, paragraph can have another paragraph as its content.

<p>
  <p>This is a paragraph</p>
</p>

 Basic structure of HTML

Lets look at some of the most important and mandatory tags for every HTML documents

<html></html>

html is the root tag for every HTML document

Within html element you will have two children header and body.

<html>
   <header>
      <title> Page Title </title>
   </header>
   <body>
       <p>blah</p>            
   </body>
</html>

header contains information about your web page, meta data and link to scripts and other files. Dont put any element that you want to be displayed on the web page.   body is where your main content goes which gets displayed on the page.

You will need one more element called DOCTYPE.   This goes on the very top of the page this is where you define the version of your HTML language.  Remember, this is not your regular HTML element , you have to follow the following format.   It has an exclamation in the front and next to DOCTYPE is the version of the HTML.

<!DOCTYPE html>

<!DOCTYPE html> means this document is written in HTML5.

What is HTML5?

HTML5 is the latest version of the HTML language.  Compare to it’s previous versions,  you can do more with less code and it has some cool features that we will learn in future chapters.

so here is the full version of the basic HTML5 template.  When you start any HTML document you can copy this and starts building from there.

<!DOCTYPE html>
<html>    
  <header>       
    <title> Page Title </title>    
  </header>    
  <body>              
  </body> 
</html>

Since this is a very basic introduction to html tutorial , next tutorial will show you what you need to get started and you will be able to write your first line of HTML code and see the result.  Follow the link bellow to next tutorial.