Friday, 30 September 2016

Formatting Blog Posts with HTML and CSS

Formatting Blog Posts with HTML and CSS

Setting The Structure

Applying structure to the blog post will be the job of HTML, which serves as the skeleton to your webpage. Using div tags, we can set width, heights, give our page columns, create sub sections and more. I will be keeping the structure here simple, going for a two column layout, with this text being on the left side of the page. I can achieve this by setting up two divs and applying classes to them that 'float' each one in a different direction; this one floated left, the other column floated right.

Style Over Substance

If HTML is the skeletal structure of the webpage, then CSS is the what's going to make it look nice. CSS style sheets can give styling to elements of a webpage such as p tags or h1 tags, or they can be used in conjunction with classes. Classes allow you to designate a specific set of tags as a class, which allows you to give that element more specific styling. For example, in this page each column has p tags, however I have given the p tags in this column a class, which allows these specific p tags to be coloured blue.

Here are the two files I used to create this blog post; HTML (left) and CSS (right)

1 comment:

  1. This is good, please see if you can stretch yourself even further how about some JavaScript on your blog, even better. Dwayne

    ReplyDelete