Jump to content

A Simple Journal Website using HTML with CSS: part 2

- - - - -

  • Please log in to reply
No replies to this topic

#1
ethikz

ethikz

    Programmer

  • Members
  • PipPipPipPip
  • 112 posts
Below is the CSS I had to use for the HTML page in part 1


[COLOR="Blue"]/* This is used to define the formatting of content within the body tags of the html code */[/COLOR]

body { 

  font-family:     Verdana, Geneva, Arial, sans-serif; 

  font-size:       small; 

} 


[COLOR="Blue"]/* This is used to define the formatting of content that has the h1 or h2 tags of the html code */[/COLOR]

h1, h2 { 

  font-weight:     normal; 

  color:           #cc6600; 

  border-bottom:   thin dotted #888888; 

} 


[COLOR="Blue"]/* This is used to define the text size of the h1 elements */[/COLOR]

h1 { 

  font-size:       170%; 

} 


[COLOR="Blue"]/* This is used to define the text size of the h2 elements */[/COLOR]

h2 { 

  font-size:       130%; 

} 


[COLOR="Blue"]/* This is used to define the text style of the blockquote elements */[/COLOR]

blockquote { 

  font-style:      italic; 

} 


[COLOR="Blue"]/* This is used to define the table formatting */[/COLOR] 

table { 

    margin-left: 20px; 

    margin-right: 20px; 

    border: thin solid black; 

    caption-side: bottom; 

    border-collapse: collapse; 

} 

 

td, th { 

    border: thin dotted gray; 

    padding: 5px; 

} 

 

caption { 

    font-style: italic; 

    padding-top: 8px; 

} 

 

th { 

    background-color: #CC6600; 

} 

 

[COLOR="Blue"]/* This is used to define the background color of the cells within the table */[/COLOR]

.cellcolor { 

    background-color: #FCBA7A; 

} 

 

table table th { 

    background-color: white; 

} 

 

[COLOR="Blue"]/* This is used to define the list element and it adds icons */[/COLOR]

li { 

    list-style-image: url(images/backpack.gif); 

    padding-top: 5px; 

    margin-left: 20px; 

} 

 

.center { 

    text-align: center; 

} 

 

.right { 

    text-align: right; 

}


I have tried to explain this well and if there are still questions please ask so that I may clarify and help you understand it better

Part 1 - HTML Page Code

Attached are images of what the website will look like with the css


if you like please +rep

Edited by ethikz, 26 October 2010 - 06:11 PM.





1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users