CSS Introduction

CSS (Cascading Style Sheets) is used to decorate and format your HTML. Where HTML is the contents of the page, CSS is the styling.

CSS Basics

CSS is composed of two things: selectors and rules.

Selectors are used to pick which HTML elements rules are applied to.

Rules are used to specify how things look and act.

.selector1 {
    rule: value;
    rule-2: value2;
}

#selector2 {
    rule: value;
}

Adding CSS to your page

To use CSS, you'll have to add it to your page. There are a few different ways of doing this.

Note

The default Neocities pages includes the external style.css file. I recommend using that for now instead of trying to create and include a new file.

`<style>` Element

If you don't want to place your CSS in a separate file, you can place it in your HTML inside of a <style> element.

Result:

External

Most of the time, your CSS is going to be in a separate file from your HTML. To include it, use the <link> element inside of your <head> element.

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

Inline

You can also add CSS rules directly to individual elements. This is called inline CSS and can be done with the style attribute.

Result:

Caution

Inlining CSS can be useful, but it shouldn't be overused.

A powerful part of CSS is that you separate the contents of the page from what is being styled. This allows you to quickly change the style of your page without going through and manually updating your HTML. It also allows you to style multiple pages with the exact same CSS.

Inlining CSS ties the content directly to the style, negating this perk. This can reduce development speed and create more chances for developer error! (It also clutters up your HTML, which can make it hard to read...)

If you find yourself inlining multiple elements with the same style, consider using classes instead!

Making sure it works

An easy visual way to verify your CSS is loading properly is to give everything a red border.

Add the following code to your CSS.

* {
  border: 1px solid red !important;
}

If it is being loaded properly, there should be a very annoying red border around everything. Remove the CSS when you've verified it works.