Cascading Style Sheets CSS

Writing CSS

We can design (a.k.a. style) HTML elements by using another programming language called CSS. CSS describes the appearence of HTML elements by combining properties, like font-size with values, like 18px.

Applying CSS

CSS does nothing by itself and must be applied to HTML elements using one of three methods:

1. Inline CSS, which goes inside the style="" attribute in the opening tag of an HTML element.
2. Internal CSS, which goes inside the <style> element right before the </head> tag in HTML file.
3. External CSS, which uses its own file type (.css) and is connected to an HTML file via the <link> element.

Selectors

Using internal or external CSS, we can write reusable classes that apply multiple CSS property-value combinations at once. We can then apply these classes to HTML elements using the class="" attribute. Classes are just one kind of several possible selectors, which apply CSS to elements based on different rules.

The box model

Every HTML element is a box that we can customize using a wide selection of CSS properties. This is true for any element, whether it’s typography, media, or a generic <div>. When we create new HTML elements, we are essentially adding more boxes to our page either at the end of the page or inside existing elements/boxes.

Generally speaking, we want elements to adapt to the screen size. The box model lets us define properties that space our elements apart while maintaining responsive design. Here are the most common properties we use for the box model:

1. "margin" defines the space around (outside) an element. The margin between multiple elements overlaps each other.
2. "padding" defines the space inside an element. This space goes around the content inside the element.
3. "border" is the line between an element’s margin and padding.
4. "background" is a shorthand for multiple properties that control the appearence of the inside of an element.

Box sizing

One weird quirk of CSS is that and element’s padding is not included in its width. We want to override this in virtually all cases using "box-sizing: border-box".

Block vs. inline elements

Another quirk to note is that the box model works differently for block vs. inline elements. Inline elements don’t support all of the properties that block elements support. For example, if you want to set the "transform" property for an inline element, you’ll need to first set it to "display: inline-block".

Positioning

If we want elements to break out of the flow of the document, we can use the "position" or "float" properties. Be careful with these though, because they can lead to issues when you test your site on different screen sizes!

Styling text

Text elements have their own set of unique properties. Even though we have several default text elements, like <p> and <h1>, we can make any element look like any other element using CSS.

Inheritence

Text elements will inherit properties from their parents. So, if we set a parent’s font using "font-family: sans-serif", then all child elements within that parent will have a sans-serif font.

Fonts

There are a limited number of web-safe fonts that all web browsers support. If you want to use custom fonts, you’ll need to upload the font files along with your website’s code. You can then link these files together using the @font-face rule.

Interaction and animation

We can create simple animations using CSS. We can trigger these animations based on if the user is hovering or clicking on an element, or have animations run on their own.

Interaction

We specify how an element changes on hover via the :hover pseudo-class. This specifies what CSS properties should change when the mouse is hovering over the element. The :active pseudo-class does the same thing for when the mouse is clicking on the element. To animate between these three states, add the "transition" property to the element’s original class.

Animation

CSS animations let us set up multiple keyframes which represent how CSS properties change as specific intervals. We define animations using the @keyframes rule and then apply them to a class using the "animation" property. We can change how an animation flows by setting its "animation-timing-function" property to a specific easing function in the format of cubic-bezier() .

Flexbox

Flexbox lets us easily create one-dimensional layouts, like grids or columns. To use flexbox, we create a flex parent using "display: flex". Then, any children within that parent will flow using flex rules instead of just flowing to the bottom of the page like they usually do.

There is a whole assortment of properties that are unique to either the flex parent or children. Flexbox is great for creating things like navbars, menus, or any kind of pattern of horizontal or vertical content. What’s nice about flexbox is that it lets us make significant layout changes using a single property, like updating the "gap" value to change the spacing between every flex child.

Learn flexbox

It can be tricky to learn flexbox at the start, so check out one of the three guides listed for a more in-depth overview.

CSS grid

CSS grid lets us easily create two-dimensional layouts, like grids. What makes grid different from flexbox is that grid pre-defines a number of rows or columns to flow content into. Typically speaking, these cells (i.e. grid children) share properties like width or height, while flex children may have varying widths or heights.

We create a grid parent using "display: grid". Then, any children within that parent will occupy the next cell in the grid.

Learn grid

Just like with flexbox, there are tons of resources to help learn CSS grid. You don’t need to know every grid property to start using it, but these links will give you an overview of how every property works together.

Responsive design

Websites should work on any device and at any screen device. Since we can’t guarantee what device our users will be using, we need to use responsive design techniques to make our sites work at various screen sizes. Here are a few common techniques:

1. Use @media queries to create CSS breakpoints. Breakpoints let us override CSS values at specific screen sizes.
2. Use responsive units, like percentages, viewport units, and fractional units whenever possible. If we use absolute units like pixels, our designs will break when the screen gets too small or big. If you need to use absolute units, try using properties like max-width instead of width.
3. Avoid absolute positioning and use flexbox and CSS grid instead. Flexbox and grid are designed to be responsive. We can easily change the direction of a flexbox or the number of columns in a grid using @media queries for specific screen sizes.