WordPress and Shopify

Stage 1 · Lesson 5 of 7

CSS for tweaks and fixes

Web basics for site builders

Most client requests are small visual changes: a button colour, spacing on mobile, a font size. CSS is the language that styles a page. Each rule uses to pick the elements it applies to.

When two rules clash, the and specificity decide which one wins. Put simply, a more precise selector beats a general one, and when two are equally precise, the later rule wins. Media queries apply styles only at certain screen widths, which is how every theme handles phones.

Learn the : every element is a box of content, padding, border and margin. Learn flexbox for arranging items in rows and columns. Learn such as var(--brand), which modern themes use to keep colours in one place.

With this you can change one rule in the right place instead of fighting the theme. It is also the basis of Webflow's .

Common trapadding !important everywhere until no change works without another one.

A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock

Resources for this stage

Start with· follow one of these

  • GuideFree
    MDN Web Docs

    Mozilla

    Free, accurate learning area for HTML, CSS and how the web works; the reference every builder keeps open

  • GuideFree
    W3Schools

    W3Schools · Beginner

    Short beginner examples of HTML and CSS you can edit in the browser straight away

Practise

  • Free designs to rebuild in HTML and CSS, so you practise turning a mockup into a real page

Keep handy

  • Check whether a CSS feature works in the browsers your client's customers use

Also worth your time

  • web.devGo deeper

    Google's guides on responsive design, images and performance for when the basics feel solid

Mark this stage as not done?