CSS (Cascading Style Sheets) is used to format the information into a uniform, consistent and pleasing nature. CSS works with HTML, in order for a HTML file to pair with a CSS file, I used the following statement in my HTML file: < link rel="stylesheet" type="text/css" href="style.css" /> where style.css is the name of the CSS file.

Firstly, the webpage must be mapped out to have a rough idea of what you want in your webpage and the position of it. For my webpage, I first have a container which will hold the entire webpage, and in the container, have the header at the top, content in the middle and a footer at the bottom. The content is then segmented into the navigation bar at the left, and the main in the centre. To segement the HTML file to apply different formatting to different parts of the website, the HTML file is divided into sections using < div = id> (opening tag) and < /div > (closing tag) where "id" is the name of the segment. This specific sections can be formatted in the CSS file by refering to the segment using #id {formatting} .

Different types of elements (such as header, paragraph and numbered list) can also be formatted using CSS, using tagname {formatting} . The tag name in the CSS sheet does not need the angled brackets. Multiple elements can be selected for formatting by using commas, and you can also limit the formatting of elements in a certain section by using #id tagname {formatting}.

Some common formatting:

  • width: x px - Set width by "x" amount of pixels
  • background-color: #XXXXXX - Set background colour to that of the given hex code. Colours such as black and red can also be used.
  • font-family: XXXXXXXXX - Set the font to a certain family
  • padding: Wpx Xpx Ypx Zpx - Set top-padding by W pixels, right-adding by X pixels, bottom-padding by Y pixels and left-padding by Z pixels.
  • padding: Xpx - Set top, right, bottom and left padding by X pixels
  • margin-left: X px - Set left margin by X pixels. The top, right and bottom margin can also be specified by change "left" appropriately
  1. Segmented my HTML file into different sections, Container, Header, Content, Footer, Navigation and Main
  2. Created a file like the one I did in HTML, but renamed it style.css
  3. Opened the CSS file using brackets
  4. Link the CSS file to the HTML file
  5. Using CSS, specified the size to the different sections using width:X px
  6. Gave padding and margin to the sections
  7. Shift the navigation bar to the left of the main section using float:left
  8. Made aesthetics changes such as font family, size, background colour, font style etc.
  9. Previewed changes by dragging the HTML code into Chrome, and make necassary changes.