CSS_008_Text Styling

In this post, we’ll explore how to style text using CSS. We’ll start with basic styling and gradually build up to more advanced concepts, explaining everything step-by-step. We’ll use HTML paragraphs (<p>) and classes to apply styles, and I’ll guide you through spacing, specificity, and special characters like the tick mark (✓).

Part 1: Basic Styling with a Paragraph and Class

Let’s begin with a simple example. In HTML, we typically write content first and then style it with CSS. Here’s a basic setup:

<style>
  .article-heading {
    font-size: 20px;
    color: rgb(50, 50, 50);
  }
</style>

<p class="article-heading">
  Exploring Space Travel with NASA Engineers
</p>

Output:

Explanation:

• HTML: The <p> tag defines a paragraph, and we’ve added a class called article-heading to target it specifically with CSS.
• CSS:
• font-size: 20px; sets the text size to 20 pixels.
• color: rgb(50, 50, 50); makes the text a dark gray color using RGB values (red, green, blue).
• This is basic styling — changing the size and color of the text. Classes like .article-heading let us apply styles to specific elements.

Part 2: Adding a Second Paragraph and Default Spacing

Now, let’s add another paragraph and talk about spacing. HTML elements like <p> come with some default margins (space around them), which we can adjust.

<style>
  p {
    font-family: Helvetica;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .article-heading {
    font-size: 20px;
    color: rgb(50, 50, 50);
  }

  .article-date {
    font-size: 12px;
    color: rgb(100, 100, 100);
  }
</style>

<p class="article-heading">
  Exploring Space Travel with NASA Engineers
</p>
<p class="article-date">
  2.5M readers · 3 days ago
</p>

Output:

Explanation:

Get CodeAddict’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Default Styling for <p>:

• font-family: Helvetica; sets a clean, modern font for all paragraphs.
• margin-top: 0; removes the default top margin.
• margin-bottom: 10px; sets a small space below each paragraph (overriding the browser’s default, which is usually around 16px).

Classes:

• .article-heading styles the title with a larger size and darker color.
• .article-date uses a smaller size and lighter gray for a subtle look.
• Browsers apply default margins to <p> tags (typically top and bottom). We reset them to keep our design consistent.
• Why Adjust Margins? Browsers apply default margins to <p> tags (typically top and bottom). We reset them to keep our design consistent.

Part 3: Specificity (Class vs. <p>)

You might wonder: if <p> has a margin-bottom: 10px; but .article-date doesn’t specify a margin, which one applies? Let’s clarify:

• CSS Specificity: When multiple rules apply to an element, the more specific one wins. A class (like .article-date) has higher priority than a generic tag selector (like p). So, if .article-date had margin-bottom: 15px;, it would override the 10px from p. We’ll dive deeper into specificity later, but for now, know that classes beat tags.

Part 4: Finding Special Characters (e.g., Tick Mark ✓)

Let’s add a verified tick mark (✓) to our date paragraph:

<p class="article-date">
  2.5M readers · 3 days ago ✓
</p>

But how do we find symbols like ✓? Search Google for “HTML entity tick mark” or “HTML special characters.” You’ll find sites listing codes like &#10003; (the HTML entity for ✓). In your HTML, write:

<p class="article-date">
  2.5M readers · 3 days ago &#10003;
</p>

Part 5: Using <span> for Inline Styling

Now, let’s introduce the <span> tag, which is great for styling small parts of text within a paragraph. Unlike <p>, <span> has no default styling — it’s a blank slate.

<p class="promo-text">
  Get the latest updates on space missions. <span class="signup-link">Sign up now</span>
</p>

<style>
  p {
    font-family: Helvetica;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .promo-text {
    font-size: 16px;
    color: rgb(70, 70, 70);
  }

  .signup-link {
    color: blue;
  }

  .signup-link:hover {
    text-decoration: underline;
  }
</style>

Explanation:

• <span>: It doesn’t add margins or line breaks — it’s inline, meaning it stays within the flow of the text.

.signup-link:

• color: blue; makes the “Sign up now” text blue.
• :hover adds an underline when you mouse over it, enhancing interactivity.
• This is useful for styling specific words or phrases without affecting the whole paragraph.

Part 6: Putting It All Together

<style>
  p {
    font-family: Helvetica;
    margin-top: 0;
    margin-bottom: 10px;
  }

  .article-heading {
    font-size: 20px;
    font-weight: bold;
    color: rgb(50, 50, 50);
    line-height: 26px;
  }

  .article-date {
    font-size: 12px;
    color: rgb(100, 100, 100);
  }

  .article-summary {
    font-size: 14px;
    color: rgb(80, 80, 80);
    width: 300px;
    line-height: 20px;
  }

  .signup-link {
    color: rgb(0, 102, 204);
    cursor: pointer;
  }

  .signup-link:hover {
    text-decoration: underline;
  }
</style>

<p class="article-heading">
  Exploring Space Travel with NASA Engineers
</p>
<p class="article-date">
  2.5M readers · 3 days ago &#10003;
</p>
<p class="article-summary">
  Learn about the future of space exploration. <span class="signup-link">Join our newsletter</span>
</p>

Output:

Key Points:

-Spacing:

• line-height controls the vertical space between lines within a single paragraph, improving readability (e.g., line-height: 20px;).
• margin-top and margin-bottom adjust the space between paragraphs. For example, margin-bottom: 10px; adds space below each <p> to separate them cleanly.

-Classes:

• Using the p selector, we can define general styling (like font-family or default margins) that applies to all paragraphs, keeping the code clean and consistent.
• Specific classes (e.g., .article-heading, .article-date) allow us to override or add unique styles to individual paragraphs for customization.

-Span:

• The .signup-link class in the example styles a specific portion of text within a <p> tag (e.g., “Join our newsletter”). It’s inline, meaning it doesn’t disrupt the paragraph’s flow, and can include effects like color or cursor: pointer.
• Adding :hover (e.g., .signup-link:hover) enhances interactivity, such as underlining the text when hovered over.

-HTML Entities:

• Special characters like the tick mark (✓) are added using HTML entities, such as ✓, which you can find by searching “HTML entity tick mark” on Google or reference sites like W3Schools.
• These entities let you insert symbols directly into your HTML without needing extra styling or images.