Skip to content

CSS Basics

CSS is how you control the way a web site looks.

How to Include CSS on the Page

There are three ways to include CSS on a web page:

  1. Inline CSS: this is added as an attribute to an HTML element. We will NOT do it this way. One of the reasons we will not do it is because it is not flexible and is a lot of time to write and rewrite.
  2. Internal CSS: This is where you write your CSS code inside of a <style> element on the HTML page. This is more flexible than Inline CSS but can still be hard to manage across multiple pages.
  3. External CSS: with this method you create a separate CSS file and then link this file to HTML pages using a <link> element.

How to Link an External CSS File

Step 1: Create a .css File

Create a file to hold your css. Most of the time you will name your file style.css or styles.css (these are standard default names but not required). What is required is that the filename MUST end in .css

In our example files we used the file was created for you and named style.css (this is also what Replit does by default when you’re creating an HTML/CSS/JS project).

Step 2: Write a Link Element in your HTML Files

In ALL of your HTML files you will add a <link> element inside the <head> element that points to the file you just made. Here is an example of the link element.

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

Remember to put it inside of the <head></head> element so it will render properly.

If your file is not named style.css, the only thing you would need to change is the name of the file inside of the href=”filename.css” attribute.

You can add more than one link element if you want to. For example you may find some CSS styles someone else wrote on a site like CodePen and want to include it but not mix it with your CSS that you are writing.

Remember to add this link to each page of your site. If you don’t add the link then the page will not be styled.

The link element points the browser to the .css file and it will then read the CSS inside of your style.css file.

screenshot of replit with href attribute of link element inside of index.html circled and pointing to the style.css file it links to.
Link element refers directly to a .css file. The value of the href attribute is the css file you want to link to.

Step 3: Write some CSS inside of your CSS file

To make sure everything is working add some CSS to your .css file (usually style.css). Here is an example. It will turn the background color of your web page orange.

body{
  background-color: #ffaa50;
}

Remember to refresh your Webview in Replit to see the change.

Step 4: Add the Link element to all HTML pages on your site

Copy the <link> element and paste it into the other pages. Now all of the pages in your site should also have the styling you added in Step 3.

Other Info

  • When you add a new HTML page, remember to also add the link element.
  • You can have more than one external CSS file, but you will need a separate <link> element for each of them.
    • The browser will apply the styles in order from top to bottom.
  • If you use CSS somebody else wrote, for now, it is a good idea to put them in a separate file with a comment so you know where you got it and are giving them credit.

Basic Styles

CSS is essentially a bunch of rules about how your page should look. At its basic level you:

  1. Select an element or elements
  2. Set Properties of the element(s) you selected

Syntax

Here is an image of CSS with the parts labeled. Description below

diagram of a CSS ruleset with all of the parts labeled ruleset, selector, declaration, property, value and the required syntax characters: curly braces, colon, semicolon.
diagram of css ruleset with parts labeled
  • Ruleset (Rule): this is needed to style element(s) on the page. You can have multiple Rulesets in your CSS file.
  • Selector: this is how you tell the browser which elements will be styled by the rule. Shown is a class selector that selects all elements with the class attribute of title.
  • Declaration: this is everything that styles a single property
  • Property: the name of the property to set
  • Value: the value of the property
  • Curly Braces: after the selector comes the opening curly brace, the closing curly brace is at the end of the rule.
  • Colon: This must go in-between the property and the value.
  • Semicolon: this comes at the end of the Declaration (after the value).

Style Elements: Selectors and Declarations

In order to actually style anything you will need to choose an appropriate selector to select the element(s) you want to style and then use Declarations to change the properties of the element.

Declarations

This is where you set a property and value. A big part of learning CSS is learning which properties you can change.

diagram of a CSS Declaration with the parts labeled: declaration, property, value. The colon and semicolon required punctuation is also labeled.
CSS Declaration with labels.

Selectors

The selector is where you select (choose) which elements will be styled in the Ruleset.

There are a number of different types of CSS selectors but we will focus on just two for this class.

Element Selector

This selector is pretty straightforward. You just write the name of the element (no < or >) and that is it. Whatever properties you set in your rules will be changed on every element of that type.

Change the Background color of the page

body{
    background-color: #ffaa50;
}

Set the font size for all h2 elements to 2 rem (2 times the base font size).

h2{
    font-size: 2rem;
}

Change all paragraphs to have font-family of Helvetica and color of dark grey (#333333).

p{
    font-family: Helvetica, Arial, sans-serif;
    color: #333333;
}

make all b elements font-weight 900

b{
    font-weight: 900;
}

Class Selector

This selects elements with a specific class. In order for an element to be styled with this, you have to add the class attribute in the HTML file. This technique comes in handy when you just want to style one element on a page.

When you write your CSS you put a . in front of the class name to tell the browser you’re styling a class

Here is an example of an element with a class of intro

<p class="intro"> Some text for the paragraph</p>

And here is some CSS you could use to style that element (note the . in front of the name):

.intro{
    font-size: 1.5rem;
    background-color: #addae6;
    padding: 20px;
}

Leave a Reply