Where Do I Create My CSS?
You can create your style rules in three places, namely:
- External style sheets: This is the most effective way. Changes made in an external style sheet affect all pages that are linked to it. Changing a single rule can restyle your whole website in seconds, even if it consists of thousands of pages.
- A
<style>block: This goes in the<head>of the page, and affects only that page. - A
styleattribute: This goes in the opening tag of the HTML element that you want to style. It's the least efficient way of using CSS, and should be used only in rare cases.
Using an external style sheet
Create your style rules in a separate file, and save the file with .css as the file name extension. An external style sheet can be anywhere within your website, but the normal practice is to put all style sheets in a dedicated folder called styles or css.
It’s important to note that an external style sheet must not contain anything other than CSS style rules or CSS comments. You cannot mix HTML, JavaScript, or anything else in a style sheet. If you do, your styles won’t work.
Attach the style sheet using the <link> tag in the <head> of each page in your site. The following example shows how to link an external style sheet called basic.css to a web page:
<link href="css/basic.css" rel="stylesheet" type="text/css" />
The only value you need change in the <link> tag is the name and location of the style sheet. This goes in the href attribute. The rel and type attributes have fixed values. HTML editing programs normally do all the coding for you.
Using a <style> block
Using an HTML <style> block in the <head> of a page limits the style rules to the current page. Because they’re embedded in the page, these are known as embedded styles. You should normally use this technique only for styles that you want to limit to a single page.
Like an external style sheet, a <style> block should contain only comments and style rules like this:
<style type="text/css"> /* This puts a 40px left margin on all paragraphs */ p { margin-left: 40px; } </style>
Applying a style directly to an HTML element
The final way to apply CSS is by adding a style attribute to the opening tag of an HTML element. This is known as creating an inline style and should be avoided unless you need to create styles for an HTML newsletter.
Inline styles use the same properties and values as CSS rules that you put in an external style sheet or embedded in the <head> of a page. The only differences are that you don’t need a selector (because the HTML tag itself acts as the selector), and the curly braces are replaced by quotes.
The following example applies a 60-pixel left margin to the current paragraph only and makes all the text in the paragraph bold:
<p style="margin-left: 60px; font-weight: bold;">Lorem ipsum...
How do I define the values used by styles?
Most properties use predefined keywords, all of which are listed in the reference section. However, you need to set values for color, size, and URLs using special syntax, which is described on the next page.