An Introduction to Cascading Style Sheets (CSS)

Share this article

This introduction isn’t meant to teach you everything about Cascading Style Sheets, but is rather meant as an overview of what can be done with CSS. Read through this article, and then decide whether or not CSS is right for your site. At the very least, you’ll know what can be done using CSS, so when the time comes to gain more control over the layout and typography of your site, you’ll know where to turn.

What Are Cascading Style Sheets?

CSS is a form of HTML mark-up that provides web designers with greater control over typography and spacing between elements on a page.

Why Should I Bother Using CSS?

1. Greater control over layout and typography. CSS provides you as a designer with precise control over the fonts used on your site, including size, letter spacing and text decoration.

Elements on a page can be positioned precisely using CSS. In fact at least one major HTML Editor, Dreamweaver 2, uses CSS to control the layout of a page, although it does provide the option to convert to tables.

2. Site-wide changes become easy. Rather than having a style sheet as part of the HTML code of a page, it is possible to specify the URL of a style-sheet that is to be used when formatting a particular page. This makes it very easy to modify the entire site by simply editing a single file.

What About Browser Compatibility?

CSS support is provided in Internet Explorer 4+ and Netscape Navigator 4+. However, some annoying browser inconsistencies continue to make life difficult for those deciding to use CSS on their site. It is possible with a little bit of JavaScript to serve up different style-sheets depending on the browser that is being used to view your site. Alternatively, workarounds can be used so that the style-sheet works in both browsers correctly.

What Does CSS Look Like?

The basic template for CSS code looks like this:

Tag: {Property: value; Property2: value2}

Tag – The element that will be affected
Property – What part of the selector will be affected
Value – How it will be affected

Notice that CSS makes use of curly brackets instead of < and > .

A Small Snippet:

H1 {FONT-SIZE: 9pt; FONT-WEIGHT: bold}

The example above will make all the text within H1 tags bold, and size 9.

The Three Ways To Use CSS

There are three ways to use Cascading Style Sheets: inline, embedded, and external/linked style sheets. I’ll briefly explain each of them below.

Inline

If you just want to apply formatting to a small piece of text you can use inline styles, which look something like this:

<h3 style=”font-weight: bold”>this will be bold Embedded

Embedded style sheets are put between the <head> </head> tags on every page that you want to use style sheets on. This is how they look like:

<HEAD>
<STYLE TYPE=”text/css”>
<!–

Tag: {Property: value; Property2: value2}

–>
</STYLE>
</HEAD>

External

Remember how I said that you can use a single style sheet site-wide, and then change all of your pages by editing one file? This is done with external style sheets, which look something like this:

<HEAD>
<LINK REL=”STYLESHEET” HREF=”/PATH/SHEET.CSS TYPE=”TEXT/CSS”>
</HEAD>

The SHEET.CSS file would then contain all the style-sheet code which would be applied to any page that calls it using the code above.

Remove ‘Em Underlines – A Complete Style Sheet

Do you want to remove underlines from links on your site? Below is a short and sweet style-sheet that will do just that, just copy and paste it between the <head> </head> tags on your site:

<STYLE TYPE=”text/css”>
<!–
a { text-decoration: none}
–>
</STYLE>
Where To Go From Here

If you’re intrigued by the brief overview above, and you want to learn more about Cascading Style Sheets check out the tutorials below:

HTML Goodies – A brief Tutorial on Classes and ID’s which are used in CSS.

W3.org – More information than you can shake a stick at.

HTML Help – Several tutorials covering different aspects of Cascading Style Sheets.

Writing Stylesheets – A Brief Guide.

CSS Is Easy! – SitePoint’s own Kevin Yank explains the nitty gritty, with plenty of examples.

Good luck!

Frequently Asked Questions about Cascading Style Sheets (CSS)

What is the difference between CSS and HTML?

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are both fundamental technologies used in building web pages, but they serve different purposes. HTML is used to structure the content on the web page, such as text, images, and links. On the other hand, CSS is used to style this content and layout the web page. It controls the visual presentation of the elements that you write in HTML, such as color, font style, and layout.

How can I link CSS to HTML?

There are three ways to link CSS to HTML: inline, internal, and external. Inline CSS is used to style a specific HTML element, by adding the style attribute in the relevant tag. Internal CSS is used to style an entire HTML document, by placing the CSS code within the style tags in the head section. External CSS is used to style multiple HTML documents, by linking them to a .css file using the link tag in the head section.

What are CSS selectors?

CSS selectors are used to select the HTML elements that you want to style. There are several types of CSS selectors, including element selector (selects elements based on the element name), id selector (selects elements with a specific id), and class selector (selects elements with a specific class).

What is the CSS box model?

The CSS box model is a box that wraps around every HTML element. It consists of: the content (the actual content of the box, like text or an image), padding (clear space around the content), border (goes around the padding and content), and margin (clear space outside the border).

How can I center an element horizontally with CSS?

To center an element horizontally with CSS, you can use the margin property. Set the left and right margins to auto, and the element will automatically be centered horizontally within its parent element. Note that this method only works if the element has a specified width.

What are CSS pseudo-classes and pseudo-elements?

CSS pseudo-classes are used to define a special state of an element. For example, :hover can be used to change the style of an element when you hover over it. CSS pseudo-elements are used to style specific parts of an element. For example, ::first-letter can be used to style the first letter of a text.

How can I make my CSS code more efficient?

There are several ways to make your CSS code more efficient. One way is to use shorthand properties, which allow you to specify the values of multiple properties in one line. Another way is to group selectors, which allows you to apply the same style to multiple elements.

What is responsive design in CSS?

Responsive design in CSS is a design approach that makes web pages render well on a variety of devices and window or screen sizes. It uses CSS media queries to adapt the layout to the viewing environment.

How can I debug CSS code?

You can debug CSS code using the browser’s developer tools. The inspector tool allows you to select an element and view its CSS properties. You can also modify the CSS properties and see the changes in real-time.

What are CSS frameworks and should I use one?

CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages. They provide a structure for common tasks, styles, and components. Whether you should use one or not depends on your specific needs. If you’re building a complex project and want to save time and ensure consistency, a CSS framework can be very helpful. However, if you’re working on a small project or want to learn CSS from scratch, you might not need a framework.

Matt MickiewiczMatt Mickiewicz
View Author

Matt is the co-founder of SitePoint, 99designs and Flippa. He lives in Vancouver, Canada.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week