1

I am currently working through the Codecademy HTML course. They say that:

properties are defined within selectors by defining a property and a value. They are separated with a colon and delineated with a semi-colon.

So the semicolon indicates to HTML the relative positioning of the property?

How does this system of colon and semi-colon notation work? How does the computer understand this?

double-beep
  • 5,031
  • 17
  • 33
  • 41
Aaron Lloyd
  • 19
  • 1
  • 3
  • I understand that the final question is hard to answer. But it is a fascinating thought. – Aaron Lloyd Sep 08 '15 at 18:06
  • the answer is , it makes css parsing much easier, than without having delimiters to delimit parts of declarations, like colons and semi-colons, it is doable without, but makes parsing very hard – Nikos M. Sep 08 '15 at 18:14
  • 2
    I'd argue that it is harder to answer this in terms of CSS than it is to answer in terms of a conventional, *actual* programming language (calling CSS one is a *huge* stretch). Because in CSS, semicolons may only appear with the traditional "statement delimiter" meaning in very specific locations. – BoltClock Sep 08 '15 at 18:19
  • I see Nikos M. This makes sense. – Aaron Lloyd Sep 08 '15 at 18:39
  • Related: *[Will CSS 3 still allow omitting final semicolons?](https://stackoverflow.com/questions/11062615/will-css-3-still-allow-omitting-final-semicolons)* – Peter Mortensen Nov 19 '19 at 12:27

6 Answers6

3

The colon goes after a property and before the value, and the semi-colon is at the end of a statement. So for CSS like color: red; color is the property and red is the value.

cocoa
  • 3,806
  • 7
  • 29
  • 56
  • would be better to explain also why this works or why makes parsing easier (this is why it works). One can have css without semi-colons, but makes parsing very hard – Nikos M. Sep 08 '15 at 18:13
0

Delimiters are character[s] used to separate one field from another. They need to be unique, as to not be confused with other syntax. For example in CSS

    .aClass, #anID, aTag { border      : 1px solid #000; color: #fff; }
     /* ^-- 3 selectors,   ^property     ^-- Value -- ^  ^ Next property
      * comma delimited
      */

As you can see, there are quite a few delimiters (CSS doesn't care how many spaces, if any, are between each word).

  • Selectors pick the elements that the style will apply to and are comma separated
  • All of your rules will fall into the block surrounded by {}
  • A property name is the type of style to be applied and is followed by : and, then the accompanying value
  • The end of that rule is marked by a ';', which separates it from the next.

An easy way to think about it is importing a text file in excel and have it split the columns by spaces or tabs.

odony
  • 4,027
  • 17
  • 27
Gary
  • 13,303
  • 18
  • 49
  • 71
0

Your question is basically "How do programming languages work?"

The computer reads the characters and depending on if it's a colon or semi-colon, it does something different.

For example, for color: white; the web server processing the code understands that all text up to the colon is the property (color), and all text after the colon and before the semi-colon is the setting of the property (white).

Everything after the semi-colon is something new, generally placed on a new line, but it could also all be placed on one line as long as a semi-colon separates them.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
9Deuce
  • 689
  • 13
  • 27
0

In CSS, the colon separates syntax, and the semicolon denotes that that particular styling is over.

For example:

position : relative ;

The statement above is saying that you want the CSS to be looking at the position attribute, and you want it to be of a relative nature.

The reason that the semi-colon is used is because you could have multiple attributes separated with a space.

Such as:

padding: 5px 2px 1px 8px;

Here, this is saying, I want to change the padding of this element I have selected. But I don't want it to be even. I want the top to be 5 pixels, the right to be 2 pixels, the bottom to be 1 pixel and the left to be 8 pixels and that is all.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Nick Holdsworth
  • 101
  • 5
  • 1
    Furthermore, you can even have line breaks in values! Something like having multiple gradients for a single `background` benefits from line breaks to make the property a lot more readable. – Scott Sep 08 '15 at 18:20
0

Semicolons are used to separate multiple declarations, but are not needed to terminate them. However, it is good practice to include the semicolon to terminate a declaration to avoid confusion when the code is maintained in the future. You can reference this post: Leaving out the last semicolon of a CSS block

Community
  • 1
  • 1
cyberdudette01
  • 35
  • 5
0

Preview

The value of the semicolon comes from the sequence of values that follow up each other, within the same property.

Otherwise, when the property has just one value, the semicolon becomes useless.

Anyway, the importance of this anatomy is to separate the CSS sentence elements, so they won't get overlapped, visually and practically.

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
IslamAlsultan
  • 1
  • 1