What is CSS
There are essentially two parts to Cascading Style Sheets:
- the styles
- the stylesheet
What this means is that when you want to learn CSS, you need to learn both the style properties — the styles; and the placement of those properties — the stylesheet.
Style properties are covered in detail in the styles library and other articles. In this article, you will learn exactly how to place your stylesheets so that you can use them both on one page and all throughout your website.
Inline CSS Styles (Without a Stylesheet)
Inline styles are styles set within one tag. They only affect the current tag, every other similar tag on the page will have the default styles. For example, if you want one paragraph to have a grey background, you can use an inline style:
<p style="background-color: #cccccc; border: none;">
This paragraph has an inline style to change the background color to grey (#cccccc).
</p>
The style is defined by the "style" attribute on the element itself.
One Document CSS Stylesheet
If you want to set up a stylesheet to affect one web page, you can do that with a stylesheet in the head of your document. For this you use the STYLE element in the HEAD of your web document.
Here are some tips for working with these stylesheets:
- Start them out right
Use attributes of theSTYLEelement to define what the browser should expect
<style type="text/css"> - Use comments
Comment tags insure that older browsers don't display your stylesheets.
<style type="text/css">
<!--
style properties
-->
</style> - think about what styles you need
In many cases, you don't need to set many different styles, just basic ones that cover how your text and other elements should be displayed on your page. If you don’t plan to have any red, blinking, 36 point headlines on your page, then defining a style for that is a waste of time bandwidth.
Site-Wide Stylesheets
Externally linked stylesheets allow you to use one stylesheet across your entire website. There are two ways to do this:
- linking
<link rel="stylesheet" type="text/css" href="styles.css"> - importing
<style type="text/css">
@import URL (http://www.yoursite.com/styles.css);
</style>
What to Style
Knowing how to add styles to your document is only the first part. You also need to know what to style and how to do that. CSS can affect the visual (and aural) effects of a web page. In fact, most of the design you do on a web page is created in the CSS, not the HTML.
Use CSS to change:
