Applying Style to Your Web Layout

Hi Everyone,

Today I will show you how to styling your previously HTML 5 layout (you can read it now if doesn't). Let starting by creating new css file and name it style.css. Put this code inside your new css file.

body{
  width:960px;
  margin:15px auto;
  font-family: Arial, "MS Trebuchet", sans-serif;
}
p{
  margin:0 0 20px 0;
}
p, li{
  line-height:20px;
}
h1 {
  text-align: center;
}
header#page-header{
  width:100%;
}
header#page-header nav ul, #page-footer nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
#page-header nav ul li, footer#page-footer nav ul li{
  padding:0;
  margin: 0 20px 0 0;
  display:inline;
}
section#main-section{
  float: left;
  width: 74%;
}
section#main-section aside{
  float: right;
  width: 35%;
  margin-left: 5%;
  font-size: 20px;
  line-height: 40px;
}
section#rightnav-section{
  float: left;
  width: 25%;
}
footer {
  float: left;
  width: 100%;
}
footer#page-footer {
  text-align: center;
  margin-top: 20px;
}

body

All of content body set width to 960px that means almost meet general screen width of laptops or desktop. Margin show top-bottom to 15px and horizontally center by auto. Font using Arial as first default and the backup font are "MS-Trebuchet" and sans-serif. When font set in body there's generally used by all element inside body except those element set different font.

p

Paragraph or p use inside article tag using specific margin and line height.

h1

Heading h1 only has property centering text-align.

nav ui li

Top navigation nav ui and li displayed horizontaly with use of property display inline and without disc or start in front of list item with property list-style set to none.

section

Two body section share width with each has 74% and 25% of total body width.

aside

An aside put between p tag that use width 35%.

And here's the result with those style.

That its for now.

Thanks