Skip to content
Tech Shizz Logo

An Engineers Blog

  • TechShizz
  • blog

CSS | Classes and IDs and Span Tags

Posted on February 23, 2021 By rich No Comments on CSS | Classes and IDs and Span Tags

Classes

We can use Classes and IDs as a way to have multiple types of formatting for the same tags, so we might want a red paragraph and a blue paragraph. Classes can achieve this.

<p class="Red">This is my Red paragraph</p>
<p class="Blue">This is my blue paragraph</p>

Here is the CSS

p {
color: black;
}
p.Red {
color: red;
}
p.Blue {
color: blue;
}

If we want to make a class global (make it apply to ALL tags) we can simply remove the tag before the dot like this:

.Blue {
color: blue;
}

Now everything the class=”blue” will now be formatted with the style we dictate here.

IDs

IDs are very similar to classes, except they are expressed in CSS with a # symbol. Also, IDs are unique and can only be used for one element.

#ID1 {
color: Green;
}

Span Tags

We can use span tags to format small snippets of single words inline with CSS like this.

.spantag {
font-weight: bold;
}
<span class="spantag">This will be bold</span>

 

Post navigation

❮ Previous Post: Exchange Transport Service won’t start
Next Post: Message Tracking in PowerShell ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

Subscribe to our newsletter!

Recent Posts

  • How to implement a lightning-fast ransomware playbook
  • How to achieve defence in depth in your business
  • How to implement a SecOps team phishing response plan
  • How to block an Office 365 Sign-in correctly
  • Microsoft finally patched serious Exchange 0-day over a month old!

Recent Comments

    Archives

    • November 2022
    • July 2021
    • March 2021
    • February 2021

    Categories

    • Cyber Security
    • Uncategorized

    Meta

    • Log in
    • Entries feed
    • Comments feed
    • WordPress.org

    Copyright © 2023 .

    Theme: Oceanly News Dark by ScriptsTown