mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-10 12:57:46 +00:00
[feat] init md
This commit is contained in:
Landon Johnson
committed by
Corbin Crutchley
Corbin Crutchley
parent
99634fbefc
commit
c4d1661296
220
content/blog/css-fundamentals/index.md
Normal file
220
content/blog/css-fundamentals/index.md
Normal file
@@ -0,0 +1,220 @@
|
||||
---
|
||||
{
|
||||
title: "CSS Fundamentals",
|
||||
description: "A beginners course for CSS box model, HTML defaults, flexible box layout, grid box layout, responsive design, selectors, units, and variables.",
|
||||
published: "2022-01-08T20:08:26.988Z",
|
||||
edited: "2022-01-14T18:29:33.191Z",
|
||||
authors: ["ljtech"],
|
||||
tags: ["CSS", "design"],
|
||||
attached: [],
|
||||
license: "cc-by-4",
|
||||
}
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
This course will guide you through a few fundamental CSS concepts.
|
||||
|
||||
<br />
|
||||
|
||||
Keep in mind that some principles laid out here are broad and may not be accurate or reliable for every situation.
|
||||
|
||||
<br />
|
||||
|
||||
> 💡 This tutorial assumes basic knowledge of CSS and HTML.
|
||||
|
||||
This tutorial will cover the following items in order:
|
||||
|
||||
- [Box Model](#box-model)
|
||||
- [HTML Defaults](#html-defaults)
|
||||
- [Flexible Box Layout](#flexible-box-layout)
|
||||
- [Grid Box Layout](#grid-box-layout)
|
||||
- [Responsive Design](#responsive-design)
|
||||
- [Selectors](#selectors)
|
||||
- [Units](#units)
|
||||
- [Variables](#variables)
|
||||
|
||||
---
|
||||
|
||||
## Box Model
|
||||
|
||||
|
||||
|
||||
The box model is a representation of a documents element through a set of boxes with the following properties:
|
||||
|
||||
- Margin: Wraps any border, padding, and content as white space. Sized using `margin`.
|
||||
- Border: Wraps any padding and content. Sized and styled using `border`.
|
||||
- Padding: Wraps any contents as white space. Sized using `padding`.
|
||||
- Content: Sized using `width` and `height`.
|
||||
|
||||
Every element on the browser has a box model. You can inspect them using browser developer tools. Understanding the box model layers will help you identify element boundaries.
|
||||
|
||||
<br />
|
||||
|
||||
> 📚 [Learn More About Developer Tools](https://developer.mozilla.org/en-US/docs/Glossary/Developer_Tools)
|
||||
|
||||
---
|
||||
|
||||
## HTML Defaults
|
||||
|
||||
Every HTML element has default browser styles. These styles are called HTML defaults.
|
||||
|
||||
<br />
|
||||
|
||||
For example, a div element by default has `display: block` and a `ul` element by default has `list-style-type: disc`.
|
||||
|
||||
<br />
|
||||
|
||||
> ⚡ [Live Code Example: HTML Defaults](https://codesandbox.io/s/serverless-resonance-s2c86?file=/index.html)
|
||||
|
||||
<br />
|
||||
|
||||
You can use default styles to create a layout with minimal styling. In most cases, these default styles are overridden or unset as they are not necessary or wanted.
|
||||
|
||||
<br />
|
||||
|
||||
Never use an HTML element without first reading its documentation. Simply put, every HTML element has a place and a purpose.
|
||||
|
||||
<br />
|
||||
|
||||
> 📚 [Learn More About HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
||||
|
||||
---
|
||||
|
||||
## Flexible Box Layout
|
||||
|
||||
Also known as flexbox, it is the primary method used to align, justify, and space elements. Flexbox creates one-dimensional layouts on a column(vertical axis, `block`) or row(horizontal axis, `inline`).
|
||||
|
||||
<br />
|
||||
|
||||
To create a flexbox, set the wrapping HTML elements `display` property to `flex`. Adding `flex` to a container will cause any immediate descendants to become flex items.
|
||||
|
||||
<br />
|
||||
|
||||
> ⚡ [Live Code Example: Flexible Box Layout](https://codesandbox.io/s/flexible-box-layout-p4cy8?file=/styles.css)
|
||||
|
||||
---
|
||||
|
||||
## Grid Box Layout
|
||||
|
||||
Commonly referred to as gridbox. It is capable of creating a two-dimensional layout using both columns and rows.
|
||||
|
||||
<br />
|
||||
|
||||
To create a gridbox, set the wrapping HTML elements `display` property to `grid`. Adding `grid` to a container will cause any immediate descendants to become grid items.
|
||||
|
||||
<br />
|
||||
|
||||
> ⚡ [Live Code Example: Grid Box Layout](https://codesandbox.io/s/grid-box-layout-tnu5b?file=/styles.css)
|
||||
|
||||
---
|
||||
|
||||
## Responsive Design
|
||||
|
||||
Responsive Design is an approach to web design where the goal is to create a layout that renders beautifully on any device or screen size.
|
||||
|
||||
<br />
|
||||
|
||||
Designers can use media queries (breakpoints) to override styles for targeted screen sizes, although the aim is to achieve a mobile-friendly layout without overriding too much.
|
||||
|
||||
<br />
|
||||
|
||||
A great method is to design for mobile devices first. This way, styles can be added as the screen sizes increase.
|
||||
|
||||
<br />
|
||||
|
||||
Here is a list of popular breakpoints:
|
||||
|
||||
- Mobile S: 320px
|
||||
- Mobile M: 375px
|
||||
- Mobile L: 425px
|
||||
- Tablet: 768px
|
||||
- Laptop: 1024px
|
||||
- Laptop L: 1440px
|
||||
|
||||
> ⚡ [Live Code Example: Responsive Design](https://codesandbox.io/s/responsive-design-rkrns?file=/styles.css)
|
||||
|
||||
---
|
||||
|
||||
## Selectors
|
||||
|
||||
A CSS selector defines the targeted elements and allows for CSS rules to be applied. There are five basic CSS selectors:
|
||||
|
||||
- Universal: Targets all elements, eg: `*`.
|
||||
- Class: Targets all with the given class, eg: `.class`.
|
||||
- ID: Targets all with the given ID, eg: `#id`
|
||||
- Type: Targets all with the given type, eg `h1`
|
||||
- Attribute: Targets all with the given attribute, eg `[type="submit"]`
|
||||
|
||||
Sometimes CSS rules share the same properties. You can group selectors under one CSS rule using commas to share properties among multiple selectors.
|
||||
|
||||
<br />
|
||||
|
||||
You can also combine selectors using a variety of syntax to target anything from descendants to siblings.
|
||||
|
||||
<br />
|
||||
|
||||
I recommended using the class selector over the ID selector for styling.
|
||||
|
||||
<br />
|
||||
|
||||
> ⚡ [Live Code Example: Selectors](https://codesandbox.io/s/selectors-fqw6x?file=/styles.css)
|
||||
|
||||
<br />
|
||||
|
||||
> 📚 [Learn More About Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
|
||||
|
||||
---
|
||||
|
||||
## Units
|
||||
|
||||
CSS properties will only accept certain value types. For example, the CSS property color expects a color type value, which could be `red`, `#ff0000`, `rgb(255, 0, 0)`, etc.
|
||||
|
||||
<br />
|
||||
|
||||
There are four numeric value types:
|
||||
|
||||
- Integer: `1024` or `-55`
|
||||
- Number: `0.255`, `128`, or `-1.2`
|
||||
- Percentage: `50%`
|
||||
- Dimension: covers four sub-types
|
||||
- Length: `10px`
|
||||
- Angle: `45deg`
|
||||
- Time: `5s`
|
||||
- Resolution: `300dpi`
|
||||
|
||||
Most CSS properties accept length values.
|
||||
|
||||
<br />
|
||||
|
||||
There are seven absolute and eight relative length units.
|
||||
|
||||
<br />
|
||||
|
||||
It is unusual to use them all, so included below is a list of the most common ones:
|
||||
|
||||
- `px`: Pixels, absolute length unit.
|
||||
- `em`: Relative to the parent size.
|
||||
- `rem`: Relative to the root element size.
|
||||
- `vw`: View-width, relative to the current device.
|
||||
- `vh`: View-height, relative to the current device.
|
||||
|
||||
<br />
|
||||
|
||||
My recommendations on what to use:
|
||||
|
||||
- use `px` for `font-sizing`, `border-width`, `@media` query breaks and similar properties
|
||||
- use `rem` for `font-sizing`, `padding`, `margin`, and pretty much anything
|
||||
- use `vh` for the CSS `height` property
|
||||
|
||||
<br />
|
||||
|
||||
> 📚 [Learn More About Units & Values](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
|
||||
|
||||
---
|
||||
|
||||
## Variables
|
||||
|
||||
CSS variables allow us to define CSS properties as arbitrary values for reuse across a CSS document. It is common to use CSS variables for color values or other repeated values.
|
||||
|
||||
> ⚡ [Live Code Example: Variables](https://codesandbox.io/s/variables-tx14z?file=/styles.css)
|
||||
Reference in New Issue
Block a user