Stylesheet
Definition
A stylesheet is a list of rules. Each rule has a selector naming what it applies to and a block of declarations in braces, each one a property and a value: h1 { font-size: 2rem; color: navy; }. There are three places styles can live. An external stylesheet is its own file, pulled in with <link rel="stylesheet" href="styles.css"> in the head. An embedded stylesheet is a <style> block inside the HTML. An inline style is a style attribute on a single element. A page can have several stylesheets at once, and they are not alternatives but layers — everything loaded is combined into one set of rules before anything is painted.
Why It Matters
Where the CSS lives decides what you can change and how fast the page loads. An external file is cached by the browser and by the CDN, so a visitor who reads three pages downloads the styles once; the same CSS pasted into each page is re-sent every time. Splitting one 40 KB stylesheet across six files costs six requests before anything appears, since CSS blocks rendering. And when styles come from more than one place, the reason a rule is not applying is nearly always that another stylesheet loaded after it and won — which is a question of order and specificity, not of the rule being wrong.
How It Works
The browser downloads each linked stylesheet, parses it into rules, and builds the cascade: for every element it collects every declaration that matches, then resolves conflicts by origin, specificity and source order. Later rules of equal specificity beat earlier ones, which is why the position of a link element in the head matters. An external file can pull in more with @import, but each import is discovered only after its parent file is parsed, so a chain of imports serialises the downloads and delays first paint. A media attribute on the link element, or a media query inside the file, narrows a stylesheet to certain screen widths. Relative paths inside a CSS file resolve against the stylesheet, not the HTML page — a common cause of missing background images after a folder is moved.
Real-World Example
A team ships a documentation microsite as a folder containing index.html, styles.css and an images directory, published in one upload to handbook.99helpers.site. Because the CSS is a separate file, it is served with a long cache lifetime and the second and third pages a reader opens are styled instantly from cache. When the brand colour changes, one file is replaced rather than nine pages edited, and the previous version stays available for rollback.
Common Mistakes
- ✕Linking the stylesheet with a path that is right on your computer but wrong on the server — /styles.css and styles.css resolve differently once the page lives in a subfolder
- ✕Pasting the same block of CSS into every page instead of linking one file — it works, but nothing is cached and a change means editing every page
- ✕Adding a new rule at the top of the file when an existing rule is not applying — of two rules with equal specificity, the later one wins, so the new rule needs to come after, not before
Related Terms
CSS Selector
A CSS selector is the part of a rule before the braces that says which elements the rule applies to. It can match by tag name, class, id, attribute, position in the document or state, and selectors can be combined to be as narrow as you need.
CSS Specificity
Specificity is how the browser decides which rule wins when two of them set the same property on the same element. Each selector scores a weight, the higher weight wins, and only an exact tie is settled by which rule comes later in the stylesheet.
Inline Style
An inline style is CSS written directly on one element through the style attribute, as in style="color: red; margin-top: 8px". It applies to that element only and outranks almost anything a stylesheet says.
Render-Blocking Resource
A render-blocking resource is a file the browser has to download and process before it can show anything at all. Stylesheets and ordinary script tags in the head block; almost nothing else does.
Inline CSS
CSS written inside the HTML document rather than in a separate .css file — either in a style element in the head or in a style attribute on a single element. It removes a network request and keeps everything in one file.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →