Here is the penultimate post of the Relearning CSS series!

If you want to go back and read part three, which covers styling images, z-index + positioning, and when to use !important, click here.

Gradients and Backgrounds

Applying a background style to an element will of course change the background of the element you are targeting in your stylesheet.

<header>My background</header>

header {
  background: blue;
}

When it comes to gradients, usually this type of style is applied to backgrounds. Gradients can also be applied to fonts however I won’t be covering that here.

There are numerous different types of gradients that can be applied to backgrounds, below I outline a few types below.

Linear Gradients

Linear Gradients must have at least two colours, which will transition into each other. These gradients can either go up, down, left, right or diagonally.

Syntax

background: linear-gradient(direction, colourOne, colourTwo, ...colorN);

The default is top to bottom. So if you have the following code:

.example {
  background: linear-gradient(colourOne, colourTwo);
}

Examples of Different Directions

to right

to bottom left

to right

180deg

Radial Gradients

These gradients are defined by the center.

Syntax

background: radial-gradient(circle at center, colorOne, colorTwo)

Examples

background: radial-gradient(#e66465, #9198e5);

background: radial-gradient(ellipse at top, #e66465, transparent),radial-gradient(ellipse at bottom, #4d9f0c, transparent);

Conic Gradients

These gradients are rotated around a center point.

Syntax

background: conic-gradient(from deg, colourOne, colourTwo);

Examples

background: conic-gradient(red, orange, yellow, green, blue);

background: conic-gradient(from 3.1416rad at 10% 50%, #e66465, #9198e5);

background: conic-gradient(
     red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
     green 45deg 110deg, blue 110deg 200deg, purple 200deg);

See the Pen Part Four of Relearning CSS by ummadev (@ummadev) on CodePen.

Accessibility and Colours

Accessibility is something that quite often gets overlooked. It’s important to have contrasting colours. For example with text, picking the correct background and text colours will ensure everyone can view them easily

Recently there has been an introduction to dark and light mode, and a lot more websites are taking into consideration colour blindness and dyslexia.

So How Do You Know If Two Contrasting Colours Are Accessible?

For two colours to be considered accessible, they should have a good contrast ratio, this refers to the background and foreground ratio.

Above is an example of constrasting colours that are aligned with AAA standards. The accessibility standards are set by WCAG. There are three levels, A being the minimum, AA should include A and AA requirements, and AAA includes A, AA and AAA.

Level AA requires a contrast ratio of atleast 4.5: 1 for normal text and 3:1 for large text.

Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

You can check contrast of colours here: WebAIM

Here is a random colour generator for colours that comply with WCAG standards: randoma11y

Pseudo Elements and Pseudo Classes

Pseudo Elements

This is used to target a particular element. Pseudo elements will use :: in the styles.

Here is an example of changing the first letter.

<p>Paragraph One</p>

p::first-letter {
  color: red;
  font-weight: bold;
}

You may have seen things such as ::before and ::after in stylesheets and wondered what these styles do. These classes will add particular styles either before the element or after, for example you may need a space before the text but after the icon.

<section>
  <img src="img-url"/><p>My text</p>
</section>

p::before {
  content: "";
}

Pseudo Classes

Pseudo classes enable style changes with some kind of input from the user. For example hover.

Classes include:

:hover

:active

:focus, :focus-within and :focus-visible

:target

:disabled

:enabled

:checked

:first-child

:last-child

:nth-child

Typography

There are many different types of fonts and most operating systems will have their own default. For example on a Mac it is font-family: -apple-system, BlinkMacSystemFont, sans-serif;.

And there are many things you can do in terms of styles when it comes to fonts. From changing the font type, to colours, sizes and thickness.

The easiest way to change the font in your CSS is:

p {
  font-family: "font, fall back font, type of font"
}

Why is there a fall back font, you may ask yourself. Well if the font that’s first set isn’t installed on the machine you’re using or not recognised by the browser, it will use the fall back font. The fall back font is usually one that all machines have. For example Times New Roman is a popular font that all machines have and is sometimes used as a fallback font.

Font Styles

Bold

p {
  font-weight: bold;
}

Underline

p {
  text-decoration: underline;
}

Italics

p {
  font-style: italic;
}

Yes that’s right, for the three most popular styles you would think they would use the same type of style but they don’t…

Serif, Sans-serif, Handwritten…?

serif fonts are decorative and tend to have small lines around the font on the tails or feets of each character. Examples include:

Times New Roman
Garamond
Courier New
Georgia

sans-serif are a lot more cleaner. Examples include

Arial
Helvetica
Proxima Nova
Futra

hand-written means that somebody has created the font through their own means of drawing each character.

Font Weights

Font weights go from 100 to 900. 100 is said to be the lightest and 900 being extra bold.

100 - very light
200
300 - light
400 - normal
500
600
700 - bold
800
900 - extra bold

Font Sizes

Font sizes tend to be in pixels but it’s common to see em and rem too. If you wanted your font to be responsive you may use vh or vw but this isn’t as common.

Font-face + Google Fonts

Google fonts offer an array of different types of fonts. These are open source and can be used for personal use.

To view Google fonts click here. Once you select a font, you will have the option to embed the font into your stylesheet, usually via a @import.

Let’s say you download a font and you want to use it in your application. The easiest way to do this is through something called font-face. You will need to include the font file in your application and the follow syntax in your CSS:

@font-face {
  font-family: nameOfFont;
  src: url(my-font.woff);
}

Part five will cover flexbox/css grid, styling forms and responsiveness.