Beginner guide to CSS

What is CSS?

CSS is short for "Cascading Style Sheets". It's used to style elements written in HTML and presents how the information is displayed on the web page. CSS can be used to add colour, change text sizes, animate images and so on.

How do you add CSS to HTML?

There are three ways you can add CSS to HTML:

Inline CSS

You write the CSS inside the specific HTML tag you are targeting.

Let's say you want to change the colour of a paragraph to red using inline CSS. Take the paragraph opening tag <p> and place the style attribute inside the opening tag:

<!DOCTYPE html>

<body>

<p style="color:red;">This paragraph is red because of inline CSS </p>

</body>

Output:

Internal CSS

With Internal CSS, you can add CSS style by placing a <style> element inside the head section of the HTML file. You follow this up with the specific styling you want your elements to have:

<head>
  <style>
        h1 {color: green;}
         p {color: purple;
            border: 1px solid black;}

  </style>
</head>
        <!-- Note: Above is the Internal CSS in the head section, below is the body content -->

<body>
    <p> This paragraph is purple with a black border due to internal        CSS </p>
    <h1> This heading is green </h1>

 </body>

Output:

Notice how all the styling has been added in the <head> section, for both the paragraph and heading. You can add as many CSS styling as you want to your elements in this section. Remember to finish your styling with a closing </style> tag in the head.

External CSS

External CSS is the best way to use CSS. This is because your CSS will be in an external file and it essentially allows you to completely separate the CSS from the HTML. You can group the styles you want to change together making it a more efficient practice. You can change the styling of many documents at once too.

To create a separate file for CSS:

You must first create a new file with an extension of .css

For eg: "style.css"

Then, in your HTML file:

<!DOCTYPE html>

<head>

    <link rel="stylesheet" href="style.css">

</head>

In your head section, the link element is placed. rel="stylesheet" is used to tell the webpage you are importing a separate stylesheet. The href attribute links to the CSS file which we have named style.css

CSS Syntax

To write CSS, there are specific sets of rules you need to follow. This is known as CSS syntax.

Example of CSS syntax

h3 {font-size: 20px;}

1) A selector: when writing CSS, you need to identify which element or term you want to target or "select". This is known as the selector. Using the example above:

h3 is our "selector"

2) Property: allocates a style to the HTML element. For e.g: colour, font size, adding a border, margin and so on.

font-size is our "property"

3) Value: All properties must have a value. For eg, if your property is colour, and you want your element to be blue, your value is blue.

20px is our "value"

Altogether, the property name and value i.e: " font-size: 20px; " is called a declaration. A colon (;) is used to separate each declaration.

Types of Selectors

There are several different types of selectors.

Element selector

Element selector refers to when you select HTML elements by their name.

p {
    font-size: 18px;
    text-align: center;
}

body {
    font-family: Arial, sans-serif;
    color: blue;
}

Both p and body are elements selected by their name. This will select ALL the p elements and the body element and give them their properties/value above.

Class selector

In the example above, the element selector p will select ALL the paragraph elements in your HTML and give them a font-size: 18px and text-align: center. Sometimes, you may have several paragraphs and want to give each one its own style. You can do this by defining your selectors using a class attribute.

To define your class:

Add a class attribute to the HTML:

<p class="note"> This paragraph has a class name of "note"</p>

Important: For the class name, you should not put a space between the classes because that would indicate there's more than one class. You can put a hyphen (-) in between if you have more than one word.

In the CSS file:

You can style this class. To style this class, you put a full stop (.) followed by the class name. Then write the declaration:

.note {color: green;
       border: 2px solid black;}

Scenario:

We want our first and last paragraphs to have the same properties (same font size and colour) and the second paragraph to have a different colour and font size.

Let's add some classes to a HTML document:

<body>

    <p class="first-class"> This paragraph has been given a class and will  be red and have a font-size of 20px </p>
   <p class="second-class"> This paragraph has also been given a class (a different class) and will be blue with a font-size of 30px </p>
   <p class="first-class"> This paragraph has been given a class and will  be red and have a font-size of 20px </p>

</body>


.first-class {color:red;
             font-size: 20px;}

.second-class {color: blue;
              font-size: 30px;}

Output:

You can add many classes in your document.

ID selector

An ID selector is used to select only one element on your page. In contrast to classes, you can have only one ID.

To use an ID selector, you add an ID attribute to your HTML:

<h2 id="center">This h2 has a special ID on it </h2>

To style this ID:

in your CSS, put a hashtag (#) followed by the ID name. Then follow up with the declaration.

#center{color:purple;}

Output:

Universal Selector (*)

The * (asterisk character) represents the universal selector. This asterisk * is used to select every single thing inside the document.

*{
    color: pink;
    font-size: 15px;
  }

This will select every element inside the document and give it the colour blue, and a font size of 15px. Let's say below is our HTML:

<body> 
    <h1> Universal Selector Example </h1>
    <p> Everything inside this document will be blue and have a font size of 15px </p> 

</body>

This is our output:

Specific CSS properties

Colour

There are a few ways you can set the colour in CSS:

1) Colour

You can use the name of the colour:

h3 {color: red;}

2) Hexadecimal code:

Hexadecimal codes can be used to specify colours. A hex code begins with a hashtag (#) and is proceeded by six symbols.

p { color: #8050c8; }

The first two symbols signify red, the next two symbols refer to green and the last two are blue. The values in the hex code are between 0-9 and A-F.

3) RGB

RBG codes can be used to set the colour in CSS. RGB refers to red, green and blue parameters and how intense each one is. This intensity is defined from 0 to 255.

ul {color:rgb(255,0,0);}

Above, the red parameter is defined as 255 (the highest level) and blue and green are set to 0. Therefore, the colour would be red.

Font

The font property is a shorthand property. It can be used to provide the font-style, font-variant, font-weight, font-size and font-family. For the font, you need to at least provide:

the font size
the font-family

p {font: 20px Arial, sans-serif;}

In the code above, the paragraph will have a font-size of 20px and a font-family of Arial. If the Arial font is not available, it will default to the sans-serif font family.

All the other values for font-style, font-variant, font-weight, font-size and font-family will be set to default.

That is all for today. I hope you benefited from this article and achieved a solid understanding of the basics of CSS!

F Mohamed