Quote:
Originally Posted by displacedinMN
I have looked into a few of those things, but just do not have the brain power to get crazy. I do not know how to do CSS. When I put !DOCTYPE It change the entire layout of the page. Like I said-wire and duct tape off a template from years ago.
I do code in spurts. When I can.
|
PHP Code:
<!DOCTYPE html> goes before <html> i.e. first line of code
As for the CSS, you know more than you think because you have inline CSS going on with what you have now. The difference is learning the calls, which may not take you that long.
This may or may not help but at least its a tiny intro...
Let's say you want to color a div background red and you want all the text in the paragraphs in that div to be white.
The div is going to be given an id selector and the paragraph a class selector.
Generally speaking, you'd give an id to something you're going to style once and you'd give a class to something you're going to style many times. That is, an id will identify a single element whereas the class will identify many elements.
The html would look like:
PHP Code:
<div id="container1">
<p class="ptext1">Some Text</p>
</div>
Then you have a separate document that's saved as "something.css"
You call that style sheet in the head of your html with a link reference like:
PHP Code:
<head>
<link rel="stylesheet" type="text/css" href="folder_where_you_saved_css_file/something.css">
</head>
The html will call the css file and apply the formats.
Inside, the css is similar to what you do inline, but you put it in brackets {}
A # calls an id and a . calls a class. If you want to style all paragraphs with a class="ptext" then you'd put p.ptext1, for example.
If you class many different elements with ptext1, such as various headings (h1, h2, etc), then you can just use .ptext1 (drop the p because you're applying to more than paragraphs) and it will style every type of element with that class the same.
So inside "something.css" you'll have something like this:
PHP Code:
#container {
background-color: rgba(255, 0, 0, 1);
}
p.ptext1 {
font-family: sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: small-caps;
color: white;
}
This applies formatting to the div with the id="container" and it applies formatting to all paragraphs with the class="ptext1".
If you want to apply class attributes only within a specific id, then you'd change the css for ptext1 to look like:
PHP Code:
#container p.ptext1 {
font-family: sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
font-variant: small-caps;
color: white;
}
This will apply the formatting to all paragraphs classed as ptext1 only within the div with the id container. This is most useful when handling nested things because, for instance, any child divs will inherit parent div markup.