- This topic has 6 replies, 2 voices, and was last updated 19 years, 9 months ago by
.
-
Topic
-
Could anyone give me a hand in adding CSS to my site? I’m very new to web-design and so I don’t know much about CSS, but I hear that its the thing to use to make everything better. From my understanding I could use format.css in my root folder to display the site title, the buttons on the sidebar, the background color or pattern, the text color, and the link color. Therefore the only thing that I would have to actually put on each page of the site is the info that goes there, like News on the homepage or Events on the Events page. Is this correct?
Also could someone help me add scrollbars to some of my pages?
Thanks.
-
Replies
-
Quote:From my understanding I could use format.css in my root folder to display the site title, the buttons on the sidebar, the background color or pattern, the text color, and the link color.
CSS applys formatting it doesn’t have anything to do with content, a html page can display without CSS. It will look like shit but it will still display. Hit the view>source button on your browser, at the very top you’ll find the css for this page between <style type=”text/css”> and </style>
Or even better yet start here: http://www.w3schools.com/default.asp
Ok, I’ve gone through their tutorial and came up with this for my format.css in my root folder:
Quote:<head>
/* background colors */
<style type=”text/css”>
body {background-color: black}
h1 {background-color: #000000}
h2 {background-color: #000000}
p {background-color: #000000}
</style>/*text color/*
<style type=”text/css”>
h1 {color: white}
h2 {color: white}
p {color: white}
</style>/*text alignment/*
<style type=”text/css”>
h1 {text-align: center}
h2 {text-align: center}
p {text-align: left}
</style>/*bold, underline, ect */
<style type=”text/css”>
h1 {text-decoration: underline}
h2 {text-decoration: underline}
p {text-decoration: none}
</style>/*font type/*
<style type=”text/css”>
h1 {font-family: tahoma}
h2 {font-family: tahoma}
p {font-family: courier}
</style>/*font size/*
<style type=”text/css”>
h1 {font-size: 200%}
h2 {font-size: 150%}
p {font-size: 100%}
</style>/*font syle/*
<style type=”text/css”>
h1 {font-style: bold}
h2 {font-style: italic}
p {font-style: oblique}
</style>/*font boldness/*
<style type=”text/css”>
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}
</style>/* border styles /*
<style type=”text/css”>
p.solid {border-style: solid}
</style>/*border color/*
<style type=”text/css”>
p.one
{
border-style: solid;
border-color: #000000
}
</style>/*paragraph margin/*
<style type=”text/css”>
p {margin-left: 3cm}
</style>/* image size /*
<style type=”text/css”>
img.normal
{
height: auto;
width: auto
}
</style>
</head>Does this look correct? I’m still not sure how to insert a sidebar into it with images and rollover but maybe I should just put those in the individual pages. Now in a new html document I put this into the <head>:
Quote:<link rel=”stylesheet” type=”text/css” href=”format.css”>Is this correct in pointing to my format.css document, which is in the same folder? I tried looking at it but even after applying this the background for my html page remains white despite the specification in format.css that it should be black.
Is this a good start?
Quote:<head><style type=”text/css”>
body {background-color: black}
h1 {background-color: #000000}
h2 {background-color: #000000}
p {background-color: #000000}
</style></head>
Is for putting it directly in the document, if you want to link externally you only need this in the external file.
Quote:body {background-color: black}
h1 {background-color: #000000}
h2 {background-color: #000000}
p {background-color: #000000}and this between the head tags:
Quote:<link rel=”stylesheet” type=”text/css” href=”format.css”>As I explained before the formatting applied to a element takes precedent over whatever is in the CSS. For example if you have this in the html document:
Quote:<p background=”#000080″>Your paragraph text.</p>The background will be blue instead of black as specified by the CSS. Any <p> that doesn’t have a background attribute in the HTML doc will have a black background.
You don’t need to make everthing have a black background to make it black. Think of it as layers in an image. The <body> is the canvas. If you make that black evething else will be black unless otherwise specified.
So even with CSS will I be including the actual images for the buttons and title each html document, rather than format.css? If this is the case should I use tables to display this along with the main info on the page?
Thanks for all your help coalman!Look at the post I put here and try what I suggested: http://www.wiscollectorcar.com/forum/viewtopic.php?p=232#232 You’ll be able to see how it works. Remove the css file and then see what it looks like.
As you can see there’s no formatting in the html document, it’s all contained in the CSS file. What makes having a external CSS file important is if you have multiple pages. Suppose you have 100 pages for a site, and you want to make them all have a blackground instead of whatever it is now. If they are all linked to the CSS file you can change all of them by editing a single line in the css file as opposed to editing all 100 pages.
Also you can apply multiple attributes to a single tag as opposed to having to apply them individually. Tha template I linked to abve makes two columns such as you have, try building off of that if you want.
Edit here’s an example:
With CSS: http://www.fireplacegallery.net/index.html
CSS Removed: http://www.fireplacegallery.net/index2.htmlAs you can see both pages have the same content the second one just doesn’t have any formatting.
- You must be logged in to reply to this topic.