Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

A Simple Journal Website using HTML with CSS: part 2

align

  • Please log in to reply
No replies to this topic

#1 ethikz

ethikz

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 105 posts

Posted 26 October 2010 - 03:58 PM

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

Attached Thumbnails

  • My Trip Around th.png
  • My Trip Around th.png

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

  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download