Skip to main content

Working with CSS

Usually, CSS is written in a separate CSS file (with file extension .css), but it can also be written as a <style> tag inside of the <head> tag or inside of an HTML tag, using the style attribute. When CSS is written using the style attribute, it’s called an “inline style”. This can obfuscate readability if used in great amount.

For our example we'll seperate the HTML and CSS:

HTML

<h1>I am feeling <span>good</span> right now</h1>

CSS

h1 {
  color: skyblue;
  font-size: 46px;
}
span {
  font-weight: bold;
  font-style: italic;
}
I am feeling good right now

CSS rules​

Following are a set of CSS tips and rules for you to refer to when working on TaskFlow. Before moving on to the next page, make sure to have read the CSS rules and challenge yourself through this selector game.

If you want to lookup the possible selectors in action you can refer to this cheatsheet which can incidentally also be played as a game.

Selectors​

A selector is part of a CSS rule that targets what HTML element it will be applying styles to. Generally speaking styling tags are used to define defaults whereas classes are used to finetune and specify. Element id's can be used for styling, but since id's can only be used once per document and often serve a specific purpose, it's better to avoid them when styling.

Type, class, and ID selectors

h1 { }, .box { }, #header { }

Attribute selectors

input[type=“text”] { }

Pseudo-classes and pseudo-elements

a:hover { }, p:after { }

Combinators

ul > li

'Cascading' in CSS​

The order of rules matters. The last rule that gets applied takes precedence when using the same selector.

h1 {
  color: #000000;
}

h1 {
  color: tomato;
}

Specificity​

If two CSS selectors apply to the same element, the one with higher specificity has precedence. This is ordered by the type of selector and whether there are combinators in play. The types of selector are ordered as follows:

  • Inline styles
  • IDs
  • Classes, attributes and pseudo-classes
  • Elements and pseudo-elements

An exception is putting !important behind a CSS value which will overwrite the current value. This should be avoided as it can easily cause oversights throughout a project.

Further reading​