Author:

Last Updated: 26 December, 2021

CSS stands for Cascading Style Sheets and it’s the technology that allows the structure of an HTML document to look good and bring a prototype’s design into life.

Using CSS

There are three main ways to implement CSS code into a webpage:

Linking to an external CSS file (Preferred)

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

Directly inside an element using the style attribute

ex: <div style=”background-color: blue; text-align: center”>

Using the <style> element inside the <head>

<head>
	<style>
			p {
				color: red;
        ...
			}
	</style>
<head>

Syntax

h1 {
	color: blue;
}

In CSS the h1 is the selector and indicates what elements will by styled (there are many different ways to select HTML elements that will be discussed further on).

The color is one of many different CSS properties that can be used to style elements (list of all the different properties that can be used).

The blue is the value of the CSS property. Each property has it’s own values that can be applied to it.

Selectors

As mentioned above, selectors are used to locate the HTML elements you want to style. There are five different categories for selectors:

Simple selectors

Select elements based on name, id, class

Element Selector: p { ... }

Id Selector: #idName{ ... }

Class Selector: .className{ ... }

Combinator selectors

Select elements based on a specific relationship between them

descendant selector (space)

The descendant selector matches all elements that are inside of a specified element.

ex: div p { ... }

child selector (>)

The child selector styles all element that come immediately after the specified parent

ex: div > p { ... }

adjacent sibling selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element.

ex: div + p { ... }

general sibling selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.

ex: div ~ p { ... }

Pseudo-class selectors

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

The Box Model

The term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

Sizing Elements

Every HTML element can have their height and width properties edited. These properties dictate the size of the element that the contents sit in. By default all elements will be the width of the screen and the height of the content inside.

Different webpage layouts can be created when modifying the width and height of elements to create multiple columns and rows throughout a page. It’s through these properties that the linear default layout of HTML it changed. In order to use these properties, certain units can be used

cm	Centimeters	1cm = 37.8px = 25.2/64in
`mm`	Millimeters	1mm = 1/10th of 1cm
`Q`	Quarter-millimeters	1Q = 1/40th of 1cm
`in`	Inches	1in = 2.54cm = 96px
`pc`	Picas	1pc = 1/6th of 1in
`pt`	Points	1pt = 1/72th of 1in
`px`	Pixels	1px = 1/96th of 1in

em	Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
`ex`	x-height of the element's font.
`ch`	The advance measure (width) of the glyph "0" of the element's font.
`rem`	Font size of the root element.
`lh`	Line height of the element.
`vw`	1% of the viewport's width.
`vh`	1% of the viewport's height.
`vmin`	1% of the viewport's smaller dimension.
`vmax`	1% of the viewport's larger dimension.

Responsive units should be used and are preferred when styling a webpage for multiple different screen sizes.

Responsive Styling

Modern webpages need to be compatible with all different devices from all different laptops, tablets, and phones. For prototypes and an initial MVP, layouts don’t have to be perfectly responsive, but it’s something to consider when creating a UI.

It’s important than all width and height sizing should use relative units. Using relative units means all elements will initially be sized to the device they’re on.

Media Queries

The @media rule can be used to add a condition to styling. This can be used to have set up different styles for different screen sizes all within the same file. The styling below would only apply to screen sizes smaller than 600 pixels:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Additional Resources

There’s a lot that can be done with CSS, and going through the documentation for different properties will be extremely useful. Various templates can also be found online to streamline the creation of layouts and designs.

CSS Tutorial

CSS