Introduction to CSS (Cascading Style Sheets)
In the early days of the web, people used to style their pages using explicit styling tags such as <font>, <center> and <strike> (all of which have long been deprecated and should never be used today). This was inflexible, difficult to maintain, and conflated presentation with the document structure.
CSS emerged in the mid-90s as a way to make styling webpages easier. It's core idea was to replace explicit styling in HTML with styling rules which could be applied to multiple elements; this would have the benefits of (a) reducing duplication, and (b) separating styling instructions from content.
CSS works by selecting some group of elements (using a special reference called a selector) and defining a set of properties and values to apply to that group of elements. The general syntax for this is:
A specific example is
Adding CSS to a Webpage
To add CSS to a page, either include it
Inline, within an element.
Between two
<style>tags, typically in the the<head>of the document.Most Common In a separate file referred to by a
<link>tag, also typically in the the<head>. The syntax for using a<link>tag is<link rel="stylesheet" href="...">where 'href' is set to the location of the desired stylesheet.
Basic Selectors
There are many different types of selectors you can use (See the table below). For now let's keep it simple and try out one or two selectors.
| Selector | Name |
|---|---|
| Element selector |
| ID selector |
| Class selector |
| Descendant selector |
| Child selector |
Properties
There are many, many CSS properties available to us. We will touch on a few properties, but we'll also want to get comfortable searching for what we need using the CSS property documentation.
Colour
We can declare the colour of text inside a given element with the color property. To declare background colour, we can use background or background-color.
There are 6 different ways to specify colour in CSS. They are: keyword, hexadecimal, RGB, RGBA, HSL, and HSLA. All of these formats are reduced to RGB/A by the browser. In general, we want to use hexadecimal colours, whenever we aren't specifying transparency using the alpha channel provided in the RGBA or HSLA formats.
You will most often see the use of hex codes, or hexadecimal codes, which represent the red, green, and blue values of the colour using letters and numbers.
You don't need to memorise these codes, instead there are many resources to use to find the hexadecimal code of a given colour, such as the MDN Color Keywords Hex Code Table.
Fonts
We set fonts using the font-family property. In addition to the built-in fonts, you can also find fonts using Google Fonts or other services.
When defining a font, you can use family names, such as 'Garamond', or generic names, like serif.
We don't know what fonts are installed on our users' computers, so we always specify a generic font family as a back up (i.e., san-serif or serif). The generic should be the last in the list of supplied font-family values. Note that specific font names are quoted, but the generic is not.
Font sizes are controlled using the font-size property. px is a common unit in CSS (we will learn more of them in a future class). px sets an absolute pixel size.
We can set the boldness of a font using the font-weight property using values of normal, bold, lighter, bolder, and numeric values (read the docs for how the numbers correspond to the weight of a font).
Styling Lists
We can change the bullet style of HTML lists using the list-style-type property. The value can be disc, circle, square, any quoted text (like an emoji), and more.
Last updated