ADVERTISEMENT

CSS Syntax and Selector

Telegram Group Join Now

ADVERTISEMENT

CSS Syntax and Selector

CSS Syntax and Selector
CSS Syntax and Selector

 

ADVERTISEMENT

ADVERTISEMENT

A CSS ruleset/rule is composed of a selector and a declaration block.

The selector or a group of selectors targets the elements we want to style. The declaration blocks are grouped in blocks. Each declaration block contains CSS declarations which are wrapped by an opening curly brace { and a closing curly brace }.

ADVERTISEMENT

CSS declarations or declarations are contained inside a declaration block. Each declaration has to be separated by a semicolon; otherwise, the codes won’t work. It is allowed not to put a semicolon in the last declaration.

ADVERTISEMENT

A CSS declaration is composed of a pair of a property and a value separated by a colon.

property: a human-readable identifier that indicates which stylistic feature to change
value: it is given to a property that indicates how the specified stylistic feature should be changed

In CSS, there are more than 300 different properties and almost an infinite number of different values. Note! Not all pairs of properties and values are allowed. Each property has a specific list of valid values.

ADVERTISEMENT

Both properties and values are case-sensitive in CSS.

CSS Selectors in Css

The following are simple CSS selectors. There will be more CSS selectors lessons as you go through our lessons.

Element Selectors

It is the simplest way to target all elements of a given type.

ADVERTISEMENT

Example:

ADVERTISEMENT

 h1 {
font-weight: bold;
}
p {
color: green;
}

Class Selectors

Multiple elements can have the same class values.

CSS class selectors are very useful when targeting different elements.

The class selector consists of a dot (.) followed by a class name.

A class name is defined using the class attribute.

Example:

ADVERTISEMENT

.underlined-text {
text-decoration: underline;
}
.emboldened-text {
font-weight: bold;
}

An HTML element can have multiple class names separated by white space.

ADVERTISEMENT

Create Login and SignUp Page In HTML & CSS

ADVERTISEMENT

The example below selects both the <p> elements with the class=”underlined-text” and class=”underlined-text embloned-text” attributes.

ADVERTISEMENT

.underlined-text {
text-decoration: underline;
}

ID Selectors in CSS

ADVERTISEMENT

The ID selector is very useful when targeting a single element.

An ID selector consists of a hash (#) followed by an ID name.

An ID name is defined using the id attribute.

Example:

#blue {
background-color: blue;
width: 200px;
height: 200px;
}
#red {
background-color: red;
width: 200px;
height: 200px;
}

We can target only specific HTML elements with the given class or id.

Create Responsive Navbar Using BootStrap

The example below only selects <p> elements with the class=”red” and id=”green” attributes.

p.red {
color: red;
}
p#green {
color: green;
}

Grouping Selectors

Sometimes multiple CSS rulesets may have similar declarations. Take a look at the example below:

h1 {
font-family: Times New Roman;
color: green;
}
p {
font-family: Times New Roman;
color: green;
}

Looks inefficient right? Instead of repeating the same declarations, we can simply have a group of selectors in a CSS ruleset.
A group of selectors consists of selectors separated by commas.

Create A Travel Website Using HTML & CSS

Example:

h1, p {
font-family: Times New Roman;
color: green;
}

Comments in CSS

Comments can be used to explain CSS codes and make it more readable.

CSS comments are very useful for people who easily forget things like me!

They are not rendered by browsers.

A CSS comment starts with /* and ends with */.

Example:

p {
color: fuchsia;
/* a single line CSS comment */
}
/* a multi-line comment
cause we love CSS but we
might still forget what
some codes are for */
In this post, we learned about How we can use CSS Syntax and CSS Selectors.
If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT