Menu Close

Articles

Understanding CSS notation

CSS (Cascading Style Sheets) is a declarative language that controls how web-pages look in the browser. The browser applies CSS style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a web-page looks.

Learning CSS

CSS is one of the three core Web technologies, along with HTML and JavaScript. We use CSS to create a file that is refered by the HTML. We can use one CSS file for an entire website. We can have one page using two or more CSS files. Usually we style webpages but CSS can be used to style SVG or XML documents.

To learn CSS it means to understand CSS syntax and rules. In this article you will learn that CSS has a simple syntax. However every HTML element has it’s own attributes. Therefore learning CSS is difficult due to complexity of HTML elements. Some CSS rules are common for multiple HTML elements.

One rule start with a selector. This is a notation used to point one element, element type or a group of elements. Learning CSS require you to understand also the selector syntax. After the selector we create a declaration block using { … }. This contains rule items. Each rule item has an attribute value pair separated by “:” ending with “;” like this: “attribute:value;”. This is like JSON notation except the attribute is not double quoted.

Here is a simple example:

This is a file: styles.css, and this file must be attached to a HTML to work. 

/* The paragraph selector "p" 
   indicate that all paragraphs in the document 
   will be affected by this rule */

p {
  color: yellow;
  background-color: black
}

In this example we have a selector “p” that stands for “paragraph”. You can read this information above in the comments. So the CSS uses notation /* … */ to mark a comment like C++ language. There is no other indication in a .css file that the file is in fact CSS. It is only the comments and the rules. Of course the extension of the file is .css

External CSS in HTML

To apply CSS to HTML we use a special tag in the HTML header: <link rel=”stylesheet: href=”styles.css”>. This file styles.css is stored in the same location with HTML but we can use a relative path or an absolute path to the file like any other link.

 <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

An inline CSS uses the style attribute of an HTML element. Next example sets the text color of the <h1> element to blue:

 <h1 style="color:green;">This is green</h1>

Internal CSS

This is for smaller CSS declaration inside HTML using <style> tag.  This apply to a single page and can’t be reused to multiple pages. Notice the <style> tag can be used only in the <head> element of the HTML. It does not work if you use this tag in the body of HTML.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
   body {background-color: powderblue;}
   h1   {color: green;}
   p    {color: fuchsia;}
</style>
</head>
<body>

<h1>Heading Title</h1>
<p>Paragraph content.</p>

</body>
</html>

We have in this example 3 block declarations for body, h1 and p. Each rule apply to a single element type.

See also: Learn how to style HTML using CSS

Now you know the basics about CSS. However you will not be able to create CSS until you learn more about Selectors and Rules.

How selectors work

The selectors apply in cascade. That’s it why CSS is the cascade style sheet. We start the CSS file with general rules that apply to larger block elements. Then we create rules for smaller elements. After this we use class level selectors to apply CSS rules for specific group of elements. Last we create rules for individual elements identified by ID. The last rules are stronger and can overwrite previous rules that are more general.

Select multiple elements

To select more then one element we separate the element types using comas. Next we have two declarations. First declaration apply to h1 and h2 elements. Second apply to h3, h4, p and div elements.

h1, h2 {
    text-align: center;
    color: fuchsia;    
}

h3, h4, p, div {
    text-align: left;
    color: green;
}

Use ID selector

Before we can use this selector you must know that one HTML element can have an ID.  This ID should be unique for one HTML file. You can have same ID used in multiple HTML files but usually this is unique. For example we can have a paragraph that has special properties. We can declare <p id=”my-special”> then we can use this id in CSS and in JavaScript to identify the element. We can apply only one ID for one HTML element.

<p id="my-special">This is a special green text. We use CSS to apply a collor to this paragraph."</p>
#my-special {
    text-align: center;
    color: red;
}

Use a classes selector

Like the ID we can use a CLASS attribute for any element in HTML. A class attribute can apply to multiple elements in one or more HTML files. The purpose of the class is to identify not one element but multiple elements. A class is more general then the ID. For a class selector we use . (dot) notation in CSS.

.center {
    text-align: center;
    color: red;
}
.large {
    font-size: 40px;
}

We can apply one or more classes to one HTML element.  Previous two classes can apply to different element types.

<p class="center large">This paragraph is styled using classes</p>
<div class="large">This text is large but not centered.</div>

Select elements within class

In the next selector we combine the element type and class using (dot) notation. In next example only h1 elements with class title will have this rule. Any other element with class “title” will not be centered and will have color black. The second rule is stronger then the first rule and will overwrite the font-size.

.title {
   font-family: Tacoma;
   color:green;
}

h1.title { 
   text-align: center;
   color: blue;
   font-size: 40px;
}

In the next HTML we use h1 with class title to make this title centered and blue. h2 and h3 will use Tacoma font but will have green color.

<h1 class="title">Centered and Blue</h1>
<h2 class="title">Not centered and Black</h2>
<h3 class="title">Not centered and Black</h3>

Read next: Introduction to Bootstrap