We start off opening our root folder from last week and placing it in user work just so it will run a lot faster. We then create a new document but instead of HTML we create a CSS document, this is an external document that we can then link to every page as opposed to coding it for every new page we simply link the styles sheet by placing one line of code on the HTML document that links them.
The grey text on the style sheets doesn't actually affect the design or look of anything, it simply a note to to the design so that he knows what is he coding or a title reminder. To create a note one starts the sentence with /*... and finishes with */
To begin coding anything we #name of file, space and use the { symbol, for every code tab it's possible to do it all on one line but that can often become confusing when navigating to look for an error, therefore it is easier to just press return after ever action and that'll not only take it to the next line but also indent the next line too.
To begin with we're going to change the font of our body text, so we press { and the return. We the start typing font family, in a drop down menu it should appear, click this and enter, a selection of families should then appear, select the font family and enter again. After everything always put a semi colon, this is a close setting. Return button to the next page and close the code with a }
Then save as style sheet, close style sheet. We then return to the HTML document and on the far right toolbar there is a CSS box, at the bottom of this there is a chain symbol the represents 'linking' we then brows for the desired CSS document and link the 2 documents together.
We are now onto creating a design, First of all we want to create a background, a containing box. We have decided as a class that the dimension of this containing box should be 1024x768, we always work in px therefore this needs to be put after every dimension. The coding looks like this;
It's all well and good creating a box but we want to add colour to it to distinguish it because this containing box won't actually fill the whole screen because it isn't responsive.
To link it up to the the HTML code we don't need to go through the whole process again we simply just save the CSS, go to HTML document (which is now open in another tab since linked) Make sure we link the container inside the body but close after text. To link type <DIV ID> and it'll come with an equal sign as well and a list of CSS documents saved, select container, close the document after the text with </ and it'll automatically fill in the rest.
This is what the website looks like now, but there is a white border on the top and left, to rectify this go back onto css document and the container coding to add another layer called position, 5 options appear but we only really use 3 of them; absolute, fixed and relative.
Select 'fixed', on the next line we can then tell it where to fix our container with the commands 'top:' and 'left:' Below is an image of it being told to be top:0px; and left:0px; This puts the container right in the top left of our screen.
We can also use percentages to position the container; to keep it so that every time we we move or alter the size of the web window when viewing we left 50% and margin-left half of the width of the container. Save the css so that it is updated and it should be automatically updated on html because it has already been linked.
Next we move onto putting logos from illustrator into css and html. We created a quick simple logo and saved it for web, save as PNG 24 as it leaves a clear background
