Small interactions can make a webpage easier to use: opening a tip, changing a setting, or reusing an interface component.
What You Need to Know
Inline styles live on one element, embedded styles live in a style element, and external styles live in a separate file. External CSS is usually easier to share across multiple pages.
In this example: style an alert using three approaches.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<link rel="stylesheet" href="styles/site.css">
<style>
h1 { color: navy; }
</style>
<h1 style="margin-bottom: 1rem;">Learning CSS sources</h1>
<p>The same page can receive rules from three different places.</p>Let’s Read the Code
- <link>: Link connects the document to metadata relationships or resources; it is not a visible anchor.
- <style>: Style contains CSS rules for the page.
- rel: Rel defines a relationship, such as a canonical page URL or stylesheet.
- href: Href is the URL to a related resource or destination.
What the example shows: The link loads a CSS file, style holds rules in the document, and style="" holds declarations on an element.
What Happens in the Browser?
When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.
Start with native behavior. Details, dialog, and popover each solve a different interface problem. Choose the simplest control that actually matches what a visitor wants to do, then test focus and dismissal as well as appearance.
Your Turn
Move the margin-bottom rule into the external stylesheet.
Common Beginner Mistakes
- Assuming new HTML syntax works in every browser without testing.
- Inline style is difficult to reuse across many elements and should not become the default for site styling.
Key Takeaways
- Inline styles live on one element, embedded styles live in a style element, and external styles live in a separate file.
- <link>: Link connects the document to metadata relationships or resources; it is not a visible anchor.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.