Learning CSS

A Simple HTML Document

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This is my First Page</title>
</head>
<body>
<h1>The structure of HTML</h1>
A typical HTML document contains the following part.
<h2>1. Head</h2>
This section provides description of the HEAD in HTML Document.
<h2>2. Body</h2>
This section provides description of the Body in HTML Document.
<p>This is the paragraph text that is recently included</p>
<ul>
  <li>This is the list item using li tag.</li>
</ul>
</body>
</html>

Observe the structure and basic tags used in the code above. More content and formatting tags can be used that are explained in reference tutorial link provided in last lab session.

Create a HTML Document

Create the HTML document with Notepad or Text editor. If you decide to create it with any of the word processing software make sure that it do not contain formatting instructions.

Refer lab document of  previous session for any difficulty in creating HTML Documents. 

Validate HTML Document

  • http://validator.w3.org/#validate_by_input

Open the HTML Document with browser

  • Refer lab document of  previous session for any difficulty in creating HTML Documents. 

Introduction to Styles and Style Sheets

Style

Style specifies how elements of an HTML Page should be formatted. 

A template of defining a style consists of 

  • Selector { Property:Value } Example: body{ font-family: Verdana; }

Style Sheet

In design of a web page many such style will be required to be specified. the collection of all such defined style is contained in a Style Sheet.

Fore more detail read the CSS Tutorial by W3Schools.org ( link )

Create your first CSS Flie

Steps

  • Open a text editor
  • create a new css file. Example (vi MyFirst.css)
  • Add the text as displayed in the following table. 

body { 
font-family: Verdana, Arial, Helvetica, sans-serif;
text-indent: 25px;
}

Define more styles for Basic HTML Elements.

  • Headings ( h1,h2,h3...)
  • Text
  • Paragraph
  • Backgound

Validate CSS

  •  Utilize CSS Validation Service available at : http://jigsaw.w3.org/css-validator/

Link CSS to HTML File

<head>
<link href="MyFirst.css" rel="stylesheet" type="text/css">
<title>This is my First Page</title>
</head>

Open the HTML Document with Browser 

  • Open the html document with browser or refresh if it is already open.

Try Formatting various elements of HTML Document

Source: Try-It-Yourself! (source: W3Schools.org)

  • CSS Background
    CSS Text
    CSS Font
    CSS Border
    CSS Outline
    CSS Margin
    CSS Padding
    CSS List
    CSS Table

References:

  • http://www.w3schools.com/html/default.asp
Last modified: Wednesday, 10 July 2013, 3:09 PM