Skip to main content

Getting StartED with CSS

Where Do I Create My CSS?

You can create your style rules in three places, namely:

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.