Skip to main content

CSS Basic Notes

Table of Contents​

CSS Working Group​

The CSS Working Group (CSSWG) is part of the W3C (World Wide Web Consortium) that develops specifications for CSS. They are responsible for:

  • Developing new CSS features
  • Maintaining existing specifications
  • Ensuring backward compatibility
  • Coordinating with browser vendors

Key Resources:​

CSS Cascading and Inheritance​

Cascading Order​

The cascade determines how competing CSS rules are applied. The order of precedence (from highest to lowest):

  1. Importance

    • User agent !important declarations
    • User !important declarations
    • Author !important declarations
    • Author declarations
    • User declarations
    • User agent declarations

  2. Specificity

  3. Order of appearance

Layer (@layer)​

CSS Cascade Layers allow authors to group styles and control their precedence:

@layer framework {
  /* Framework styles */
}

@layer theme {
  /* Theme styles */
}

@layer custom {
  /* Custom styles */
}

Later layers take precedence over earlier layers.

Scope (@scope)​

Scoped styles allow limiting style rules to specific DOM subtrees:

@scope (.card) {
  img {
    border-radius: 8px;
  }
}

Nesting​

CSS nesting allows writing nested selectors:

.parent {
  color: blue;
  
  & .child {
    color: red;
  }
}

Specificity​

Specificity is calculated as a four-part value (a,b,c,d):

  • a: Style attribute
  • b: ID selectors
  • c: Classes, attributes, and pseudo-classes
  • d: Elements and pseudo-elements

CSS Selectors​

Universal Selector​

* {
  box-sizing: border-box;
}

Type Selector​

p {
  margin: 1em 0;
}

Attribute Selector​

/* Exact match */
[data-type="primary"] {}

/* Contains value */
[class*="btn-"] {}

/* Starts with */
[href^="https"] {}

/* Ends with */
[src$=".jpg"] {}

Combinators​

Descendant Combinator​

article p {}  /* Matches any p inside article */

Child Combinator​

article > p {} /* Matches direct p children of article */

General Sibling Combinator​

h2 ~ p {} /* Matches p elements after h2 */

Adjacent Sibling Combinator​

h2 + p {} /* Matches p immediately after h2 */

Pseudo-Classes​

Location Pseudo-Classes​

  • :link
  • :visited
  • :target
  • :target-within

User Action Pseudo-Classes​

  • :hover
  • :active
  • :focus
  • :focus-visible
  • :focus-within

Input Pseudo-Classes​

  • :enabled
  • :disabled
  • :read-only
  • :read-write
  • :placeholder-shown
  • :default
  • :checked
  • :indeterminate
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional

Structural Pseudo-Classes​

  • :root
  • :empty
  • :first-child
  • :last-child
  • :only-child
  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-child()
  • :nth-last-child()
  • :nth-of-type()
  • :nth-last-of-type()

Pseudo-Elements​

First Letter and Line​

p::first-letter {}
p::first-line {}

Selection​

::selection {
  background-color: yellow;
  color: black;
}

Before and After​

.quote::before {
  content: "「";
}
.quote::after {
  content: "」";
}

CSS Data Types and Values​

Global Values​

  • inherit: Takes the computed value from the parent element
  • initial: Sets the property to its default value
  • revert: Reverts to the browser's default styling
  • unset: Combination of inherit and initial

Value Processing​

  1. Specified Value: The value in the stylesheet
  2. Computed Value: Value after resolving relative values
  3. Used Value: Final value after layout calculations
  4. Actual Value: Value actually applied by the browser

CSS Variables (Custom Properties)​

Basic Usage​

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

Scope Variables​

.component {
  --component-bg: #eee;
  background: var(--component-bg);
}

Dark Mode Variables​

:root {
  --text-color: black;
  --bg-color: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: white;
    --bg-color: black;
  }
}

CSS Colors​

Color Formats​

HSL Colors​

.element {
  color: hsl(0, 100%, 50%);  /* Red */
  color: hsla(0, 100%, 50%, 0.5);  /* Semi-transparent red */
}

HWB Colors​

.element {
  color: hwb(0 0% 0%);  /* Red */
  color: hwb(120 10% 10%);  /* Green with white and black mixed */
}

Color Functions​

Color Mix​

.element {
  background-color: color-mix(in srgb, #ff0000 50%, #0000ff 50%);
}

CSS Math Functions​

calc()​

.element {
  width: calc(100% - 2rem);
  margin: calc(1rem + 2px);
}

min() and max()​

.element {
  width: min(100%, 500px);
  height: max(100px, 20vh);
}

clamp()​

.text {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

CSS Text Properties​

Text Alignment​

.text {
  text-align: start | end | left | right | center | justify;
  text-align-last: auto | start | end | left | right | center | justify;
}

Text Decoration​

.text {
  text-decoration-line: none | underline | overline | line-through;
  text-decoration-style: solid | double | dotted | dashed | wavy;
  text-decoration-color: currentColor | <color>;
  text-decoration-thickness: auto | from-font | <length>;
}

Text Overflow​

.text {
  text-overflow: clip | ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

CSS Font Properties​

Font Family​

.text {
  font-family: "System UI", -apple-system, sans-serif;
}

Font Loading and Performance​

@font-face {
  font-family: "Custom Font";
  src: url("/fonts/custom.woff2") format("woff2");
  font-display: swap;
}

Variable Fonts​

@font-face {
  font-family: "Variable Font";
  src: url("/fonts/variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
}

CSS Content and Counters​

Generated Content​

.chapter::before {
  content: "Chapter " counter(chapter) ": ";
}

Counters​

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

References and Further Reading​

  1. MDN Web Docs - CSS
  2. W3C CSS Specifications
  3. CSS Working Group Editor Drafts
  4. Can I Use - Browser compatibility tables
  5. CSS Tricks - Tutorials and articles
  6. Modern CSS Solutions - Modern CSS techniques

Note: This documentation provides a comprehensive overview of CSS features and properties. For the most up-to-date information and browser compatibility, always consult the official documentation and specifications.