CSS Basics

Cascading Style Sheets

If HTML is the ‘nouns’ of a webpage, then CSS could be described as the ‘adjectives.’ CSS allows one to style HTML, and in other words, is just a fancy way of displaying information in a way that is appealing to the eye. In the past, typical front-end development called for two roles. The Web Developer (The programmer) and the Web Designer (The person who comes up with the graphical representation of how the web-page is supposed to look. It was, and in some forms of web development today still is, how web pages get developed. CSS is a way to take the information portion (HTML) and add stylistic additions to the way it is represented. Can you imagine a website with no graphical flair being successful today? For example, the following static website shows HTML only on the left, and HTML + CSS on the right.

The above example is pretty simple, but you can already see how the use of basic CSS can make a huge impact on the artistic element of website presentation.

Cascading Style sheets is named as such because the final-most style coded chronologically ‘wins out’ versus the predecessors. There are however, a few selectors that behave a little differently, and supersede other selectors.

How specific is your selector? In CSS you can have multiple styles targeting one element. How do we know which will take precedence? Which selectors are implemented depends on Specificity, Importance and Source Order. You can think of specificity almost as if it means ‘proximity.’ Selecting by <li> will trump <body> if list is inside body. A CSS class selector will trump styles applied to <li> if the element is in an <li>. ID will trump class, as it’s more specific by definition. Importance is the use of !important, to supersede all other CSS rules. Source order is the order of imported stylesheet. It is cascading, that is, the most recently read stylesheet will override the previous.

Common Selectors

.class

Good way to select a group of elements and make sure they all have the same styles

#id

Similar to class but can only use the id once.

*

Applies to all elements

element

Select an element, apply a style

element, element

Both element1 and element 2, apply the same style

element element

Element2 inside element1, apply a style

element > element

Select all element2 that have parents of element1

element + element

Select any element2 that is directly after element 1

:hover

CSS is applied upon mouse hover

:last-child

Last ‘child’/element in a selector group

:first-child

First ‘child’/element in selector group

!important

Overrides all other CCS rules

The Box Model

Simple Images with CSS

CSS can be a pretty powerful tool. It’s possible to create pretty good looking simple images. It’s not necessarily always the most convenient way to do things, but there are some added capabilities to creating icons or simple images with pure CSS alone. One of the reasons is it’s easy to create animated frames with a pure CSS image.

FlexBox

Flexbox is a simple and efficient tool to allocate space for containers if the goal is to have dynamic distributed spacing. Flexbox is used to give a container the ability to alter its items width, height and order. This is particularly useful because it allows for displays of different sizes to better utilize the space on the screen and allows for a better user experience than a plain static spacing. It’s mostly used for components of an application or simpler layouts.

main axis -Not necessarily horizontal, depending on flex direction

main-start | main-end Items are placed in container start from main start to main end

main size An items width or height, whichever is main dimension

cross axis Perpendicular to main axis, depending on direction of main axis

cross-start| cross-end Flex lines filled with items and placed in container from start to end

cross size Width or height of flex item, whichever is the cross dimension