When must I use "=" or ":"?

HTML-CSS
1

Hello,

Is there a simple way to remember when you are supposed to use “:” or “=” to define value to any type of anchor ? This may seem like a stupid question, but as I’m travelling through CSS and HTML, it seems obvious that “:” is used for CSS and “=” for HTML, but that may just be as stupid of a guess than the question itself, or evolve differently based on other languages.

I just want to make sure what I learn doesn’t go to waste or loose to much time afterwards because I didn’t get it at first.

Thx

2

Hi @Shalvus, I’m not sure if I’m answering your question or not. I really hope that what I type here doesn’t make it more confusing.

In HTML, you use the equal sign to;

  • give a name to an id within an HTML element;
    for example; <div id = "idName"> </div> where idName is a unique name used only once
  • give a name to a class within an HTML element;
    for example; <div class = "className"> </div> where className can be used more than once
  • set a hypertext reference for an anchor element
    for example; a href="https://www.google.com>"Google</a>

In CSS one uses the colon to separate the value and property in a CSS declaration
for example:

.nav-link {
  color: #9099a8;
}
2 Likes
3

It does seem quite confusing with all the different ways to write the same thing.

The equal sign (=) is called the assignment operator which is used to assign values to a variable.
In HTML, it is used to assign value to an attribute.

<h1 class="superBold">Hello World</h1>

In CSS, the colon ( : ) is used to assign property with a value.

h1 {
   font-weight : 999;
}

Hope that clears it up for ya.

2 Likes
4

Well, that doesn’t really clarify anything more than what I already understood.
Basically, can we consider that :

  • HTML code = Equal sign
  • CSS code : Colon sign

Or is this too big of a stretch and might lead to mistakes in specific cases? If yes, could you give some examples?

Thanks anyways for the answers, that does give some level of detail though.

5

In general you are correct … but for reasons that should become more clear once you get into the Javascript section.

CSS is basically a bunch of Objects with Key / Value pairs.

#htmlID = {
key1: value1;
key2: value 2;
..etc
};

#htmlID above is a “variable” that we set = to an “object” (CSS doesn’t use =, just showing for visual)

Inside this object we set the Keys/Properties to a value with “:”

Again, I think it will become more clear when you get into Javascript objects.

2 Likes
6

I’m going to say that as you stated it here then yes, you are correct in your understanding. I’m also saying this with the caveat that this is true for external CSS styling and you understand that if using internal CSS or inline CSS then even though it is CSS it appears within the HTML file.
On a side note, fCC teaches that which is preferred, external CSS.

1 Like
7

@Roma @pjonp Thank you both. I get a better understanding of how it works.
Also about what @pjonp said, I assume whether it’s ID or Class changes nothing but was just an exemple, right?

Didn’t touch JS yet, but I might give it a go. I’m still having doubts between that, Python or a few other languages, but it does seem like at least learning the basics of JS would be interesting.

Thanks again :smiling_face_with_three_hearts:

8

Correct. I was just trying to show that CSS is creating objects.

I personally went with JS because I had some past experience with it and that’s what the curriculum here follows. It is pretty challenging though. And if you want to build front end projects, it’s extremely helpful to know.

Really depends on what YOUR goals are though. I look forward to Python myself, hopefully early 2020 :grinning:

9

I might follow your path ! :triumph:

10

TL;DR HTML and CSS are often used together in the same document. To help distinguish between the two different languages, CSS uses a different syntax than HTML.

CSS was originally proposed by Håkon W Lie in 1994 and if you look at the original proposal, you’ll see that the original syntax did indeed use the equals sign for assigning values to properties.

However, this was just a very quick draft proposal and one of the people who responded to the draft was Bert Bos. He’d been taking a different approach by actually building a browser that supported stylesheets rather than just proposing a stylesheet language that would then be (hopefully) implemented by browser vendors. He didn’t use the equals sign but instead used the colon sign. I suspect that this decision was based on his practical experience of getting HTML and a stylesheet language to work together. From his notes, it looks like he wasn’t a big fan (initially) of using external stylesheets, and therefore, he needed to use a syntax for the stylesheet language that would be distinct from the already well-established HTML syntax, otherwise that might have caused problems for the HTML parser.

Bert Bos gradually started working with Håkon Lie on the draft specification of CSS, and according to the www-style maling list from 1995, there was a fear that any proposed CSS property names might conflict with new (future) HTML tags, so around Oct/Nov 1995 the syntax changed, dropping the = and going with the : instead.

(@pjonp this predates the development of the CSSOM by about 3 years so I think it was an implementional decision rather than anything else, although it’s interesting to see how Lie used dot notation back in 1995 which is generally associated with OOP :slightly_smiling_face:)

2 Likes