Cascading Style Sheets
Learning Objectives
- You know what Cascading Style Sheets (CSS) are and know how to define styles with CSS.
- You know how selectors work and how they are used to specify where particular styles apply.
Cascading Style Sheets (CSS) is a language for styling content. With CSS, we can define what HTML elements should look like and how they should be placed on a page. The term cascading in CSS means that styles defined to an element cascade to all child elements. As an example, a style that is applied to the body element would be applied to every element within the body element.
CSS is a standard that is being updated by multiple working groups. You can follow the progress on the standard at https://www.w3.org/Style/CSS/. In this material and course, we focus on a very narrow set of CSS styles. You can, however, visit a broader documentation using the previous link.
Defining styles
Styles are defined with a selector and a set of style declarations. The selector is used to define the element or elements to which the styles apply, while the style declarations provide the explicit styling guidelines.
Style declarations are placed within a block, which follows the selector and is defined with curly brackets. Each style declaration is defined using the name of the style and a value so that the name is followed by a colon and the value. Style declarations are separated from each other using a semicolon. The common structure of a style definition is as follows.
selector {
style-name: style-value;
}There is no explicit limit on the number of styles that can be defined for a page. The example below outlines a page with two styles: the text color of the h1 element is set to red, and the text color of the p element is set to blue.
Browsers have default styles for elements. The default styles can be overridden by defining styles in the HTML document. As an example, above, the h2 element does not have any styles defined, but it still has been styled.
Selectors
Selectors are used to select the elements to which the styles apply. The most common selectors are type selectors that select elements based on their name, id selectors that select elements based on their id attribute value, and class selectors that select elements based on their class attribute.
Type selectors
Type selectors are written using the name of the element. As an example, if we would wish to set the text of an h1 element to red, the selector and the style would be as follows.
h1 {
color: red;
}Id selectors
Id selectors are used to select elements based on their id attribute value. When using id selectors, the selector is defined with a hashtag # and the value of the id attribute. The example below demonstrates this — the document has three text elements. One of them has an id-attribute with the value awesome, and the element is selected using the selector #awesome. In the example below, the text color of an element with the id awesome is set to blue.
Class selectors
Class selectors are used to select a group of elements based on their class attribute value. Selecting elements based on the class attribute is done using a dot selector .value, where value is the value given to the class attribute.
The following example demonstrates the use of class selectors. The document has two elements with the class “header”. The class selector .header selects them both, setting their text green.
CSS properties
There exists a wide range of properties that can be used to define styles. The MDN Web Docs provide a good reference for the properties. Here, we look into a few of the more commonly used ones.
Colors
Colors on web pages are defined with multiple properties, including color that is used for defining the font color and background-color that is used for defining the background color of an element. The example below defines the font color of the body element as indigo (indigo) and the background color as light pastel blue (#dff4f9).
Color values can be created using the names of colors (e.g. red, green, blue), red-green-blue (RGB) -values (e.g. rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)), and hexadecimal values (e.g.. #FF0000, #00FF00, #0000FF)
Choosing appropriate colors and styles is a skill. You can learn and improve in choosing and using styles and colors through studying and practice. A good starting point for learning might be a search engine query “choosing good color schemes for websites” and going through the results.
While colors and more broadly styles influence accessibility, usability and retention of users, this course does not provide explicit guidelines on what sort of styles one should use. A good starting point for thinking about styles is the Accessibility W3C standard.
Fonts
Setting a font is done using the font-family property. Font family defines a family of fonts that will be used for the element; a family of fonts can contain one or more fonts, which are separated using commas. Typically, when defining a font family, multiple fonts are defined and the font that will be used in the browser is determined by the browser based on the available fonts — fonts are loaded from the operating system, unless the web page explicitly gives an address where the fonts can be loaded from.
The example below defines the font family as "Times New Roman", serif. If Times New Roman is found, it will be used. If Times New Roman is not found, a font from the serif family is used. As you notice from the example below, font names with spaces can be written inside quotes (but work also without quotes).
Fonts can be broadly divided into four main categories: fonts with small line or embellishment at the end of each font (serif), fonts without the small line or embellishment (sans-serif), script-style fonts (e.g. cursive), and fonts with the same width (monospace). For example, Times New Roman is a serif font, Arial is a sans-serif font, Comic Sans is a script-like font (but also sans-serif), and Courier New is a monospace font.
When browsing web pages, one may observe differences in the used fonts. For example, headings might use sans-serif fonts while the body text might use serif fonts. The following page shows an example of this — the body text is Times New Roman (if available), while the headings use Arial or some other sans-serif font.
Size and spacing
Sizes can be defined using absolute values (pixels, e.g. 16px) or relative to the root element font size (e.g. 1rem). In browsers, the typical default root element font size is 16px, which corresponds to one rem unit.
Font sizes are defined using the style font-size. In the example below, we define two font sizes. The first (class normal) defines the normal font size, which is one rem unit. The second (class larger) defines a larger font size, which is 1.25 times the rem unit.
The relative size can be influenced by defining a font size to the root html element. In the example below, we set the root font size as 20px, which is somewhat larger than the default font size used in browsers.
Sizes can also be used to define padding and margin of an element. Padding refers to the space between the content of an element and the border of the element, while margin refers to the space between the border of an element and the border of the surrounding elements. The example below defines a padding of 10 pixels to the p element and a margin of 1 rem to the h1 element.
CSS layouts
When discussing styles, the term layout refers to the visual structure of a page and how the elements of the page are arranged. CSS provides a handful of properties that can be used to define the layout of a page, where two of the most commonly used layout types are flexbox and grid.
The following example outlines a page with a flexbox layout. The page has a container element div with the id container, and the container element has four child div elements. The container element has a flexbox layout, which means that the child elements are arranged in a row. The child elements have a flex property of 1, which means that the child elements have the same size. The child elements have a margin of 10 pixels, padding of 10 pixels, and a background color of gray.
The example also shows how to use the children selector > to select only the direct children of an element. In the example below, the style is applied only to the direct children of the element with the id container.
CSS in Svelte
Svelte uses the same CSS syntax for styling that we use with Vanilla HTML. When using CSS to style Svelte applications, there are a couple of approaches that we can take (and mix). First, we can use scoped styles, where the styles are applied only to the component where the style is defined.
When using scoped styles, the styles are added within a style element to the end of the component that we wish to style. As an example, the text of the following component would be in red.
<p>Hello world!</p>
<style>
p {
color: red;
}
</style>Second, we can create a style sheet file and place it in the src folder. In this case, we would import the style sheet to the components that use the style sheet (or, alternatively, to a file called +layout.svelte from which the styles would be applied in our application).
<script>
import "../app.css";
</script>
<!-- HTML -->Finally, we could use a style library or a style framework. Let’s look at this next.