Basic CSS Formatting Question

When adding CSS elements within HTML, I’ve noticed some use single quotes like this ’ ’ to surround the element ‘color: red’

I’ve also seen others use double quotes instead " ". Are both correct?

Hey, @matthewhayes39512769!
“color: red” is not an element, it is an attribute \ value pair of a selector. CSS follows this general pattern:

selector {
  attribute: value;
}

For example, here is how it might look:

h1 {
  color: red;
}

Now, to the question about the quotes: in HTML and CSS either will do. Here is the reference: w3.org
The best way is to pick one style and stick to it. You might want to check out what Google has to say on the issue of style for different languages including HTML: link

The only thing that might become an issue is when you need to use a mix of both styles. Consider this example:

<img src="#" alt="Mum's pizza" />

Had I used single quotes for alt’s value, I might have cut off the rest of the description. That’s why in such cases the numeric character references might come in handy: &#39;
image

With other languages it is different and may lead to errors, for example in Python.

Cheerio :smiley:

2 Likes

The HTML purists among us prefer to always wrap attribute values in double quotes. It’s easy to be consistent. Leave the single quotes for JavaScript. As for CSS, single quotes around font names, and such are less bulky.

font: 'Times New Roman', serif;

but double quotes are no less appropriate.

3 Likes

CSS Nomenclature

Selector Ruleset

selector {

}

Declaration Block

selector {
  /* everything in and including the end braces */
}

Declaration

selector {
    property: value;  /* declaration */
}
1 Like

What @angryteach_dev @mtf are both right but yes you can use both single and double-quotes. Like Roy said use single quotes to HTML and CSS and leave double quotes to JS.

2 Likes

If double-quotes are recommended, then can you tell me why Codecademy is using the single quotes for their HTML here?

Also, Codecademy was using only double quotes during their HTML course but in this CSS course,


they have reverted to single quotes. See attached.

1 Like

Every author has their own nuances. Quit beleaguering this question and get on with it. Use quotes where needed. Who cares what you use?

Lol. Right. As a newbie and (detail-oriented kinda guy) seeing this drives me sort of nuts.

Yeah, the programming world is full on little (seeming) inconsistencies and contradictions. The key is in knowing how to prioritize issues. If we get hung up on the little things we may miss more serious ones. Syntax is at the bottom of the priority list, even as important as it is. Logic and usage are higher up the food chain. There being no one absolute way to perform most program functions, we’re bound to find stuff that doesn’t make sense or doesn’t fit with our own perceptions and ideas. Expect this a lot.

1 Like

Doing the front end dev path & going from HTLM to CSS, the most confusing part was figuring out why they changed to single quotes haha. It has me second guessing myself, they don’t seem to explain it either.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.