HTML+CSS: How to Create a Colorful List

We shall build a web page using HTML and CSS of the following layout-

HTML CSS

Our web page shall have the demonstration of tactical use of <div></div> and <ul> </ul> tags. There will be a main division, which shall not occupy the entire page only a definite width and shall contain all the elements inside it. Under this division two sub-divisions main menu and main content. Under main content, again there are two sub-divisions- content and side bar (a list).

HTML CSS

Therefore, our skeleton HTML code of the page will look like this-

HTML CSS

Now, add an image to the cover photo, some menu items in the main menu (un-ordered list), header and paragraph elements to content and again some items to the side bar (another un-ordered list).

HTML CSS

After adding these items to the skeleton HTML code web page is somehow displayable-

HTML CSS

The page looks very much raw and not very attractive. It needs a fair touch of CSS now. Start with the main. Default margin and padding are set to zero. All texts in body shall be of uniform font-family and size. We attach this CSS externally in a separate file and link it with the HTML file by following code inside the <head></head> tag-

<link href=”style.css” rel=”stylsheet” type=”text/css”/>

Our work with the main division in CSS file as follows-

HTML CSS

After this slight CSS work there is no much change in our page-

HTML CSS

Now we come to work with the main menu section. We have to float the main menu items horizontally. Here the links in main menu items are empty. They are only to demonstrate the colorful functions of the list.

HTML CSS

After applying these new CSS codes some colorful looks come to the page-

HTML CSS

The “hover” in line 15 of the CSS code changes the background color of the link when mouse pointer goes over it. We are done with half of our page. Now we need to place the content division and sidebar division in their respective places according to our layout. Following CSS code helps to place the main content in its position.

HTML CSS

The overflow: hidden attribute prevents other sections to move over and mix up with the respective section. After these lines are added to the previous code, the page looks as follows-

HTML CSS

It seems things are almost okay but the heading and texts are too close. Let’s do some style work with the headings.

The changes in the page are-

HTML CSS

Now, we need to style the side bar section. It is already in its position at the right. Only slight work is to do in CSS.

HTML CSS

The page looks like as follows now-

HTML CSS

We are almost done with our page only to know how we add a copyright dialogue at the bottom. Add the following code to the HTML file just before the closing tag of the main division.

HTML CSS

 

HTML CSS

Do some styling with the footer copyright section.

HTML CSS

Finally, our page looks like:

HTML CSS

See adding more attributes, colors etc. Firebug add-on for firefox browser will help to inspect the page elements and determine correct color, size etc. You can add custom colors choosing colors by Pixie color picker. Download it from: http://pixie.software.informer.com/2.0/

One reply on “HTML+CSS: How to Create a Colorful List

  • Bespoke corparete events

    Hello to all, the contents present at this website are truly awesome for people knowledge, well, keep up the nice work
    fellows.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.