Holla Tech-Learn

CSS Syntax

CSS is composed of style rules that the browser interprets and then applies to the corresponding elements in your document.
A style rule has three parts: selector, property, and value.

For example, the headline color can be defined as: 

h1 { color: orange; }

 

Where: 

Holla Tech - Learn CSS
The selector points to the HTML element you want to style.

NOTE!
The declaration block contains one or more declarations, separated by semicolons. Each declaration includes a property name and a value, separated by a colon.

Type Of Selectors
 

The most common and easy to understand selectors are type selectors. This selector targets element types on the page.

For example, to target all the paragraphs on the page:

p {
   color: red;
   font-size:130%;
}

NOTE!
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.

id and class Selectors
 

id selectors allow you to style an HTML element that has an id attribute, regardless of their position in the document tree. Here is an example of an id selector:

The HTML:

<div id=“intro”>
   <p> This paragraph is in the intro section.</p>
</div>
<p> This paragraph is not in the intro section.</p>

 

The CSS:

#intro {
   color: white;
   background-color: gray;
}
 

NOTE!
To select an element with a specific id, use a hash character, and then follow it with the id of the element.

Result: 

Holla Tech - Learn CSS

Class selectors work in a similar way. The major difference is that IDs can only be applied once per page, while classes can be used as many times on a page as needed.

In the example below, both paragraphs having the class “first” will be affected by the CSS:

The HTML:

<div>
   <p class=“first”>This is a paragraph</p>
   <p> This is the second paragraph. </p>
</div>
<p class=“first”> This is not in the intro section</p>
<p> The second paragraph is not in the intro section. </p>

 

The CSS: 

.first {font-size: 200%;}

 

NOTE!
To select elements with a specific class, use a period character, followed by the name of the class. Do NOT start a class or id name with a number!

Descendant Selectors
 

These selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many levels deep as you need to.

For example, to target only <em> elements in the first paragraph of the “intro” section:

The HTML:

<div id=“intro”>
   <p class=“first”>This is a <em> paragraph.</em></p>
   <p> This is the second paragraph. </p>
</div>
<p class=“first”> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>

 

The CSS: 

#intro .first em {
   color: pink;
   background-color:gray;
}
 

As a result, only the elements selected will be affected:

Holla Tech - Learn CSS

NOTE!
The descendant selector matches all elements that are descendants of a specified element.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT