Mastering the Basics: CSS Tag Selectors
Style elements by their HTML name to build a consistent and maintainable foundation for your website's design.
Lesson Title
This is a sample paragraph. The styles applied in the code editor will affect this text.
Welcome! Today, we'll cover the most fundamental building block of CSS: the tag selector.
/* Let's begin! */ The Anatomy of a Tag Selector
A tag selector targets an HTML element directly by its name. The syntax is simple: you write the tag name, followed by curly braces { } that contain your CSS declarations. For example, to style all paragraphs, you would use p { /* styles here */ }.
Why Use Tag Selectors?
Tag selectors are ideal for establishing broad, foundational styles for your entire website. They're perfect for setting default typography (like fonts and colors on the body tag), standard link appearance, or consistent spacing for headings.
Common Use Cases
A common use case is setting a baseline for your typography. By applying styles to the body tag, all text elements within the page will inherit these properties unless they are overridden by a more specific selector. This ensures a consistent look and feel.
Understanding Specificity
Tag selectors have the lowest specificity. This means that a style applied with a class selector (e.g., .highlight) or an ID selector (e.g., #main-header) will always override a style applied by a tag selector. This makes them safe for defining default styles.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
{
font-weight: bold;
}Practice Example: Code Editor
Write a CSS rule to make all <p> elements have a font-size of 18px.
Practical Guide to Foundational Styling
Tag selectors are the bedrock of any stylesheet. They allow you to define default, site-wide styles that create a consistent and predictable user experience. Let's explore some core examples.
1. Setting a Typographic Baseline with `body`
To ensure all text on your site shares a consistent font and color, apply styles to the body tag. Nearly all text elements will inherit these properties, giving your site a unified feel.
body {
font-family: Georgia, serif;
color: #333;
line-height: 1.6;
}2. Normalizing Link Styles with `a`
By default, links are blue and underlined. You can easily create a custom, consistent style for all anchor (a) tags, which is fundamental for branding and usability.
a {
color: #059669; /* A nice teal */
text-decoration: none; /* Remove underline */
font-weight: bold;
}
a:hover {
text-decoration: underline;
}3. Consistent Spacing for Sections
To ensure your main content areas are well-spaced, you can apply a default bottom margin to all section or article tags. This creates a vertical rhythm and improves readability.
section {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #e5e7eb;
}First Section
Content goes here.
Second Section
More content here.
Practical Takeaway: Start with tag selectors to build your "default" look. This "macro" styling approach simplifies your CSS and makes your site easier to maintain before you add specific class-based styles.