Naomi Bastian Design

Tutorials

Back to the Assignments Archive

Beginning with CSS

CSS is used to define design, layout and variations for web pages. HTML was created to describe the content of a web page, while CSS was created to describe the display of that content. CSS can control the display of multiple elements at once, and even control the layout of multiple web pages at once.

CSS Syntax

CSS stands for Cascading Style Sheets. CSS is defined by sets of rules, consisting of selectors and declaration blocks.

p {
color: blue;
font-size: 18px;
}
CSS Selectors

A selector will point to the HTML element you want to style. A declaration block will contain one or more declarations, separated by semicolons. Each declaration will include a property name and value, separated by a colon. CSS declarations end with semicolons, and declaration blocks are surrounded by curly braces.

If the CSS rule-set from the first example was applied, all paragraphs within the HTML page would have blue text and the font would be resized to 18pt font, like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

There are a few different types of CSS selectors, and many different ways to combine them. This is a brief overview of CSS selectors, but for more options and a better overview of specificity, check out these links:

The element Selector

The element selector selects elements based on the element name. You can select all <p> elements on a page like we did in the example above using this.

p {
color: blue;
font-size: 18px;
}
The id Selector

The id selector selects elements based on the id attribute of an HTML element to select one specific element. An id must be unique within a page, so an id selector can only be used to select this one element. To select this specific id, you must write a hash # character followed by the name of the id of that element.

#introduction {
color: green;
font-size: 28px;
}

If we had a heading <h1 id="introduction">Lorem ipsum dolor sit amet</h1> with the id of introduction, it would be displayed like this:

Lorem ipsum dolor sit amet

The class Selector

The class selector selects elements based on specific class attributes. To select elements with a specific class, you must write a period . character followed by the name of the class of that element.

.emphasis {
color: orange;
font-size: 21px;
}

If we had four paragraphs <p class="emphasis">Lorem ipsum dolor sit amet</p> but only two of them had the class of emphasis applied to them, they would be displayed differently, like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Using CSS

CSS can be placed within the HTML in three different ways: external style sheets, internal style sheets, and inline styles.

External Style Sheets

With an external style sheet, you can change the look of an entire website by only changing one file. This can be very effective on larger sites with many pages, but also has its advantages on smaller sites or other web projects. Every page that the external stylesheet should apply to needs a reference to the external style sheet file inside the <head> element of the HTML document. This reference is formatted as a <link> element with additional attributes to specify that you are linking a CSS stylesheet.

<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>

The "style.css" external style sheet could look like this:

body {
background-color: black;
}

h1 {
color: yellow;
font-size: 48px;
}

Notice that there are no HTML tags. The browser will still interpret these as defined styles for the HTML elements in the page, because of the CSS selectors that specify the styles.

Like any CSS or HTML, an external style sheet can be written in any text editor like Notepad, Brackets, or NetBeans. The file should not contain any HTML tags, and must be saved with a .css file extension.

Internal Style Sheets

Internal style sheets also have their own particular use, but be careful using these if the styles are going to be re-used! If one page of your website or one project has unique styles applied to it, you can use an internal style sheet to define these. An internal style sheet is placed within the <head> element, like an external style sheet, but instead of using the <link> element, you will use the <style> element instead.

<head>
<style>
body {
background-color: white;
}

h1 {
color: red;
font-size: 48px;
}
</style>
</head>
Inline Styles

An inline style is useful for applying a unique style to a single element. To use inline styles in your HTML, you will need to add the style attribute to the element . The style attribute can contain any CSS property. In the example below, we can change the color and the font-size of an <p> element by adding style="color:hotpink;font-size:18px;, like in the example below.

<p style="color:hotpink;font-size:18px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

But be forewarned: CSS was created specifically because HTML was never intended to contain formatting for a page. When CSS and HTML work together, you can separate content from presentation and make it easier to edit one thing at a time. When you use inline style, you will lose the advantage of having a style sheet in the first place. Having the HTML content and the CSS presentation in the same place can be useful in some circumstances, but in the event that you need to edit this in the future, it can get confusing and may not be worth it. So use this method sparingly!

Multiple Style Sheets

Using multiple style sheets can be very helpful, especially if you have pages with complex styling or an entire website to define styles for. Separating out CSS styles into different stylesheets can allow you to apply different styles to some pages and not others. This way, you can create universal style sheets with fonts, colors, or backgrounds for the entire website, but get more specific and have different style sheets for differently formatted pages or for specific sections of content. However, there are certain guidelines and best practices to follow when using multiple style sheets, just as there are for every use of CSS. For example, it is important to keep in mind that if some properties have been defined for the same selector in different style sheets, the value from the last read style sheet will be used.

This rule is observed because CSS uses cascading order. Remember, CSS stands for Cascading Style Sheets. This means that the last read CSS rule will generally take the highest priority. When there is more than one style specified for an HTML element, all the styles will "cascade" into a new "virtual" style sheet by the following rules, where the last one has the highest priority:

  • Browser default rules (will sometimes differ between browsers)
  • External and internal style sheets (inside the head element)
  • Inline style (inside an HTML element)

An inline style (inside a specific HTML element) has the highest priority, which means that it will override styles defined inside the <head> tag, inside an external style sheet, or browser defaults. This is another good reason to avoid overusing inline styles: you don't want to override other styles accidentally.

If you are using multiple external stylesheets, the last one listed will be the one that takes the highest priority. For example, if we have three different external stylesheets included within the <head> of your HTML page, the last one will take precedence over styles defined in the first and second stylesheet, and the second stylesheet will take precedence over styles defined in the first stylesheet.

<head>
<link rel="stylesheet" type="text/css" href="main-style.css">
<link rel="stylesheet" type="text/css" href="menu-style.css">
<link rel="stylesheet" type="text/css" href="gallery-style.css">
</head>

CSS is an ever-evolving language, with new functionalities and tools being developed constantly. The best way to get started with CSS is to get inspired! Looking up examples of CSS on Codepen, visiting the CSS Zen Garden, or simply looking up your favorite websites can help you see how far you can go with CSS or help give you ideas for where you can go with it. There's always more to learn and to implement, so once you have the syntax down, it's time to play and explore! Take a look at the resources included below for added inspiration and instruction, and feel free to experiment!