Monday, August 17, 2015

How to write simple HTML Page using external StyleSheets


HTML (HyperText Markup Language) is used for rendering web pages. There are many HTML standard versions like XHTML, HTML DTD, HTML 5 etc. We can view a HTML document using a browser program such as Firefox, Chrome, Opera and Internet Explorer.

HTML is structured and tag based language and it also includes other type of scripts like JavaScript, ASP.Net, PHP, CSS, jQUERY, XML, AJAX are some popular technologies. There are a wide range of web technologies that HTML documents supports to achieve different goals. 

HTML tags

HTML elements like title, paragraphs, images  are displayed using HTML tags. There is an opening tag and a closing tag.The tags are not case sensitive, so you can write the code in both uppercase and lowercase. However, it is not the best coding standard. Pick your own standard and be consistent.

Example :-

 < head>     (This is an opening tag)

 </head>   (This is a closing tag)

The most important rule for creating a proper HTML page is to make sure that all opening tags are closed.


The web page can be very complex with various tags and html attributes.But the common structure of HTML is as follows 





                                                                   Statement ....
                                                                   Statement ....                                                                  
                                                                   Statement ....

                  Statement ....


The document starts with a <HTML> tag and ends with </HTML> and all other stuff goes between these two tag elements.To display elements in page header, write all other tags that goes between the <HEAD> and </HEAD> section.

Next is the body of the HTML document. The body is the section where you put main content of the page.

All elements like page title, paragraphs, lists headings, etc goes inside <BODY> and </BODY> tags.
There is no rule which says that you need to put a certain page element in head section or body section or footer section.These are best practices being followed by all web developers.

Web standards have improved in every area including styling the web pages and improving graphics of web pages.We can style our page using Cascading Style Sheet. It defines how the web page looks when rendered in a browser. The style elements are background-images, background-color, border, fonts,padding , margin etc and so on. All the stuff that makes you web page appear beautiful and attractive to users.

There is two way to include style information - Internal and External.

  1. Internal - uses the <STYLE> and </STYLE> tags to define the style of page. All you have to do is to add the style information between these two tags. You can place these tags anywhere on a web page - Head, Body or Footer. But the best practice is to place it on Head section.
  2. External - uses a CSS file to display style information. Sometimes there are two many elements to style and the HTML document gets bigger. In this method, we save our style information in an external .CSS file. Example: Style.CSS file and link our HTML document to this CSS file.

Step 1: Open a text editor like a Notepad or get a free text Editor, I am using Notepad++, it's free to download. Once it is open we go to the next step.


Step 2: Write HTML code given in the example below. 

HTML Code for Web Page

Step 3: Once you have completed  the code. Save your HTML document to your local computer hard drive. In the example below , we saved it in a folder "Web Data" .Check out the file type, it is "Hyper Text Markup Language file" and file extension is  .HTML.
Proceed to next step.

Step 4: Now we create a CSS stylesheet file and save it in same directory where you saved HTML document previously. For this, open a new notepad document and save it as .CSS file. That's it you are done.

A New CSS file

 Step 5: In the figure below, I have a minimum style for my example HTML page.Type the content in Style.CSS file which you saved in previous step.

CSS Styles for Web page

Step 6: The HTML document must refer to this CSS file , so link your CSS file to HTML document by typing this code in <head> section of HTML document  and save the page again.

Refer to external CSS file

Step 7: It is time to test your page, Go to the directory where you saved your HTML document and right click to open it with a browser..

Open the HTML document in a browser
HTML Page in a Browser window

If you see a page like the one above, then you have created your first HTML page with external CSS. If it is not working then visit the steps again and verify them all over again.


HTML is a very simple language and newer HTML 5, you can create beautiful pages and style them using CSS. In this example we have used the element directly in the style sheet. But it is not necessary to refer the element directly in the style sheet. We can set ID or Class for the HTML elements and refer those in CSS pages.By doing this we can refer different styles for same element in two different places.
Overall, external CSS files are easy to manage and you do not have to worry about the size.

Learn more about different HTML tags and CSS style tags and you can create more options for creating beautiful pages.To learn more about CSS and HTML visit : W3Schools

No comments:

Post a Comment