Royletron.dev

Lesson 4 - CSS!

March 16, 2019

If you have followed most of these lessons carefully chances are you should be able to knock up some reasonable looking HTML that looks a bit like this:

If so you are right on track! What we want to do next is elevate this plain looking content into something amazing, and to do that we need CSS.

Syntaxing CSS

CSS is a technology built into most modern browsers that allows web developers to style the content that they have sent to users. Your browser will take the HTML and the CSS - which is usally a file called a ‘stylesheet’ - and then process the CSS on top of the HTML to render what it is the developer wanted it to look like. This means that the CSS directly references the HTML that it was built for, and contains code that defines the ‘style’. So let’s take a look at some

body {
  background: orange;
  color: blue;
}

A CSS style as shown above (this is a single style - you can write as many as you want) has two parts, the first bit is the ‘selector’ - in the above case body - and this tells the browser what elements it should apply this style too. The second part is the bit inside { } which is the ‘declaration block’ and lists all of the CSS ‘properties’ this style wants to change and their value - this always follows the pattern property: value; ensuring the ; at the end of each individual declaration. In the above example we are selecting the body tag and we are setting the background property to be value orange and then color property to be value blue. More on those later.

Cascading Down

An important feature of CSS is that it ‘cascades’ down from parent to child element in the HTML you have defined - in fact CSS stands for ‘cascading style sheets’. What this means in reality is that any style applied to an element is also applied to it’s children. For example consider the following HTML and CSS:

<body>
  <p>
    <span>Hello</span> World
  </p>
</body>
body {
  font-weight: bold;
  color: red;
}
span {
  color: blue;
}

This would result in:

With all of the elements inside of the body being made bold and red, and any span element being blue. The p tag never has a style applied but as it is a child of body it gets all of the style defined there.

Selecting

There are so many ways of selecting elments based on some criteria, the one we used above is based on the type of the element we want to select, but you can also be incredibly specific. Here are all of the possible ways to select elements using CSS. Trust me, you don’t need to spend time memorizing it! But it’s useful as a reference (totally stolen from Wikipedia). At the bottom I will sumarize the important ones to get started.

Pattern Matches
E an element of type E
E:link an E element is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
E:active an E element during certain user actions
E::first-line the first formatted line of an E element
E::first-letter the first formatted letter of an E element
.c all elements with class=“c”
#myid the element with id=“myid”
E.warning an E element whose class is “warning” (the document language specifies how class is determined)
E#myid an E element with ID equal to “myid”
E F an F element descendant of an E element
* any element
E[foo] an E element with a “foo” attribute
E[foo=“bar”] an E element whose “foo” attribute value is exactly equal to “bar”
E[foo~=“bar”] an E element whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar”
E[foo =“en”]
E:first-child an E element, first child of its parent
E:lang(fr) an element of type E in language “fr” (the document language specifies how language is determined)
E::before generated content before an E element’s content
E::after generated content after an E element’s content
E > F an F element child of an E element
E + F an F element immediately preceded by an E element
E[foo^=“bar”] an E element whose “foo” attribute value begins exactly with the string “bar”
E[foo$=“bar”] an E element whose “foo” attribute value ends exactly with the string “bar”
E[foo*=“bar”] an E element whose “foo” attribute value contains the substring “bar”
E:root an E element, root of the document
E:nth-child(n) an E element, the n-th child of its parent
E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
E:nth-of-type(n) an E element, the n-th sibling of its type
E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
E:last-child an E element, last child of its parent
E:first-of-type an E element, first sibling of its type
E:last-of-type an E element, last sibling of its type
E:only-child an E element, only child of its parent
E:only-of-type an E element, only sibling of its type
E:empty an E element that has no children (including text nodes)
E:target an E element being the target of the referring URI
E:enabled a user interface element E that is enabled
E:disabled a user interface element E that is disabled
E:checked a user interface element E that is checked (for instance a radio-button or checkbox)
E:not(s) an E element that does not match simple selector s
E ~ F an F element preceded by an E element

Important Selectors

No.1 The tag name

By far the easiest is the tag name, this will apply the style to all tags that have this as their tag type.

body {
  /* style */
}
p {
  /* style */
}
h1 {
  /* style */
}

No.2 The class name

Any html element can have an attribute called ‘id’ associated to it:

<h1 id='main'>My Magic Blog</h1>
<p id='content'>Some amazing articles</p>

Which can then be selected in CSS like so:

#main {
  /* style */
}
#content {
  /* style */
}

With the format #name_of_class.

No.3 The class name

Any html element can also have an attribute called ‘class’ associated to it:

<h1 class='subtitle'>Welcome here</h1>
<p class='body'>So nice to have you</p>

Which can then be selected in CSS like so:

.subtitle {
  /* style */
}
.body {
  /* style */
}

With the format .name_of_class. The difference between a class and id is actually minimal, but most developers will tell you to only ever have one single tag with a given id but you can have as many as you want with a given class. So bad would be:

<p id='content'>Hey this is some content</p>
<p id='content'>Hey this even more content</p>

But good:

<p class='content'>Hey this is some content</p>
<p class='content'>Hey this even more content</p>

Attributes & Values

There are so many different CSS attributes that you can modify and each one has a different set of values that you can apply to it. There is a full list but that is quite scary, here are some key ones.

color

This is the color of the text inside the element. All colors in CSS can be defined in one of several ways, either as a shorthand ‘word’ - things like red, blue, yellow, white, green, black or PeachPuffsee the full list. Colors can also be defined as a ‘hexidecimal’ value which always start with a # like #ffffff which is white. They can also be defined as ‘rgb’ or ‘rgba’ values - which define how much ‘red’, ‘green’ and ‘blue’ (between 0 and 255) go into them with an optional ‘alpha’ which is transparent the color will be. Here are some examples:

.red {
  color: red;
}
.black {
  color: #000000;
}
.blue {
  color: rgb(0, 0, 255);
}
.gray {
  /* this is actually transparent black, but will look gray on white */
  color: rgba(0, 0, 0, 0.3);
}

Which looks like this

background-color

Hopefully self explanatory, this is the background color of the element, again defined in one the four different ways of defining colors:

.red {
  background-color: red;
}
.black {
  background-color: #000000;
}
.blue {
  background-color: rgb(0, 0, 255);
}
.gray {
  /* this is actually transparent black, but will look gray on white */
  background-color: rgba(0, 0, 0, 0.3);
}

Will come out like so:

Font-Family, Weight, Size

Changing fonts is one of the most common uses of CSS and there are lots of different ways you can tweak the way content looks.

font-family: Arial, Helvetica, sans-serif; will set the font that you want to see. These are always provided with fallbacks just in case the computer that is displaying your site doesn’t have that font installed. So first it will try Arial and then Helvetica and failing that will pick any sans-serif font it can find on the computer.

font-size: 20px; this is how big the font is, it can either be an absolute value in px ‘pixels’ or as an amount of em which is as a ratio of the font that applies from the parent. A common practice is to set the font-size on the body in pixels and then everything else is a multiplied ratio of this. This can help keep font-sizes more consistent.

font-weight: bold; this is how much weight - bold to thin, you want to apply. It can either be a keyword like bold, thin, or normal or it can be a value usually in increments of hundreds like 100 which is quite thin, or 500 which is quite bold.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}
.bold {
  font-weight: bold;
}
.thin {
  font-weight: thin;
}
.massive {
  font-size: 5em;
}

Results in


Darren

Written by Darren who lives and works in Oxford, being a wizard like Harry Potter ⚡. You should follow him on Twitter