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:
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:
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:
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:
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:
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.
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:
| 1 | 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:
| 0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 | /* 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;} |
- After pasting the above template code, save it!
- Next insert the below code between thetags:
| 0102030405060708091011121314 | <div id="navigation"><h2>The Main navigation</h2>;</div><div id="centerDoc"><h1>The Main Heading</h1><p>Go to the Web Designer's Killer Handbook home page and grabthe practice HTML page that we will used as the startingtemplate 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 HTMLpage - and do it now!</p></div></pre> |
And insert the below coding between the <head> </head> tags:
| 123 | <title>First CSS Tutorial</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="myCSS.css&quot; rel=&quot;stylesheet" type="text/css"></pre> |
This was all for the Part 1 of the CSS Tutorial!