CSS Syntax
Learning outcomes:
- What are properties, values, and style declarations
- What are selectors, declaration blocks, and rulesets
- What are comments
- Case-insensitivity of CSS
Introduction
In the previous chapter, we got a detailed introduction to the three sites of leveraging CSS styles in HTML — the style
attribute, the <style>
element, and last but not the least, an external style sheet.
We also quickly went through some terminology regarding CSS, such as style declaration blocks, style declarations, property, value, and so on.
In this chapter, our aim is to make intuition of all this terminology and to appreciate the syntax of CSS style sheets. We'll explore a lot of new formal terminology plus some other concepts in CSS worth knowing about.
So without further ado, let's get into business!
Property, value, and declaration
Let's start with a simple question: What stylistic aspects of an HTML element can you think of that can be changed?
To give you a headstart, we have the color of the element. It can be changed. Another example would be its font size (i.e. size of each character in the text).
Well, there are numerous aspects — more than we can enumerate in one paragraph.
To name a few, we have the color, background color, font size, font weight (thick or thin), outer spacing, inner spacing (between the edges of the element and its content), borders, and many more other aspects.
In CSS, each of these stylistic aspects is referred to as a style property.
A style property is commonly just referred to as a property (the 'style' is already implied because all properties in CSS are style properties).
The value of a property in CSS is referred to as... well... its value. A property and its value are separated by a :
(colon) in CSS (with an additional space after the :
for better readability, although this is optional):
Here's the general syntax of defining a property:
property: value
Together, a property and its value are collectively referred to as a property-value pair.
For example, color: red
, as we saw in the previous chapter, is a property-value pair. The property here is color
and its value is red
.
More formally, a property-value pair in CSS is called a style declaration.
When we define a property-value pair in CSS, we are declaring another style to be added to the underlying HTML element (or set of elements). Each property-value pair is basically another declaration.
And hence the name, 'style declaration.'
Quite sensibly, CSS doesn't constrain us with being able to only leverage one single declaration; we can have as many declarations as we want to.
Speaking of which, multiple declarations are separated by a ;
(semicolon). In general, this could be expressed as follows:
property1: value1; property2: value2; ...
As with HTML, spacing is optional in CSS. So, the space here right after every ;
and before the property is optional.
Selector, declaration block, and ruleset
When we're working in a style sheet, because we aren't within the particular HTML element (or set of elements) that we wish to style, we have to have some way to instruct CSS which elements to select.
This set of elements then gets a whole chunk of styles to apply.
Notice the emphasized phrases in these two sentences. They both represent concepts that we've already learnt in the previous chapter, albeit on the outskirts. Can you recall them?
Well, we need a selector and a declaration block.
Let's start with the former.
A selector literally does what it sounds to — 'select' given elements.
Once selected, the next immediate thing that comes after a selector is a declaration block (a whole chunk of styles).
A declaration block is, once again, as the name sounds — a 'block' of style declarations. It is denoted by a pair of curly braces ({}
). Within these braces, we put all of our declarations.
Syntactically, this looks something like this:
selector { property1: value1; property2: value2; ... }
However, when inside a declaration block, it's more common and readable to give each declaration autonomy of its own by placing it on a separate line:
selector {
property1: value1;
property2: value2;
...
}
Coming back to the idea of a selector, there are many kinds of selectors in CSS.
We shall start discovering them in CSS Selectors but some common ones are stated as follows:
- Element selector — selects all elements with the given HTML tag name. For example,
p
which selects all<p>
elements;a
which selects all<a>
elements; and so on. - Class selector — prefixed with
.
, selects all elements with the givenclass
. For example,.active
selects all elements with theclass
attribute containing"active"
. - ID selector — prefixed with
#
, selects the first element with the givenid
. For example,#ref
selects the first element with theid
attribute set to"ref"
.
Together, the selector and its declaration block is called a ruleset, or simply a rule.
So, for example, in the following code:
p {
color: red;
}
we have one ruleset. The selector of this ruleset is p
and its declaration block contains only one declaration, a color
declaration.
We can have as many rulesets in a style sheet. They are separated by just whitespace.
Here's an example:
p {
color: red;
}
p {
background-color: yellow;
}
We have two rulesets for customizing the styles of <p>
elements.
And, more noticeably, we have a new property: background-color
.
background-color
does?Well, background-color
sets the background color of the element in question. How simple.
And just like red
is a value that we could assign to color
, we have yellow
(and green
, blue
, pink
, orange
, purple
, indigo
, and hundreds others).
Let's see the output this CSS produces for the following HTML:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
This is a paragraph
This is another paragraph
Flawless!
Comments
Drawing another similarity between HTML and CSS — in fact amongst all computer languages — just like HTML has the concept of comments, so does CSS.
To reiterate on the idea:
The sole purpose of comments is to 'comment.'
And what does that mean?
Well, sometimes code contains certain things that might not be as apparent later on as they currently are while we're coding.
For instance, imagine you devised a clever mathematical trick to compute the width of an element in your CSS style sheet. Currently, while you're drafting the trick and actively writing CSS code in the style sheet, you don't need to be explained what the special trick code is doing.
But after a span of a month or so of you not looking at your CSS code, you might yourself go crazy in understanding your code, in particular the trick and how it's being performed.
This is where a CSS comment could help — it could help explain code.
In CSS, there is one and only one way to denote a comment: using /* */
. The text of the comment goes in between /*
and */
.
Consider the following:
p {
/* Apply a red color to the text */
color: red;
}
We have the same CSS as shown above, this time with a comment describing what we're trying to achieve with the color: red
declaration.
In real-world style sheets, such trivial comments are useless. Certainly, everyone knows that color: red
applies a red color to the text! The comment is only included to demonstrate the syntax of writing one in CSS.
Always make sure that your comments deliver value to the reader of the code, describing something that isn't apparent.
The comment could go anywhere: before the declaration, on the same line; or right after the declaration, again on the same line; before the entire ruleset, after the ruleset — just about anywhere:
/* A comment could go here */
p {
/* here */
color: red; /* here */
/* here */
}
/* even here */
Furthermore, a CSS comment isn't bound to be fit in one line; it can span multiple lines, as demonstrated below:
p {
/* Following is a 'declaration'
'color' is a property.
'red' is the property's value.
*/
color: red;
}
Quite elegant, isn't it?
When CSS code is parsed, all comments are stripped off and the remaining code is then fed into the system meant to further process the CSS.
Now, because comments are stripped off, another common case people utilize comments for is to exclude certain code from being applied without actually removing it from the file.
For example, consider the following code:
p {
color: red;
}
If we wish to remove the color
declaration, one obvious choice is to actually remove the declaration code, as follows:
p {
}
However, there is no need to do so; instead, we can wrap the declaration with /*
and */
— an action often referred to as commenting out the code:
p {
/* color: red; */
}
In this way, if we need to reinstate the style, we just need to uncomment the declaration.
Case-insensitivity
Remember how HTML is case-insensitive? For instance, the tags <audio>
and <AUDIO>
both represent the exact same element.
The same is the case with CSS — it's case-insensitive as well. Hence, selectors, properties and values can either be in uppercase or lowercase.
This means that the selector p
is the exact same as P
; the property color
is the exact same as COLOR
; the value red
is the exact same as RED
.
Following is a concrete proof:
p {
COLOR: RED;
}
This is a paragraph
But even though case-insensitivity is a feature of CSS, it's sparingly used.
In fact, I'll go as far as saying that it's never used! It looks really cryptic and screaming-like to write code in uppercase. It's not as readable as lowercase code and I just don't think anyone would want to use it ever.
What do you think?
Spread the word
Think that the content was awesome? Share it with your friends!
Join the community
Can't understand something related to the content? Get help from the community.