CSS

CSS (Cascading Style Sheets) are used to define the styles for an HTML page. Styles can either be included inline, in a style tag or in an external .css file.
Inline:

<p style = "color:red;">Red text</p>

style tag:

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

External file:

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

File style.css:

p{
  color: red;
}

CSS rules consist of a selector and one or more declarations. A declaration consists of a property and it's value. In the examples above, the selector is p (all paragraph elements) and the declaration has property color (the foreground text colour) with value red.

HTML classes and IDs can be used to style individual elements or groups of elements. The selector for a class is .classname and the selector for an id is #idname.

Attribute selectors

Attribute selectors can be used to select elements with specific attributes. For example,
input[type="password"] will apply the style to all input elements where the type attribute is password.

Pseudo-classes

Pseudo-classes are an additional part to a selector which sets the style for a particular state. For example, button:hover selects buttons which are being hovered over. a:visited selects links which have already been clicked. There are many other pseudo-classes including selectors for the first or nth child of an element.

Pseudo-elements

Pseudo-elements are an additional part to a selector which style a specific part of the element (as opposed to a specific state for pseudo-classes). p::first-line can be used to style the first line of a paragraph.

Other selectors

div p selects p elements which are descendents of div elements.
div>p selects p elements which are children of div elements.
div~p selects p elements which are siblings or descendents of div.
div+p selects p only if it appears immediately after div and they have the same parent.

The box model, block and inline

The box model represents the content, padding, margin and border of an element and determines how it appears on the page.
Block level elements end with a new line. These include <h1>, lists and tables.
Inline elements are in line with other elements. These include <a> and <img>.

Media queries

Media queries allow for responsive web design by adapting styles based on the size of the user's screen. The basic syntax is @media mediatype and mediafeature. In the following example the background will be green for screens above 800px wide and red for screens narrower than 800px but wider than 400px.

@media screen and (min-width: 400px) {
  body {
    background-color: red;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: green;
  }
}

screen is the media type for any screen, but there is also print for printed documents and speech for screen readers. As well as min-width there is max-width, min-height and max-height as well as resolution and device orientation. Different queries can be combined with and and or. For example, this media query will match devices whose width is between 320px and 480px.

@media only screen and (min-width: 320px) and (max-width: 480px) {
  body {
    background-color: blue;
  }
}

Computer Science Notes