Biggus Bloggus

You remember elements from our last tutorial right? The building blocks of crocodile symbols. CSS simply styles those blocks.

Implementing CSS

There are multiple ways you can write CSS into your website: inline, internal, and external. Your Neocities site sets you up for external so if you're comfortable just skipping to the next section on syntax, then you can do so. But it's worth briefly walking you through the different ways of implementing CSS.

Inline

By adding style="" inside the opening tag of an element in the HTML file, you can style elements as you add them.

<p style="color: #ffffff;">This is a paragraph.</p>

However, this isn't preferred by most people. Especially me, I hate this method so much. But it saves you linking your HTML to an external sheet... Or is it?

Internal

<!DOCTYPE html>
<html>
    <head>
    <title>CSS Example</title>
    <style>
        p {
            color: red;
        }

        a {
            color: blue;
        }
    </style>
...

By adding <style></style> in your <head> section, you can write the CSS directly into the HTML file. I used to prefer this method.

External

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
...

By adding <link rel="stylesheet" href="style.css"> into your <head>, and then creating a separate style.css file, your two files are connected. This separation makes the code look less messy, in my opinion, and is especially useful if your site has multiple elements or pages. Nothing's worse than scrolling up and down repeatedly, rather than cross comparing two files.

Your Neocities page will provide you with a style.css and index.html already linked up. Feel free to change these per your preferences. 1

The Syntax

The process is split into selector, property, and value.

body {
    color: #ffffff;
    font-family: Verdana;
}

The selector selects the element from your html.

The properties are accompanied with a value that sets it, each pair ends with a ; - CSS doesn't read the indentations differentiating these, so think of ; as a period.

body{color:#ffffff;font-family:Verdana;}

Because HTML and CSS don't read indents, you can present your code like this too, if you're so inclined. Indentation is just used across the board to easily distinguish different blocks of selectors.

There are so many different properties and values you can assign. So while I'll try covering some of the easiest ones to remember, referring to a dictionary is common practise. It's also fun discovering the different ways you can style your elements.

Colours

p {
    color: #ededed;
    background-color: #222222;
}

In this instance, color changes the text colour, whereas the latter changes the background. Because they're in the p selector, only the normal text inside paragraphs is affected.

You can apply colours in various ways, HEX codes, RGB, and even plain text, color: red;. You can also apply these to the body to change the entire page's background and text colour.

body {
    background-color: #222222;
    color: #ededed;
}
      
h2, strong, em {
    color: grey;
}
      
a {
    background-color: #ededed;
    color: #222222;
}

Result

"But wait! You can combine selectors?!" yup. By listing selectors with commas, such as, h2, strong, em, any values set applies to every h2 heading, bold, and italicised text. There are different ways of selecting specific elements, but this is the least complicated one.

First task: it's your turn. Have fun changing the colours of your elements. If you don't know where to begin, feel free to follow my example and use your own colour combinations.

Text

Let's discuss the most common text-related properties: font-family and font-size

Font Families

font-family is a property that changes the font. Unless you're importing your own font, you'll need to pick a safe font that most users will have on their systems by default. Times New Roman, Verdana, or Arial, for example. There are also more general fonts: sans-serif, serif, and monospace. We can cover custom fonts in a later tutorial.

Because different systems may have different fonts installed, you can list multiple fonts: in font-family: Verdana, Arial, sans-serif;, the system will choose the first font if it has it, otherwise it'll cycle through the remainder for a substitute.

Font Sizes (and numerical values)

font-size changes the font size of an element.

Let's pause to discuss how you can input sizes, not just of fonts. These can be in pixels px, centimetres cm, print pt, or various other values: em, rem, %, etc. It all depends on your preference, and whether you want the size of things to respond dynamically to screen size changes, for instance. For now, you're more than welcome to stick to pixels to establish the sizes of things.

Wait! There's More!

This site lists many other beginner-friendly ways you can change the text. Again, world's your oyster, as long as you understand the basic syntax, it's easy to discover new ways of styling elements.

body {
    background-color: #222222;
    color: #ededed;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    font-size: 16px;
}
      
h1 {
    text-decoration: underline;
}
      
h2 {
    color: grey;
}
        
strong, em {
    color: grey;
    font-family: Times New Roman, serif;
}
      
a {
    background-color: #ededed;
    color: #222222;
    font-family: Times New Roman, serif;
}

In my example, I change the font-family for both the whole page, and specific elements like bold and italicised text. I also changed the size of text for the whole page, and added an underline to the h1 heading.

Second task: change the font size and font family. This can be of the whole page, or specific elements. Feel free to refer to the link above to try out a different property.

  1. Good thing about CSS: you don't need to establish any metadata at the beginning like you'd have to do with a HTML file. You can just get right into it.↩

#website