Skip to content
academia.sh
tr
Log in

Course Beginner

Visual Presentation with CSS

By the end of this course

Start course

01

How CSS Works

The syntax of a declaration, how selectors map to the document, how conflicting rules are resolved by the cascade and specificity, and how values are inherited down the tree.

  1. 01 Rule, Declaration, and Value The smallest units of a style language; a rule made of a selector and a declaration block, the structure of a property-value pair, and the rule that an invalid declaration is dropped.
  2. 02 Linking the Stylesheet Attaching a set of styles to a document in three ways — inline, internal, and external — and how these three ways differ in request count, reuse, and conflict resolution.
  3. 03 Selectors Which set the type, class, id, and universal selectors return from the document tree; the compound selector concept, and naming class names by meaning.
  4. 04 Combinator Selectors The descendant, child, adjacent-sibling, and general-sibling combinators; a selector's right-to-left evaluation and the key-selector concept.
  5. 05 Attribute Selectors Matching by an attribute's presence and value; exact match, list membership, hyphen-prefixed match, and substring matches, along with the case-sensitivity flag.
  6. 06 Pseudo-Classes and Pseudo-Elements Pseudo-classes that select states not written in the document, nth-child arithmetic, logical selectors, and pseudo-elements that generate content absent from the tree.
  7. 07 Cascade and Specificity Ordering declarations that write to the same property by source, importance, specificity, and order criteria; computing the specificity triple and why it cannot be read in base ten.
  8. 08 Inheritance and Default Values How the value of a property no declaration reaches is determined; inherited and non-inherited properties, initial value, and the inherit, initial, unset, and revert keywords.

02

The Box Model and Flow

Every element turning into a box, the arithmetic of the box's regions, the rules of normal flow, and the positioning and stacking order that take a box out of flow.

  1. 01 The Box Model Every element turning into a box made of four nested rectangles; the boundaries and arithmetic of the content, padding, border, and margin regions.
  2. 02 Box Sizing Which region a declared width measures; comparing the content-box and border-box models with the same numbers, and the effect of minimum and maximum bounds.
  3. 03 Display Types The behavioral differences between block, inline, and inline-block boxes; the distinction between outer and inner display type, and the three separate ways of hiding an element.
  4. 04 Flow Layout Normal flow's block and inline placement rules; the three cases of margin collapsing and its numeric result.
  5. 05 Floating Elements Floating shortening line boxes so text flows around a box; the containing box's height problem, and the clearing and formatting-root solutions.
  6. 06 Positioning Where static, relative, absolute, fixed, and sticky positioning put a box; the containing block concept and what the offset properties are measured against.
  7. 07 Stacking Context The paint order of boxes; z-index values being compared only among siblings, and the declarations that establish a stacking context.
  8. 08 Overflow Management Handling the case where content does not fit its box; comparing overflow values, the separate mechanisms for text overflow, and clipping's accessibility cost.

03

Visual Properties

Color representations and contrast calculation, typography scales and font-loading behavior, backgrounds, transitions, shadows, and calculating with units.

  1. 01 Color Representations Named, hexadecimal, and functional color notations; the conversion between RGB and HSL, and the consequence of color space choice for generating a scale.
  2. 02 Transparency and Blending The alpha channel's blending calculation, the difference between opacity and alpha, and evaluating a blended color's contrast ratio against WCAG criteria.
  3. 03 Typography Resolving a font family list, weight and style axes, a modular size scale, and the calculable rationale for writing line height unitless.
  4. 04 Font Loading Linking a font file to the document, conditional downloading with subset ranges, and choosing the display behavior during loading.
  5. 05 Text Formatting Whitespace processing rules, alignment and indentation, text-transform's dependence on language, and controlling underline decoration.
  6. 06 Backgrounds Background layers, the calculation behind percentage positioning, repeat modes, and the numeric counterpart of cover and contain scaling.
  7. 07 Gradients Linear and radial color gradients; the rule for resolving stop positions, calculating intermediate colors, and producing a line with a hard transition.
  8. 08 Border, Shadow, and Shape Border components, the corner radius's scaling rule, the inner-radius calculation, and the area shadow layers occupy.
  9. 09 CSS Units Absolute, font-relative, and viewport-relative units; the em chain's calculation, rem's stability, and what a percentage resolves against.
  10. 10 CSS Functions Mixing units with calc, setting bounds with min and max, clamping a range with clamp, and combining these functions to produce a scale.

Start typing to search.

↑↓ ↵ Esc navigate · open · close