Relearning CSS: Part One

🎨 Front End

Oct 2, 2022

7 min read

I’m starting a new series, in which I go through and look at different aspects of CSS.

As a Front-End Engineer I’m accustomed to writing, editing and picking apart CSS styles within applications. For the most part, it’s straightforward but sometimes there are moments where I think to myself, I’ve seen this before and I wish I had documented it somewhere. So this is where that place is going to be!

In part one of this CSS series I will cover selectors, colours and lists.

Before We Start… What is CSS?

CSS stands for Cascading Style Sheet. What does that mean? It’s essentially a language which enables you to make HTML elements on a page look aesthetically pleasing.

In the <head> tag of your HTML file you will need to link your stylesheet as follows: <link href="style.css" rel="stylesheet" />. Note here that although the css file is called style, you can call it whatever you link and there is no naming convention around stylesheet names.

Alt Text

Selectors

A selector can refer to many HTML elements, such as a <p> tag or a <div> tag.

Let’s say you have the following code in your HTML:

<p>This is an example of a paragraph</p>

To style paragraph, you would do this in your stylesheet as follows:

p {
  color: green;
}

Colour here refers to the colour of the text. If you wanted to change the background around the text, you would use background instead but more on that later.

Okay, but what if you had two <p> tags and you wanted them to be different colours?

For example:

<p> This is my red paragraph </p>

<p> I want this paragraph to be blue </p>

In CSS, there is something called inheritance. Depending on which colour you decide the p tag should have in your stylesheet, will mean that colour takes precedence over the second colour you try to specify.

So what’s the best way around this? This is where classes and IDs come into play!

ID

IDs are unique in that they are usually used for a single element, for example header or footer. It’s common practise when it comes to IDs that each element only has one ID and each page can only have one element with that ID.

One use case for IDs is validation. It’s important to ensure validation checks are through and having unique IDs for elements would be very helpful for this.

Here’s an example of IDs:

<label>Input one</label>
<input id="input-one"/>

<label>Input two</label>
<input id="input-two"/>

#input-one:active {
  border: 1px solid red;
}

#input-two:active {
  border: 1px solid green;
}

Classes

Classes are not unique like IDs however you can write a specific set of styles that can be applied to mulitple elements within a HTML page. Classes tend to be more common in applications that IDs. You can use the same class on multiple elements and you can have mutliple classes applied on one element.

Example:

<p class="first-class">Here is a paragraph with a class</p>

<p class="first-class second-class">Here is a paragraph with two classes</p>

<div class="first-class"> Here is a div with the same class as the first paragraph! </p>

.first-class {
  color: blue;
  background: green;
}

.second-class {
  font-size: 10px;
}

Other Common Selectors

.class-one.class-two Select all elements with both class-one and class-two within its class attribute

.class-one .class-two Select all elements with class-two that is a descendant of an element with class-one

:first-child Apply styles to only the first child of all the elements

:nth-child(n) Make these styles applicable to the nth child specified

:last-child Only enable these styles on the last child of the elements

* Apply styles to all elements

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

Colours

Colours are important when it comes to styling HTML pages; from creating a theme or branding on a page. With the introduction of CSS variables, it’s very easy to define a set of variables for set colours within an application. There are also a number of ways to apply colours in different ways on a page, whether that’s through the font colour, background colour or specifying colours on particular parts of a div.

Colour names

Here is a selection of colour names.

