# Inline CSS vs Classes vs IDs

**URL:** <https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102>\
**Category:** Styling (CSS)\
**Created:** [March 13, 2021, 12:36pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102 "2021-03-13T12:36:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [March 13, 2021, 12:36pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/1 "2021-03-13T12:36:07Z")

</div>

Hello,

Because Pinegrow and coding with it is still quite new to me, I wanted to ask the following simple question:

**What is the best / common way to work with inline CSS / classes / IDs?**

When I want to use a style on several objects, I use classes.

But often I style objects that only appear once on a website. Is it better than to use an ID? Or does it make sense to create a class for them? Or is it better to just use inline CSS? I heard that you shouldn’t use inline CSS because it makes the site slow…

---

<div class="post-metadata">

**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [March 13, 2021, 2:03pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/2 "2021-03-13T14:03:57Z")

</div>

Hi @Riccarcharias,

ID is a unique element on the page for example `#carousel-1 #carousel-2`

Class can be used on multiple elements on the page for example `.carousel-border-red`

When you want to style all elements at ones you use `*`

In HTML for example:

`<div id=carousel-1 class="carousel-border-red"></>`

`<div id=carousel-2 class="carousel-border-red"></>`

In CSS example:

`#carousel-1 {`  
`width: 100%;`  
`height: auto;`  
`}`

`#carousel-2 {`  
`width: 700px;`  
`height: 400px;`  
`}`

`.carousel-border-red {`  
`border: solid 2px red;`  
`} `

`* {`  
`background-color: gray;` all elements get this background color  
`}`

When there is no special reason you always use a external CSS file.

Regards,

David

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [March 13, 2021, 2:40pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/3 "2021-03-13T14:40:07Z")

</div>

Hi @Riccarcharias,  
The only other thing to keep in mind when using ids for styling is that they have a higher specificity than classes, which can be good or bad. If you have something like:

```auto
#carousel-1 {
border: solid 2px green
}

```

It would over-ride:

```auto
.carousel-border-red {
border: solid 2px red
}

```

This can either be the desired behavior or trip you up. Just something to keep in mind.  
Cheers,  
Bob

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 13, 2021, 4:02pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/4 "2021-03-13T16:02:33Z")

</div>

Hi, this explains it quite good.  
it covers @RobM explanation of specificity and also points out the good times to use ID.

Anchors internal page links and sections, or when you have one particular thing that needs to be different from all the other things that use the same classes… but  
in that case… you COULD just add another class to that thing, which is also more specific to that element, thereby making that ID case redundant.  
and… you cold also reuse that class somewhere else.

If it was an ID, related stying you couldn’t.  
since ID can only be used once, as you already know.

So Less code redundancy.

> **[Why would I ever use an ID instead of a class? | Treehouse Community](https://teamtreehouse.com/community/why-would-i-ever-use-an-id-instead-of-a-class)**
>
> Participate in discussions with other Treehouse members and learn.

But basically as a general rule of thumb… dont use Inline Styles, no real reason too, unless rapidly prototyping…but even then, if your happy with the result, you then have to go over the same code again to REMOVE all the styling to a more sensible source yourself (preferably external stylesheet, followed by the next option of having all the styles in the **head** of your page  
because otherwise, you have to sift through your web page code to find and change styling.- or use search and replace tools.

But then **Tailwind** etc… use inline _utility_ classes…everywhere, lots of them…er ok.  
So that blows that out of the water… but, TW implementation seems a little Retro to me.  
But I have hardly used it, for that very reason, so others here could probably give more informed answer on the logic of that.

---

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [March 15, 2021, 4:10pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/5 "2021-03-15T16:10:40Z")

</div>

Thanks for your answer. That means that classes are the way to go - even if I have a unique element where I need to create a class assigned to just one element…

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 15, 2021, 4:13pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/6 "2021-03-15T16:13:10Z")

</div>

Bingo!  
Yes, seems screwy logic,when youve gone to the trouble to learn them, but that was the approach taken with Chris Coyer, web guru on his site,some time ago.

Those other 3 use cases are ok though

---

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [March 15, 2021, 4:13pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/7 "2021-03-15T16:13:14Z")

</div>

Hi,

Thanks for making this point clear. 🙂 It’s really something to keep in mind

---

<div class="post-metadata">

**Author:** ![tekreativ](https://avatars.discourse-cdn.com/v4/letter/t/87869e/32.png) [@tekreativ](https://forum.pinegrow.com/u/tekreativ)\
**Post date:** [March 20, 2021, 6:10pm UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/8 "2021-03-20T18:10:01Z")

</div>

The answer is best broken down to “why” and “when”:

### Why

- Best practices are to use class definitions **in a separate CSS file** provide the greatest consistency, flexibility, and reusability.

### When

- Since ID attributes will only apply to the first instance on a page, use them only when greater specificity is needed. Afer all, it’s the same amount of work to create an ID definition as a class definition and the creative process involves discovery. Be prepared for what you didn’t expect.
- Use inline styles only for prototyping and troubleshooting.

### A final note

Original HTML was a production nightmare: nested tables and only inline formatting. Inline styles are a giant step backwards, especially on a production website. “Retro” can be cool but save it for your visual design.

Inline styles only benefit the person typing the code _now_ and create trouble everywhere else in the design and production of a website.

The use of CSS classes benefits your site visitor with a consistent experience, your visual designers with control over presentation, and your frontend developers with ease of maintenance.

---

<div class="post-metadata">

**Author:** ![Riccarcharias](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/riccarcharias/32/4051_2.png) [@Riccarcharias](https://forum.pinegrow.com/u/Riccarcharias)\
**Post date:** [March 22, 2021, 9:13am UTC](https://forum.pinegrow.com/t/inline-css-vs-classes-vs-ids/5102/9 "2021-03-22T09:13:43Z")

</div>

Thanks for this great summary!