Web 002: Basics of CSS

This will help you:

Use CSS (Cascading Style Sheets) to define the formatting and appearance of your web content.

If you've seen websites that load in plain HTML format, you know they don't look very appetizing. CSS helps fix that by defining the appearance (color, size, font, border, background, position...) of different HTML elements. If HTML is like the nouns of a website, then CSS would be the adjectives. CSS isn't a programming language either, so don't worry...you're not learning 3 programming languages right now. ;)

Time: 1 hour / Level: A2

You should already:

Get the code and resources for this activity by clicking below. It will allow you to download the files from a Google Drive folder. Unzip the folder and save it in a sensible location.

Step 1: Learn About CSS

Click on this link to see an example of how much CSS can change in a website.

CSS can be written in-tag, like this:

<p color:Purple>Some text here</p>

That would show "Some text here" in purple.

It can also be written in-document, as in, standard CSS syntax inside a <style> tag, inside the <head> tag of the HTML document.

What is standard CSS syntax, you may ask? It's like this:

body {
  background-color: yellow;
  margin: 10px;
}
h1 {
  color: yellow;
  background-color: blue;
  text-align: center;
}
p {
  font-size: 15px;
}

Each of those sections in curly brackets {} defines formatting for a certain type of tag. In this case, we defined special formatting for the body tag (all page content), top-level headings, and regular paragraphs of text.

What about tags (or format properties) that we don't define? They default to whatever the browser default is. In-tag CSS overrides document CSS and imported CSS, which overrides browser defaults.

In-tag is quick but can get repetitive and messy. In-document is better; you'd just put something like the above in a <style> tag. The cleanest and most flexible option is to have a separate file for CSS. This is what I've done for this activity, in my_css.css. You can open it up and take a look at it.

To tell the HTML document to use a certain stylesheet, you add a link inside the <head> tag of the document:

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

This links my_css.css into the document and tells it that it's a stylesheet. Having external CSS like this can make it easier to manage your HTML content and change the styling quickly. Of course, you can also add in-document or in-tag styling which will override the stylesheet.

This page gives more detailed explanations of this. It's not long, so give it a look before moving on.

Step 2: I Baked You Some Code

Open my_css.css and look it over. Look up what each of the properties mean (here is a good, quick reference.) Open up my_homepage.html in a browser and see how it looks. Try changing the CSS file, then refreshing the page. You should see your changes take effect.

Step 3: Make it Your Own

Look up what properties change different things that you want to change about your site, and modify them in my_css.css. You can also use in-tag (inline) or in-document formatting if it's useful.

Instead of manually setting an inline property every time you want a specific element to be different, consider identifying it by class or ID in the CSS file. This page shows how to use different selectors to make your CSS file better fit what you're actually trying to do with it. A little bit of this is done in the original version of my_css.css, but you should change it based on what you're using different tags and classes for.

Read more, do cooler things, write less extra stuff.

Have fun!