We are using Grammarly to help us writing this article

Applying Style to Your Web Layout

by Didin J. on Dec 10, 2016 Applying Style to Your Web Layout

How to applying styles to HTML 5 layout using CSS 3 so the layout that you designed match with your requirements.

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

The following resources might be useful for you:

Loading…