QUICK CSS TUTORIAL 1. To get a nice html and ... - WordPress.com

60 downloads 18 Views 49KB Size Report
QUICK CSS TUTORIAL. 1. To get a nice html and visual editor try this website: http://www.w3schools.com/css/tryit.asp?filename=trycss_default. 2. Then delete ...
QUICK CSS TUTORIAL 1. To get a nice html and visual editor try this website: http://www.w3schools.com/css/tryit.asp?filename=trycss_default 2. Then delete everything and paste in the html below, and notice the change.

My very first styled page

This is a paragraph.

This is another paragraph

And this is another one

And this is a link to Google

Everything that I’m going to change now is the CSS. This means I am just changing the style (what it looks like) of the sheet not the content. All of this information is in the section of the html within and : WRITE OR PASTE YOUR STYLE IN THIS SECTION 3. Adding colours: First I am going to change the background colour. When you make a css rule the format is:

Here I am going to create a rule for the background colour using a hex value (specific colour): body { background-color:#FACC2E; } and for the header I will use a html friendly colour: h1 { color: yellow; } Now my background is an orangey colour and by header is yellow. 4. Fonts I am going to change the fonts and make some text underlined and size. To do this the CSS should now look like this: h1 { font-family: "Geneva"; color:yellow; text-decoration: underline; text-align: center; } p {

font-family:"Helvetica"; font-size:14px; } 5. Links So we have changed everything except the link has remained blue and underlined- this is the default setting and you need to style them separately. a:link{ font-family: "Helvetica"; text-decoration: none; color: red; } The end result is: body { background-color:#FACC2E; } h1 { font-family: "Geneva"; color:yellow; text-decoration: underline; text-align: center; } p { font-family:"Helvetica"; font-size:14px; } a:link{ font-family: "Helvetica"; text-decoration: none; color: red; }

My very first styled page

This is a paragraph.

This is another paragraph

And this is another one

And this is a link to Google

For a more indepth tutorial try: Start here: http://www.w3.org/Style/Examples/011/firstcss.en.html For the keen: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/ And for further html and css help and ideas http://www.w3schools.com/ http://www.htmldog.com/ All the css properties - http://www.w3schools.com/cssref/default.asp All the html tags -http://www.ncsacademy.com/html/htmltags.cfm