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:

file: styles.css

/* The selector "p" indicate that all paragraphs in the document will be affected by that rule */
p {
  color: yellow;
  background-color: black
}
  •   The “color” property defines the text color, in this case yellow.
  •   The “background-color” property defines the background color, in this case 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.

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

You need to login to view the rest of the content. Please . Not a Member? Join Us