A Simple Web Page Design – CSS

Final result simple web page design

This is the second part of the article in creating a simple web page design. Visit the first part if you haven’t read it yet by clicking [here].

In the first part of this article we demonstrated how to create a simple web page design in HTML. But that is not the end of it, we have yet to complete the simple web page design, and this time, in CSS. In a house, if the HTML is the foundation or the skeleton, the CSS is something that gives the form, color and appearance, like the paint or decoration, sort of. What we created in the first article was just a foundation and in this article we have to add some beauty to the page that we created.

Creating a Simple Web Page

A Simple Web Page Design Guide – CSS

The first step would be to add a CSS file reference to the HTML file. There are three ways of assigning CSS to the web page. In this example we will use a separate file for our CSS. In the declaration showed below the CSS filename is style.css. Once the CSS file has been declared, we can start applying our CSS codes.


<link type="text/css" rel="stylesheet" href="style.css">

Based on the declaration in the HTML code, the CSS filename in our example is style.css. The succeeding scripts that we are going to show here is written inside the style.css file.

The Global Styles

It is a CSS script that would affect the styles of all the HTML elements.

The first line, the one with asterisk, means that all HTML element should start with no padding and margins. This is just an initialization because there are internet browser that will automatically apply padding or margin to the page, which is not good.

The second part is the styles for the element of the HTML. The font-family style will set the font that would be used by the page. The multiple font families, the Arial, Tahoma, Helvetica and sans-serif, is the order of the fonts that will be used by the page. It means the Arial font will be used, but if it is absent, the Tahoma font will be used and so on.

The font-size style, as the name implies, is the size of the font and the color style is the fore color which will be applied to all text in the page.


* {margin:0px;	padding:0px;}
body {
	font-family: Arial, Tahoma, Helvetica, sans-serif;
	font-size: 90%;
	color: #17296F;	
}

The page should display like the image below.

Preview

Preview after the first set of CSS styling has been applied.

The Header

The #header is a <div> element with ID “header” in the HTML. What we did here is to set the background color, fore color and padding of the header.


#header {
	background-color: #2e5779;
	color: #fff;
	padding: 10px;
}

The page should display like the image below.

Preview after the header styling is applied

Preview after the header styling is applied.

The Menu

The #menu is a <div> element with ID “menu” in the HTML. In the CSS codes below, not only we style the colors and padding but also the behavior when there is mouse hover in the menu hyperlink. The “#menu a” was initialized without text-decoration style, which in the hyperlink’s case is the underline. The next part will handle the style when the hyperlinks’ state is “hover” in which can be translated as mouse hover. If the state is hover then the underline text-decoration style is set.


#menu {
	background-color: #3c729f;
	color: #fff;
	padding: 5px 10px;
}

#menu  a {
	color: #fff;
	text-decoration: none;
}

#menu  a:hover {
	color: #fff;
	text-decoration: underline;
}

The page should display like the image below.

The preview after the menu styling

The preview after the menu styling is applied.

The Content

The #content is a <div> element with ID “content” in the HTML. The style is self explanatory.


#content {
	padding: 10px;
}

The page should display like the image below.

The preview after content style is applied

The preview after content style is applied.

The Footer

The #footer is a <div> element with ID “footer” in the HTML. The border-top style will display a top border of the <div> element depending on what are stated. The other styles is self explanatory.


#footer {
	padding: 5px;
	margin-top: 10px;
	font-size: 90%;
	border-top: 1px solid #3c729f;
}

The page should display like the image below.

The preview after the footer style

The preview after the footer style is applied.

Now to conclude let’s add more sample contents to our web page.

Final result simple web page design

Final result in creating a simple web page design.

That is how we create a simple webpage design with CSS.

You can leave a response, or trackback from your own site.

One Response to “A Simple Web Page Design – CSS”

  1. [...] actual HTML design –> </body> </html> Visit lang ani nga topic sa akong blog: A Simple Web Page Design – CSS Very simple na nga web page. Log a comment for questions or suggestions. Here's the first part [...]

Leave a Reply