CSS Basics — Basic Selectors

I have an immense passion for User Experience and User Interface Design. Whenever I encounter beautiful websites, my head is itching to figure out the combination of CSS, JS, and other technologies used to create such a stunning, expressive visual.

Type selectors, aka element selectors, are selectors that refer to selecting HTML elements for styling.

Here’s an example:

body {
font-size: 16px;
background-color: orange;
}

ID Selectors are used to select HTML elements with an unique ID. This is useful when you want to target a specific element based on it’s ID attribute. An element can only have on ID and a page can only have one element with a unique ID name.

Class Selectors are used to select HTML elements with a class attribute. Multiple elements can share the same class and therefore multiple elements can be styled together when using the class selector.

The main difference between the ID and Class selectors is that the ID selector allows you to pick only one element, whereas the class selector allows you to select multiple elements with the same class name.

An element can have both an ID and a class, which when combined, allows better, and more advanced styling of elements. Styling an element through an ID selector will always take precedence over styling the same element with a class selector.

Descendent Selectors allow us to target elements based on their relationship in an HTML document (i.e. where they are in the DOM).

In the example below, h1 element is located inside the div element, which is located inside the header element. h1 is descendent of div, which is descendent of header. Rather than identifying an element with class and ID attribute, we can use descendent selectors to save us a few lines of code each time we need to perform this action.

<!--HTML-->
<header>
<div>
<h1>Hello World!</h1>
</div>
</header>
/* CSS */
/* Target h1, through the use of descendent selectors */
header div h1 {
text-align: center;
}

Pseudo Classes allow you to style elements based on their state — whether they have been hovered over, or clicked, or visited. Usually links are blue, but what happens to their colour after you click it? It usually turns a different colour to indicate that you have clicked on it before. That’s a great example of how pseudo classes are used.

There are many pseudo classes, but hover and history state are some of the most popular ones. More can be found in Mozilla documentation.

CSS Basics — Basic Layout

Width and Height

Width and Height vs. Actual Width and Height of an Element

When we define an element’s width, we are actually defining the width of the content-box inside the box model. However, when we add horizontal padding to that same element, it’s actual width appears in the browser as:

Actual Width = Width of Content-Box + Padding-left + Padding-right.

Same goes for height of the content-box and the height that we see on the browser:

Actual Height = Height of Content-Box + Padding-top + Padding-bottom

This is an issue because when we set the width/height of an element (i.e. a div), along with some padding, the element will appear bigger than the size we set it’s width/height because the browser calculates the actual width and height according to the aforementioned equations.

Box-Sizing and Max-Width

When using the box-sizing property on an element, the issue mentioned above is fixed because the browser changes the width we specified on an element so that when its added to padding and border, the appearance of the element is the specified width rather than the content portion.

Max-Width allows us to specify the maximum width we want an element to be. This is useful when we don’t want our elements to be wider than it needs to be. You don’t want a div that’s styled like an article to be completely horizontal on a humongous screen.

The max-width property is also used to create responsive images by having a wrapper that has a max-width in pixels, inside which there are images. When the browser is resized, the image do not resize. To fix this, we can add a box-sizing property to the img element.

Backgrounds: Colour and Images

A few properties to know for background images:

  • background-color — Set the colour of the background. Don’t forget that colour is spelt as ‘color’ in the property name.
  • background-image: the value must be a url(../assets/asset1.jpg).
  • background-repeat — By default, it’s repeated in both the x and y directions. We change the value of this property to be x-repeat, y-repeat or no-repeat.
  • background-size — Accepts values such as length, percentage, cover, etc. The cover property is especially important if you want those full page background images.
  • background-position — Allows us to position a background image wherever we like. We can define the position in a number of ways (center top, left center, right bottom, etc.). There are nine combinations of such values. Furthermore, if you want to be really specific, you can define a value in terms of % in the x and y direction, where the origin is the top left corner (0%, 0%) and the bottom right corner’s value is (100%, 100%).
  • background — All of the listed properties for the background can be combined to this single property.
//Example of the background property:
main-header {
background-color: #ffa949 url('../img/mountains.jpg') no-repeat center / cover
}

Floats

Floats allow elements to be floated, meaning they are plugged out of their normal flow to somewhere else inside a container/wrapper, depending on the value of the float property.

Solved by Flexbox — Clean, hack-free CSS.