CSS BasicsWhat is CSS?CSS stands for Cascading Style Sheets. The styles define how HTML elements are displayed within a webpage. Styles are stored in what is called a style sheet. There are internal and external style sheets (we'll be going through internal, for external, see here). Internal style sheets are located in the Head section of an HTML page while external style sheets are a seperate document that is linked to the page.Why should I use them?Style sheets save you a lot of work, especially for a multiple page website. Where you can use HTML tags such as <font> and <h1> tags to change your text appearance, you have to manually put them in for every instance you want something different than the rest. With CSS, you can style different tags to appear a certain way throughout the whole page.First, you need to know what style will take priority over another. One has the highest priority while four has the lowest.
Now, a basic HTML document will look a little something like this: Your style sheet will go in the Head tags. Make sure you put it in between <style> </style>. Because you are styling within an HTML document, you need to include the style tags. Styling in CSS is almost the same as HTML, with just a few differences (such as some property names differing. Don't know the CSS properties, check them out. The basic set up is this: HTML tag { property:value;} In HTML you use these < > and put the styling in with the element. In CSS you use these { }. Also instead of doing something like <p align=left> you will go p{align:left;}. *Remeber, just like in HTML you always make sure that your brackets, { }, are closed, always make sure you put a semi-colon at the end of each styling line in CSS. Now, to style a basic page you want to start off with the body tag. You'll most likely apply things like background, font and text properties here so that it applies to the whole page. It should something a little like this:
Content goes here.
From there, you can set about styling other aspects of the webpage like the header tag, tables, italics and more in the exact same manner. When you get used to CSS you can group similar properties together instead of each on their own line. So the style for the body would look something like this: body{ background: #7C8767; font:14px arial; color:#ECE8D4; text-align:center; border:2px dotted #ffffff; } |
