3. CSS fundamentals

Styling

Core modules

CSS enables you to add style to your web pages including color, text, positioning and layout, and animation. In our first CSS module, we cover all the fundamental language mechanics you need to understand how CSS works.

General resources:

3.1 Basic CSS syntax

Learning outcomes:

  • The purpose of CSS — style, layout, and provide other visual enhancements to web pages (such as animation).

  • Key CSS syntax:

    • Rules.

    • Selectors.

    • Declarations.

    • Properties (including custom properties).

    • Values (including shorthand values).

    • At-rules and descriptors.

  • Default browser styles — understand that the browser provides default CSS styling to HTML elements so that it is in some way usable even with no user-defined styles at all:

    • Understand also therefore that HTML has nothing to do with styling.

    • Use this to reinforce the idea of separating semantics and structure (semantic HTML) from presentation (CSS), and not using presentational markup.

    • Study CSS resets, first to prove that browser styles exist and show what a page looks like when they are removed, but also as a technique for providing a blank canvas for developers to build styles on top of.

  • Applying CSS to an HTML document — inline styles, internal stylesheets, external stylesheets:

    • Why external stylesheets are usually the best option.

Resources:

3.2 Selectors

Learning outcomes:

  • Basic selectors — element type, class, ID:

    • IDs are unique per document — you should use an ID to select one specific element.

    • You can have multiple classes per element, and these can be used to layer on styles as required.

    • IDs and classes should be used sparingly where they make sense for selections, but you shouldn't use them for everything — keep your HTML as clean and uncluttered as possible.

  • Selector lists.

  • Attribute selectors.

  • Combinators.

  • Pseudo-classes and pseudo-elements.

Resources:

3.3 The box model

Learning outcomes:

  • Block and inline elements.

  • The different boxes that make up an element and how to style them:

    • width and height.

    • margin.

    • border.

    • padding.

  • The alternative box model accessed via box-sizing: border-box, and why this is easier to understand (and how it differs from) the standard box model.

  • Margin collapsing.

  • Basic display values, and how they affect box behavior — block, inline, inline-block, and none.

Resources:

3.4 Handling conflicts in CSS

Learning outcomes:

  • Understand how rules can conflict in CSS.

  • Inheritance.

  • The cascade.

  • The concepts that govern the outcome of CSS conflicts:

    • Specificity.

    • Source order.

    • Importance.

Resources:

3.5 Values and units

Learning outcomes:

  • Understand that property values can take many different types, and what these types represent:

    • Numbers, lengths, and percentages.

    • Ems and rems.

    • Colors.

    • Images.

    • Positions.

    • Strings and identifiers.

    • Functions.

  • Understand what absolute and relative units are, and the difference between them.

Resources:

3.6 Sizing

Learning outcomes:

  • Intrinsic size.

  • Setting absolute and percentage sizes.

  • min-/max-width and min-/max-height.

  • Viewport units.

Resources:

3.7 Backgrounds and borders

Learning outcomes:

  • Basic background styling — colors and images.

  • Background image size, repeat, position, and attachment.

  • Background gradients:

    • The general concept of what a background gradient is.

    • Linear gradients.

    • (Radial, conic, and repeating gradients are more advanced and in-depth coverage is not required at this stage.)

  • Accessibility considerations of backgrounds — ensure good contrast.

  • Border basics — border-width, border-style, border-color, and border shorthand (e.g. border-top and border).

  • border-radius for rounded corners.

Resources:

3.8 Overflow

Learning outcomes:

  • Understand what overflow is.

  • Control overflow with overflow properties.

Resources:

3.9 Styling form elements

Learning outcomes:

  • Basic styling of easy-to-style form elements, like <input type="text">.

  • Using CSS resets to overcome <input> font styling inheritance and box styling default differences.

  • Understand that not all form elements are easy to style, and why:

    • System styles are applied to some form elements, making consistent styling difficult across browsers.

    • More complex form elements have internal (shadow DOM) elements that define the structure of their inner workings. These are often impossible to access and style individually.

  • Using appearance: none to work around system styling for <input> types like search, checkbox, and radio.

  • Mitigating issues with difficult-to-style types such as datetime-local, color, etc.

Notes:

Conforming to this curriculum module doesn't require having foolproof, conclusive answers to every possible form styling problem. Some form elements are difficult to style, as the resources make clear. However, you should at least be able to handle a wide range of form styling needs and understand the issues around some of the more difficult styling issues.

Resources:

3.10 Debugging CSS

Learning outcomes:

  • Use the HTML validator to see if you have any invalid markup on your page — this could be causing your CSS to not apply as desired.

  • Use the CSS validator to check for badly-formed CSS code. A missing semi-colon can cause a whole section of CSS declarations to not apply.

  • Use browser developer tools to inspect the CSS that is applied to HTML elements on a page.

  • Modify the applied CSS to figure out what changes are needed to get what you want. This includes enabling and disabling declarations, modifying values, and adding new declarations.

  • Use layout inspection tools to inspect the box model, grids, flexbox, and other layout features (see also CSS Layout).

  • Use responsive design mode tools to check responsive layouts (see also 5.5 Responsive design specifics).

Resources:

Previous: 2. Semantic HTMLNext: 4. CSS text styling