Article

CSS

CSS (cascading style sheet) is a style-sheet language used to outline the styling of a HTML webpage.

Reference

A CSS style sheet can be referenced/included in a webpage in either of two ways:

  1. Using the <style> tag (internal)
  2. Referencing using <link …> tag (external)

Syntax

The CSS syntax is highly simple:

<element selectors> {
	/* comment */
	<attribute-name>: <attribute-properties>;
}

e.g.,

.header {
	background-color: rgb(255, 47, 42);
}

Element Selectors

There are three different forms of element selectors:

  • Element tag, i.e., body, div, p, h1, etc.
  • Class, i.e., .header, .body, .navbar
  • ID (identifier), i.e., #main, #form, #popup-modal
body { /* selector for "element" tag */
	background-color: white;
}

.header { /* selector for "header" class */
	width: 100vw;
	background-color: red;
}

#main { /* selector for "main" ID */
	width: 100vw;
	height: 100vh;
	background-color: blue;
}

Attributes (properties)

Attributes are a set of values which will modify the visual representation of elements in a key: value structure.

body {
	background-color: blue; /* background-color to preset blue */
	background-color: rgb(255, 0, 255); /* background-color to rgb 255,0,255 */
}

w3schools has a complete reference on all CSS properties although only a few are required for the OCR exam there is no list of what may be included.