CSS Style

index

What is CSS?

CSS (Cascading Style Sheets) is a declarative language that controls how web-pages look. The browser applies style declarations to elements to display them with certain attributes specified in the style. The style declaration contains the properties and their values, which determine how elements are rendered in the browser.

CSS Overview

CSS is one of the three core Web technologies, along with HTML and JavaScript. We use CSS to create a file that is refereed 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.

CSS Rules

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 enclosed in curly brackets: { … }. 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.

CSS Selector Anatomy

Let's explore an example:

This example is a file: styles.css. This file must be attached to 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

Using external CSS

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 text to green color:

<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

element of the HTML. It does not work if you use this tag in the body of HTML.

Example:

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

<!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>

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;
}

Using 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. You can declare <p id="my-special"> then we can use this id in CSS and in JavaScript to identify the element. You can apply only one ID for one HTML element.

<p id="my-special-id">
This is a special green text.
We use CSS to apply a color to this paragraph.
</p>

Now we must create an ID selector in a CSS file. The ID selector start with hash tag: "#" like in example below:

#my-special-id {
   text-align: center;
   color: green;
}

Using a class 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: green;
}
.large {
   font-size:40px;
}

We can apply one or more classes to one HTML element. Previous two classes can apply to different element types. In next example:

<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.

/* class style */
.title {
   font-family: Tacoma;
   color:green;
}
/* element style */
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. This is because h1.title selector will override the .title class selector that is less specific.

<h1 class="title">Centered and blue</h1>
<h2 class="title">Not centered and green</h2>
<h3 class="title">Not centered and green</h3>

Mozilla Doc: Learn how to style HTML using CSS

Congratulations! Now you almost know CSS. Of course you have to read this article again and read the external references. There are many tips and tricks you should learn but for now it is good to bookmark this page and read it again later. CSS is easy to forget and you must read documentation over and over for years before CSS becomes part of your skills.

Read next: Bootstrap