CSS Tutorial: Part 1 with Graphical Presentation

  • By
  • January 26, 2012
  • 0 Comment

Using CSS Cascaded style sheets to create web pages helps reduce the work of HTML, means you will be able to compress the size of your coding and therefore you will have to work less in creating web pages for your site. And the best part, the loading speed of your web pages will improve significantly, and it will ease the update and printing process too. Now that you have come to know about the benefits of using CSS, you must ride this CSS Tutorial: part 1 for taking baby steps to create your own CSS based website.

CSS Tutorial: Part 1(Building main layout of your site)

With the help of the below CSS tutorial, you will be able to create basic layouts of your website easily:

Must know the below HTML Tags:

Only the below 6 basic HTML Tags you need to know in order to create your CSS web page

1.<h> (Heading tag)

The Heading tags which vary from ‘<h1></h1> to <h6></h6> (h1, h2, h3, h4, h5, h6). As the number after descends, the heading will become smaller. You need this tag to create headings and sub-headings of your page.

This is a screenshot for demonstrating the use of heading tag:

Usage of Heading Tags

2. <p> (Paragraph tag)

The next tag you need to know is Paragraph tag. This tag is used to make paragraphs on your web page. REMEMBER: A space is automatically included to your paragraph text before and after each <p> tag pair. Below is an example:

Paragraph Tag

3. <ul> (unordered list) and <ol> (ordered list) (Listing tags)

List tags are used to create menus. From which the tag <ul> is used for un-ordered listing which forms a list with bullets or other symbols that do not state or act according to an order. The second listing tag is <ol> which means ordered list, which creates numbered or lettered lists with order. Below is an example demonstrating the uses of both the tags, respectively:

unordered list and ordered list

4. <div> (Division creating tag)

This tag creates portion/parts of your page so that you can apply things in it (rather than applying it on the complete page). In simple words, you create a container to put things in by using this HTML tag. Under this tag whatever you do will apply on it only. This tag is used for dividing web pages into header, center-main body, left content, right content and footer. This is an example:

Division Creating Tag

5. <a href>  (Hyper linking tag)

This tag is used to hyper link the text to external pages or internal pages (or can be used for linking other things too). Clicking on the text with this tag, will direct you to the page mentioned in its source. Below is an example:

Hyper Linking Tag

6. <img src> (Image calling tag)

This tag is used to link/call images from an external link or from your folder to display it on your web page.

Image Calling Tag

Layout creation through CSS:

In order to work on the following examples of CSS Tutorial: Part 1, we need to have a HTML page first, which you can create by following the below steps:

1. Create a folder

2. Launch notepad application on your system.

3. A blank notepad will appear in front of you. Name and save it as: practiceHTML.htm. Select the folder destination. Click on when a dialog box appears stating a warning of changing the file extension from. Now go to the folder in which you have saved this file and right click on the file and select: open with and choose Notepad.

4. When Notepad appears, simply paste the below code in it:


		My Practice HTML Page

The above template code creates the basic formation for all HTML pages. Now your CSS part of the work begins inside the body tag:

Forming The CSS

Now create a new notepad file and name and it as firstCSS.css. Next open that file and paste the below template CSS code in it:

/* Generic Selectors */
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #333333;
	background-color: #F9F9F9;
}

p {
	width: 80%;
}

li {
	list-style-type: none;
	line-height: 150%;
	list-style-image: url(../images/arrowSmall.gif);
}

h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: bold;
	color: #000000;
}

h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	border-bottom: 1px solid #C6EC8C;
}

/**************** Pseudo classes ****************/
a:link {
	color: #00CC00;
	text-decoration: underline;
	font-weight: bold;
}

li a:link {
	color: #00CC00;
	text-decoration: none;
	font-weight: bold;
}

a:visited {
	color: #00CC00;
	text-decoration: underline;
	font-weight: bold;
}

li a:visited {
	color: #00CC00;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: rgb(0, 96, 255);
	padding-bottom: 5px;
	font-weight: bold;
	text-decoration: underline;
}

li a:hover {
	display: block;
	color: rgb(0, 96, 255);
	padding-bottom: 5px;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #C6EC8C;
}

a:active {
	color: rgb(255, 0, 102);
	font-weight: bold;
}

/************************* ID's *************************/

#navigation {
	position: absolute;
	z-index: 10;
	width: 210px;
	height: 600px;
	margin: 0;
	border-right: 1px solid #C6EC8C;
	font-weight: normal;
}
#centerDoc {
	position: absolute;
	z-index: 15;
	padding: 0 0 20px 20px; /*top right bottom left*/
	margin-top: 50px;
	margin-left: 235px;
}
  1. After pasting the above template code, save it!
  2. Next insert the below code between thetags:
&lt;div id="navigation"&gt;
&lt;h2&gt;The Main navigation&lt;/h2&gt;;
&lt;/div&gt;
&lt;div id="centerDoc"&gt;
&lt;h1&gt;The Main Heading&lt;/h1&gt;
&lt;p&gt;
Go to the Web Designer's Killer Handbook home page and grab
the practice HTML page that we will used as the starting
template for this tutorial. You can find it under the heading:
'To create the practice HTML page do the following:'.
Follow the instructions there and create your basic HTML
page - and do it now!
&lt;/p&gt;
&lt;/div&gt;</pre>

And insert the below coding between the <head> </head> tags:

&lt;title&gt;First CSS Tutorial&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;link href="myCSS.css&amp;quot; rel=&amp;quot;stylesheet" type="text/css"&gt;</pre>

This was all for the Part 1 of the CSS Tutorial!

Related Articles

  • The Easy Way to Build A WooCommerce Restaurant Website

    As a restaurant owner, there are a number of ways you can benefit from building a WooCommerce restaurant website. For example, you can offer online ordering options to customers, automate order processing, and potentially increase sales. Creating a functional restaurant…

  • The Three Types of Service Organization Control Reports

    The primary purpose of a service organization control (SOC) report is to help your service organization or company communicate information in regards to your controls. The report will be given by an independent service auditor (who must be a certified…

  • Bar Preparty Identity

    The unique identity of a bar attracts thousands of customers and increases sales. Let’s see how the unusual bars around the world look and let’s learn more about the trends in their design. Types of bars: Lux-format. To decorate such…

Written By
Jack Evan

Leave a Reply

Your email address will not be published. Required fields are marked *