lightsalmon	  #FFA07A	rgb(255,160,122)
salmon	      #FA8072	rgb(250,128,114)
darksalmon	  #E9967A	rgb(233,150,122)
lightcoral	  #F08080	rgb(240,128,128)
indianred	    #CD5C5C	rgb(205,92,92)
crimson	      #DC143C	rgb(220,20,60)
firebrick	    #B22222	rgb(178,34,34)
red	          #FF0000	rgb(255,0,0)
darkred     	#8B0000	rgb(139,0,0)
coral	#FF7F50	rgb(255,127,80)
tomato	#FF6347	rgb(255,99,71)
orangered	#FF4500	rgb(255,69,0)
gold	#FFD700	rgb(255,215,0)
orange	#FFA500	rgb(255,165,0)
darkorange	#FF8C00	rgb(255,140,0)
lightyellow	#FFFFE0	rgb(255,255,224)
lemonchiffon	#FFFACD	rgb(255,250,205)
lightgoldenrodyellow	#FAFAD2	rgb(250,250,210)
papayawhip	#FFEFD5	rgb(255,239,213)
moccasin	#FFE4B5	rgb(255,228,181)
peachpuff	#FFDAB9	rgb(255,218,185)
palegoldenrod	#EEE8AA	rgb(238,232,170)
khaki	#F0E68C	rgb(240,230,140)
darkkhaki	#BDB76B	rgb(189,183,107)
yellow	#FFFF00	rgb(255,255,0)
lawngreen	#7CFC00	rgb(124,252,0)
chartreuse	#7FFF00	rgb(127,255,0)
limegreen	#32CD32	rgb(50,205,50)
lime	#00FF00	rgb(0.255.0)
forestgreen	#228B22	rgb(34,139,34)
green	#008000	rgb(0,128,0)
darkgreen	#006400	rgb(0,100,0)
greenyellow	#ADFF2F	rgb(173,255,47)
yellowgreen	#9ACD32	rgb(154,205,50)
springgreen	#00FF7F	rgb(0,255,127)
mediumspringgreen	#00FA9A	rgb(0,250,154)
lightgreen	#90EE90	rgb(144,238,144)
palegreen	#98FB98	rgb(152,251,152)
darkseagreen	#8FBC8F	rgb(143,188,143)
mediumseagreen	#3CB371	rgb(60,179,113)
seagreen	#2E8B57	rgb(46,139,87)
olive	#808000	rgb(128,128,0)
darkolivegreen	#556B2F	rgb(85,107,47)
olivedrab	#6B8E23	rgb(107,142,35)
lightcyan	#E0FFFF	rgb(224,255,255)
cyan	#00FFFF	rgb(0,255,255)
aqua	#00FFFF	rgb(0,255,255)
aquamarine	#7FFFD4	rgb(127,255,212)
mediumaquamarine	#66CDAA	rgb(102,205,170)
paleturquoise	#AFEEEE	rgb(175,238,238)
turquoise	#40E0D0	rgb(64,224,208)
mediumturquoise	#48D1CC	rgb(72,209,204)
darkturquoise	#00CED1	rgb(0,206,209)
lightseagreen	#20B2AA	rgb(32,178,170)
cadetblue	#5F9EA0	rgb(95,158,160)
darkcyan	#008B8B	rgb(0,139,139)
teal	#008080	rgb(0,128,128)
powderblue	#B0E0E6	rgb(176,224,230)
lightblue	#ADD8E6	rgb(173,216,230)
lightskyblue	#87CEFA	rgb(135,206,250)
skyblue	#87CEEB	rgb(135,206,235)
deepskyblue	#00BFFF	rgb(0,191,255)
lightsteelblue	#B0C4DE	rgb(176,196,222)
dodgerblue	#1E90FF	rgb(30,144,255)
cornflowerblue	#6495ED	rgb(100,149,237)
steelblue	#4682B4	rgb(70,130,180)
royalblue	#4169E1	rgb(65,105,225)
blue	#0000FF	rgb(0,0,255)
mediumblue	#0000CD	rgb(0,0,205)
darkblue	#00008B	rgb(0,0,139)
navy	#000080	rgb(0,0,128)
midnightblue	#191970	rgb(25,25,112)
mediumslateblue	#7B68EE	rgb(123,104,238)
slateblue	#6A5ACD	rgb(106,90,205)
darkslateblue	#483D8B	rgb(72,61,139)
lavender	#E6E6FA	rgb(230,230,250)
thistle	#D8BFD8	rgb(216,191,216)
plum	#DDA0DD	rgb(221,160,221)
violet	#EE82EE	rgb(238,130,238)
orchid	#DA70D6	rgb(218,112,214)
fuchsia	#FF00FF	rgb(255,0,255)
magenta	#FF00FF	rgb(255,0,255)
mediumorchid	#BA55D3	rgb(186,85,211)
mediumpurple	#9370DB	rgb(147,112,219)
blueviolet	#8A2BE2	rgb(138,43,226)
darkviolet	#9400D3	rgb(148,0,211)
darkorchid	#9932CC	rgb(153,50,204)
darkmagenta	#8B008B	rgb(139,0,139)
purple	#800080	rgb(128,0,128)
indigo	#4B0082	rgb(75,0,130)
pink	#FFC0CB	rgb(255,192,203)
lightpink	#FFB6C1	rgb(255,182,193)
hotpink	#FF69B4	rgb(255,105,180)
deeppink	#FF1493	rgb(255,20,147)
palevioletred	#DB7093	rgb(219,112,147)
mediumvioletred	#C71585	rgb(199,21,133)
gainsboro	#DCDCDC	rgb(220,220,220)
lightgray	#D3D3D3	rgb(211,211,211)
silver	#C0C0C0	rgb(192,192,192)
darkgray	#A9A9A9	rgb(169,169,169)
gray	#808080	rgb(128,128,128)
dimgray	#696969	rgb(105,105,105)
lightslategray	#778899	rgb(119,136,153)
slategray	#708090	rgb(112,128,144)
darkslategray	#2F4F4F	rgb(47,79,79)
black	#000000	rgb(0,0,0)

Hexadecimal

Hexadecimal colours tend to be made up of a mixture of letters and numbers of six characters and will always start with a #. Each bit (2 part) of the hexadecimal will refer to a shade of either red, green or blue, which make up the colour.

Certain colours such as black (#000000) and white (#FFFFFF) can be abbreviated to only use three characters, #000 and #FFF.

Let’s take a few examples.

This is the hexadecimal for red: #FF0000

This is the hexadecmial for green: #008000

This is the hexadecimal for blue: #0000FF

Now let’s say we wanted the hexadecimal for purple. Well usually to get the colour purple you would mix the colours blue and red. So if changed the hexadecimal for those colours we would get the hexadecimal for purple which is #800080

RGB

RGB stands for red, green and blue. In CSS you can specify these numbers to make up one sinlge colour. Below is an example.

.my-element {
  color: rgb(255, 432, 123);
}

We can also specify the opacity of the colour (which is usually a value between 0 and 1) at the end of the rgb as below.

.my-element {
  color: rgba(255, 432, 123, 0.5);
}

CSS variables

As state previously in this blog post, CSS variables enable you to be able to use the same colours within a stylesheet with much ease. See the example below.

:root {
  --example-colour: pink;
}

.example-one {
  background: var(--example-colour);
}

.example-two {
  color: var(--example-colour);
}

Lists

There are two types of lists you might want to use within your application; unordered and ordered lists. Ordered lists included numbered lists and unordered lists are lists which usually use bullet points to show list items.

Ordered lists

<ol>
  <li> This is item one </li>
  <li> This is item two </li>
  <li> This is item three <li>
</ol>

ol li {
  color: orange;
}

Unordered lists

<ul>
  <li> This is item one </li>
  <li> This is item two </li>
  <li> This is item three <li>
</ul>

ul li {
  color: yellow;
}

Part two will cover sizing units, the box model and links.