3 Ways to add CSS to your website

#css #webdev #codenewbie #beginners

what is CSS

Fashion Fades, style is eternal

YVES SAINT LAURENT

CSS is where we provide the style to our website. It tells the browser how to position the elements on the page, what color they should be, what font to use and almost anything else you can think of which relates to how the website looks.

Inline CSS

You can add CSS directly into the HTML elements. You can do this with the style attribute. It will look something like this.

<h1 style="background-color:blue; color:yellow">Hello World</h1>

A couple of things to be aware of about using inline style

It has the highest precedence. That means, if in the example above, I was to give the <h1> a different style using an internal or external style sheet it would not change the style.
It is not recommended to use this method — particularly in big projects. The reason for this is that it's easy to lose track of which styles you put where and if you want to make a change you have to search the whole document and make each change individually.

Internal CSS

The second way to add CSS is in the <head> section of HTML page. You will need to add it in a <style> tag. Don’t forget that you need to add the selector (h1 / p / body) because you’re not applying it directly to the element. It should look something like this

<head>
    <style>
      body {background-color: pink;}
      p {color:white; font-size:2rem;};
    </style>
</head>

While there’s nothing wrong with using internal CSS it does mean, if you have many HTML pages with similar styles, you will end up writing the same code over and over again in the head of each file. A better way to do this would be with an external style sheet.

External CSS

The most common way to use CSS is to have all your CSS rules in a separate CSS file and link that to any HTML files which will use it. First of all, you want to create a file ending .css where you will write all your CSS code. You may want to call it styles.css. Save this in the same folder as your HTML or a subfolder called styles or something similar. Then in the <head> section of your HTML, you will need to point to that CSS file. Use the format below, assuming your CSS file is called styles.css and it’s saved in your HTML folder

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Here the rel="stylesheet" tells the browser that this is our CSS stylesheet and the href="styles.css" points to where this folder is located relative to the HTML document.

The benefit of using external style sheets is that you can use the href to import it into many HTML documents. An example of where this might be useful is if you have several pages with the same header. You can create the rules in one CSS stylesheet and import it to all the HTML documents with that header.