CSS Basics

06/05/2017

Basics of how it's written

CSS (Cascade Style Sheet) is a format used for styling a website. This means for setting things like colors, positioning, animation and more.

You write CSS by typically writing which element you want to style (the selector), and enclose the declaration in curly brackets {}. The declaration contains a property (what you want to change) and the value.

Here's an example of how you can style the <h1> HTML tag:

h1 {
  color: blue;
  font-size: 12px;
}

See this visual representation found on W3Schools showing what each part of the code is called:

In this case we are changing what the h1 tag (selector) looks like in our HTML. We are setting its color to blue (declaration), and the size of the text to 12px (value). A CSS declaration always ends with a semi-colon.

.Classes

You can group declarations under a class or ID, and then use them anywhere on your HTML elements. If you wish to make a special style (which you will in most cases), you can create a new class or ID. To create a class, simply add a period in front of the name. Here's an example:

.my-own-style {
  color: blue;
  font-size: 12px;
}

You can insert the styles into your HTML by adding them to the attribute class. Remember to not include the period when writing it here! Here's an example:

<h1 class="my-own-style">Nice blue text</h1>

#ID's
You might also find ID's if you are looking at CSS styles. They start with a dash (#) instead of a period and can only be used once in a HTML document. This is good to use if you want to refer to a spesific element on your website.

ID's can also be used to link to a spesific place inside a website. You link to those in the URL by adding a dash infront of the ID name. Example:

www.websitename.com#id-name

Note that this does currently work in Webnode 2.0 (as of 24.07.17)

Where to actually place the CSS to make it work with your HTML code

You can insert CSS into your HTML document in 3 different ways:

External style sheet
You can create classes and ID's here
Internal style sheet
You can create classes and ID's here
Inline style
You can NOT create classes and ID's here

External stylesheet
This means you link to a .css file in the top of the HTML document. This is the recommeneded way if you are dealing with bigger amounts of code. You can link to the external .css stylesheet with the following code in the <head>. Remember that the <head> in Webnode settings is under SETTINGS > Settings > Website header HTML code.

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Using external stylesheets is also very good because you can use the same styles on multiple pages by just changing or adding styles in one place.

Internal style sheet
This is style directly in the same HTML document. You can write the styles anywhere in the document by enclosing them in <style> tags. Here's an example:

<style>
  p {
    color: red;
  }
</style>

Inline styles
This is never really recommended, but it's an easy and quick way of changing the style for an object on the go. You can do inline styling by adding an attribute called style to the HTML tag and separate the styles using semi-colon. Here's an example:

<p style="color:red;font-size:38pt">Big red text</p>