Making CSS

For CSS, you will need Mozilla Firefox.

Now move your index.html file that you made yourself into the new tab in your Mozilla Firefox browser.

For creating index.html look previous post about coding html.

Right click anywhere on your site, inspector window will appear.

Inspector mode

This is how your html looks without any styling.

Now we need some styling magic..

Create style.css file in the root of your site, at the same place your index.html file stands.

Inspector in firefox gives you just a preview of what you can get with the sample code, so it is just temporary.

Every code you place here, you need to copy and paste in your style.css and save for permanent changes.

First of all we need to reset all the styling which is set to default by browsers..

This is how the reset code should look like

Now, when we take a look on our design in photoshop, also the structure in html that we made, we can see some entities that needs styling. It is best for us to style things that are coming first.

So we have:

• background
• wrapper
• header
• main
• primary
• secondary

Background
For the background we will set a picture we have cropped previously.

Wrapper
Than we set the width for the wrapper, and allign its position to the center of the page by setting margin to auto.

Header
Here we have logo,navigation and a tagline as a separated entities.
So when we have thing that we need to float left or right, we need first to set overflow to be hidden.
Now we call logo and float it left, and give it a background.
For the navigation we also set background, its width and height, left margin to make some space..
Navigation will float left.

Code for header, background, wrapper

Main
For the main section we will set the top margin to make some space.

Primary
In the primary section we have three posts that have the same structure. So we will make style for all of them with the class tag.
Here we have the background, image, Headline, meta description, text and the link Read more. See the picture below.

Main, primary and post formatting

Secondary

Here we have some boxes that have the same styling and under them we have social images.

The whole secondary unit will float right. In it we will define sidepost by setting its title, image and the arrows for navigation.

In the html we already have called images for facebook and twitter, so we have done the whole CSS code.

Secondary and sidepost formatting

Now copy all the codes we have written here in inspector, and paste it into your style document, and save it. Turn of the inspector and refresh the page. You now have the whole site working, made from photoshop to the html/CSS.

For any trouble you can ask me a question, and ill be more than happy to help you.

Also there are number of html and css tutorials on the web like w3school, where you can find tags for your html or CSS.

Goodluck!