CSS

Created by howcome

CSS stands for Cascading Style sheets which 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

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

Colors, Typography & Imagery

float: none;