HTML and CSS – The Basics

So, one of my friend said me to post an article for basics so the beginners can understand. But its not easy to learn in one day and you have to read and try lots of experiment on your own to know about CSS and HTML combination. CSS stands for cascading style sheets, for styling the web page. HTML is a markup language which stands for Hyper Text Markup Language, In simple words HTML creates a skeleton for the web document, where CSS defines the HTML object’s appearance like its size, color, position on the screen etc. If you don’t define a CSS for your HTML document the web browser will automatically use the default CSS that’s build inside the browser. For instance its predefined that text color should be black in the HTML document by browsers default CSS.

CSS gives lots of flexibility for web page layout design. A single HTML page can be made to look in different ways by changing the CSS alone. A best example to see this is to visit CSS Zen Garden. You can see how the entire site appearance changes just by changing the style sheets.

HTML consist of structured elements defined with tags. A tag is defined with angular brackets or lesser than and greater than symbol. The following is a simple example for a HTML file.

<html>
  <head>
    <title> First web page </title>
  </head>
  <body>
    Some Content in the body.
  </body>
</html>

Note that the html is divided into two main part. The head part and the body part. Whatever you keep on the head(except title) The user cannot see these contents on the webpage. The head has the information that browser needs like to include a external java script file or CSS file, meta data about the web page, document type, char set etc. The body part is all what we see on the actual web page.

The CSS plays a major role in making these objects appearing in the viewport. If your a firefox 4 user then you can see the default style sheet by pasting this link resource:///res/contenteditable.css on the address bar. Now we write a css code to override the predefined. To make the background color to green and text color to blue the following css codes are necessary.

 body {
 background-color:#00DD00;
 color:#0000DD;
} 

Its very easy to change the overall appearance of the site just by changing the style sheets. A style sheet can be externally attached. or Defined on the page head. or Defined inline in the object. But that’s advanced. As a beginner its best to practice on the page head by defining it under the head tag with <style> tag.

A web page has so many¬† similar elements on a single web page. Like for example a web page has several <p> element. How is it possible to apple style for a selective <p> element. Its done by selectors, there are two selectors namely id and class. Several elements can have same class name but id should be unique for all the elements. The selectors are defined by a prefix to the css definition. Defining without any prefix refers to an html tag directly. To select an id the definition should have¬† the prefix “#” followed by the id name. To select a class the definition should have the prefix “.” followed by the class name.


<html>
<head>
    <style>
#id1 {
color:#FF0000;
}
.class1 {
color:#00FF00;
}
    </style>
  </head>
  <body>
    <p id="id1">
      This is para 1
    </p>
    <p class="class1">
      This is para 2
    </p>
  </body>
</html>

“This is para 1″ will be in red and “This is para 2″ will be in green. To learn more about HTML and CSS visit W3Schools website. Learn HTML first and CSS later when you finish HTML. You can also view tutors from lynda.com which also has wonderful video tutors about html and css.

 

One Response to “HTML and CSS – The Basics”

Leave a Reply