CSS

Created by howcome Cascading Style Sheets is a way to add styles & layouts to our web apps/sites

There are three ways to apply CSS: inline, internal & external.

Highest Specificity → Inline. Always use → External to maintain Separation of Concerns

The modern era of CSS we don’t need to write all the CSS by hand instead by using some library such as Tailwind or Sass


<!-- Inline -->
<h1 style="color: red">Heading</h1>

<!-- Internal -->
<style>
	h1 {
		color: red;
	}
</style>

<!-- External Linking (Recommended) -->
<link rel="stylesheet" href="style.css" />

Anatomy

selector, declaration block, declaration, property: value, rule

Display Property

inline doesn’t take new line but can’t control its height & width: <strong>

block takes its own line and can control its height & width: <div>

inline-block we can set height & width but will not take its own line: <img> tag

Topics

Selectors

Compatibility, Specificity & Inheritance

Colors, Typography & Imagery

Bootstrap, Tailwind & daisyUI

float: none;