A Non-Technical Guide to CSS

CSS is markup language that lets you style HTML on a webpage.

The design of a webpage is accomplished primarily with CSS.

Things like the the color of a button or text, but also the layout of the page and the specific positioning of the HTML elements on page.

How CSS works

CSS uses something called selectors to identify HTML elements and give them style.

The tricky part of CSS is learning how CSS goes about doing this. CSS has a method of styling that "cascades" the styles over the HTML. Hence the name, "Cascading Style Sheets" or "CSS".

That word, cascade, sounds impressive but in this context it just means the CSS rules or selectors you write will impact various elements on the page.

For example, this CSS rule:

p {
    color: red;
}

Will make all of your <p> tags (paragraphs) red. If you want just the first paragraph to be red, and all other paragraphs to be black, then you need to write another CSS rule to accomplish this.

Sometimes you get results on page that you don't expect. This is usually because of the cascading nature and heirarchy of the CSS rules.

Where do you write CSS?

CSS can be written "inline" meaning directly with the HTML element it's trying to style.

You can also write it in a separate file where all the styles exist and the selectors assign the styles to their defined elements.

This is explained a little in our page on How to bold text in CSS.

CSS terms in the office

• "We need to change that hover."