Jump to content

layout of a css page


cranebill

Recommended Posts

THis is a very basic css page (quite an achievement for me), I would like to know if this is a sensible way to lay out the page so that I can work on it at a future date and learn from it, I have seen some examples of css pages and they just look like a mass of code with no breaks in at all, I can't understand how anyone can make sense of them myself (but this may be naivety or inexperience on my part) what seems like a good idea at the moment may not be, can you enlighten me to any issues I may encounter as I progress with css by laying out my document like this Thanks/* Header settings */h1{text-align: center;font-family: arial}h2{text-align: center;font-family: arial}h3{text-align: center;font-family: arial}h4{text-align: center;font-family: arial}h5{text-align: center;font-family: arial}h6{text-align: center;font-family: arial}/* font family*/p {font-family: arial}/* Paragraph alignment*/p.center {text-align: center}/* Hyper link styling */a.two:link {color: #0000ff}a.two:visited {color: #0000ff}a.two:hover {font-size: 125%}/* Changes the first letter of a paragraph */p.article:first-letter {font-size:x-large}/* Change background colour */body {background-color: eee8aa}/* Changes the first letter of a paragraph */p.article:first-letter {font-size:x-large}/* Change background colour */body {background-color: eee8aa}

Link to comment
Share on other sites

Guest FirefoxRocks

I haven't tested it out on a HTML page yet, but to clean up your code, I did this:

/* Header settings */h1,h2,h3,h4,h5,h6 {text-align: center;font-family: arial}/* font family*/p {font-family: arial}/* Paragraph alignment*/p.center {text-align: center}/* Hyper link styling */a.two:link {color: #0000ff}a.two:visited {color: #0000ff}a.two:hover {font-size: 125%}/* Changes the first letter of a paragraph */p.article:first-letter {font-size:x-large}/* Change background colour */body {background-color: eee8aa}

Also, it isn't likely that you will need to use h4, h5 and h6 in a document. The :first-letter pseudo-class may cause issues with Internet Explorer.

Link to comment
Share on other sites

I haven't tested it out on a HTML page yet, but to clean up your code, I did this:
/* Header settings */h1,h2,h3,h4,h5,h6 {text-align: center;font-family: arial}/* font family*/p {font-family: arial}/* Paragraph alignment*/p.center {text-align: center}/* Hyper link styling */a.two:link {color: #0000ff}a.two:visited {color: #0000ff}a.two:hover {font-size: 125%}/* Changes the first letter of a paragraph */p.article:first-letter {font-size:x-large}/* Change background colour */body {background-color: eee8aa}

Also, it isn't likely that you will need to use h4, h5 and h6 in a document. The :first-letter pseudo-class may cause issues with Internet Explorer.

Thanks, I did group the headings together originally, but gave them seperate lines as I had been toying around with different fonts and alignmentsThe first-letter pseudo-class has already caused me issues, when I tried to do a form as it effects the first letter of a form title, I intend to drop it, I was just seeing how it works, appreciate your comments Thanks
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...