Document-Level Styles with <style>
Document-level styles apply only to a single document. This is achieved using the <style> tag, which is placed within the <head> section of the document. Inside the <style> element, you can define the CSS rules you wish to apply. Here’s an example of a document-level style:
The style rules defined within the <style> tag will be applied to the document. This technique is suitable if you only need to style a single file, such as a unique homepage. However, if you want your styles to be available across multiple documents on your site, it’s better to use an external stylesheet.
Note: The <style> tag includes a required type attribute to indicate the use of CSS.
Creating Your First Style Sheet
To create an external stylesheet, start by creating a simple text file with the .css extension. Add the following CSS rules to your document:
This code is written in CSS, which is not a markup language but has its own syntax involving rules composed of selectors, properties, and values.
The <link> Tag
To attach the stylesheet to your HTML document, use the <link> tag. This tag should be placed in the <head> section of the document and includes several attributes. The href attribute, similar to its use in the <a> tag, references the location of the CSS file. The rel attribute sets the relationship of the linked file, and the type attribute indicates the type of content.
Here’s how a <link> tag for a stylesheet named main.css in a folder called styles would look:
The type attribute is not strictly necessary and can be omitted:
The href attribute can use either an absolute or relative path to the CSS file.
Consistency
One of the main advantages of using external stylesheets is the ability to apply a single stylesheet to multiple pages within your website. This ensures a consistent look and feel across your site. Additionally, editing the CSS file allows you to update the appearance of all pages using that stylesheet, simplifying site maintenance.
@import
You might encounter CSS examples using @import. This is known as an ‘at-rule’ and offers an alternative syntax for including CSS. It allows you to load additional CSS sources into a current stylesheet, whether it’s document-level or external. You can use @import as an alternative to <link>. For example:
...can also be written as:
Why use @import? A key benefit is that it allows you to import one stylesheet into another, enabling styles to cascade through multiple stylesheets.
A common use case is when embedding fonts, from services such as Google Fonts. This will involve two 'at-rules', @font-face and @import.
Inline Styles with the style Attribute
It should be noted that styles can also be added via the style attribute. In this way CSS properties can be directly associated with any HTML element.
Inline styles can override styles from external stylesheets or <style> blocks. This can be useful for quick fixes or testing styles. However, when mixed in with your HTML in this fashion they become repetitive, verbose and difficult to maintain.
When Worlds Collide
tldr; Avoid rules that conflict. If they do as a rule of thumb the nearer the rule to the content the more likely it will be applied.
What happens when multiple CSS rules attempt to style the same content?
In CSS, the concept of 'specificity' determines which style rules take precedence when multiple rules target the same element. It is calculated based on the types of selectors used. When conflicting styles apply to an element, the rule with higher specificity wins.
As inline styles are as close to the content as possible they will generally overrule conflicting styles from an external or document-level styles.
Further to the location the style, the browser uses a points based system to calculate which properties should be applied.
- Inline Styles: Highest specificity. Inline styles have the most weight and will override both document-level and external styles, regardless of other selectors.
- ID Selectors: High specificity. Rules targeting an element by its ID (e.g., #header) have high specificity.
- Class, Attribute, and Pseudo-Class Selectors: Medium specificity. Rules targeting an element by its class (e.g., .container), attribute (e.g., [type="text"]), or pseudo-class (e.g., :hover) have medium specificity.
- Element and Pseudo-Element Selectors: Low specificity. Rules targeting elements (e.g., div, p) or pseudo-elements (e.g., ::before) have the lowest specificity.