Level-Up Coding

Level 1: You can style your web pages with CSS.

HTML lets you write web pages and tell how those pages are structured, but by itself it does not give you very much control over how a web page will look. You can define what parts are headings, and what parts are paragraphs, but you can’t easily change the text size or background color. CSS allows you to customize the look of your web page.


What is CSS?

CSS stands for cascading style sheets. It is the way that web pages change the look of HTML. With CSS, you can do lots of things like:


Where do you put CSS?

Do you remember that HTML pages are made up of HTML elements? CSS commands work by changing how these elements are displayed. Web browsers allow you to put CSS commands in three different places. The three places are:

  1. directly in HTML tags

  2. in a <style> element in the <head> of the html page.

  3. in an external file with CSS commands called an external style sheet.

For this lesson we will talk about the first two, and not worry about external style sheets.


“Inline” CSS Commands

The first place that you can put CSS commands is directly in an HTML tag using a style property. This is called “inline” CSS. As an example, the h1 tag here has a style that sets the text color to red:

<h1 style="color:red;">Red Heading</h1>

A property such can be added to a tag by putting the name of the property in the tag (style), followed by an equals sign (=), followed by the value of the property in quotation marks ("color:red;").

When you do inline CSS, the command affects just one element. If you want to change the style of many elements at once you can use a style sheet.


Internal style sheet CSS Commands

The second place where you can place CSS commands is in a style sheet. To do this, you put your CSS commands in a <style> element in the <head> of the html document.

Style sheets are powerful because most of the time you want to change the style for every element of a given type. For example, you may want to make all headings green, or change the font of all paragraphs. Without style sheets, you would have to add the CSS commands to every tag that you want to change! The style sheet separates the CSS commands from the HTML content, and that makes the HTML code easier to read and maintain.

Below is an example style sheet that sets the background of the page to blue, and the text color to white. It also changes the size of the text and centers it.

<!DOCTYPE html>
<html>
<head>
    <style>
    body 
    {
        background-color: blue;
    }

    .whiteCenter
    {
        text-align: center;
        color: white;
    }

    #yellowCenter
    {
        text-align: center;
        color: yellow;
    }
    </style>
</head>

<body>
    <h1 class="whiteCenter">Heading</h1>
    <p class="whiteCenter">White paragraph.</p>
    <p id="yellowCenter">Yellow paragraph.</a>
</body>

</html>

Each command in the style sheet starts with a part called a selector. This tells the computer which elements in the page should be affected by the command. There are three types of CSS selectors:


Code Reuse and Encapsulation

CSS style sheets illustrate two important concepts in computer programming. These are code reuse and encapsulation.

Code reuse is the idea that we can use the same piece of computer code many times in our program. This happens with style sheets, because a CSS command applies to every element that matches the selector.

Encapsulation is the idea that we should hide the messy details of code when possible to make it easier to understand. For example, suppose you want all headings to have red text and be aligned in the center. If you are using a style sheet, you would have the following heading code in your HTML:

<h1>Heading with style sheet</h1>,

but if you don’t use a style sheet, you would have to write this for every heading:

<h1 style="color:red; text-align:center">Heading without style sheet</h1>


Syntax and Semantics

You have probably noticed that CSS code does not look like HTML code. This is because it has different syntax than HTML. The syntax of a language is the set of rules that describe the kinds of things that are allowed in the language. We have the same thing in human languages. In Spanish, for example, you use an upside-down question mark (¿) to start off a question, and then you end it with a regular question mark (?). However, in English, you just put a regular question mark at the end of your question.

Each computer language has its own syntax. For example, the code below has a meaning in CSS, but it does not make sense in HTML.

.whiteCenter
{
    text-align: center;
    color: white;
}

Unfortunately, if you write some code that does not follow the proper syntax, it won’t work! Computers can be very picky that way. For example, if something is spelled correctly, but not capitalized correctly, it probably won’t work.

Besides syntax, each language has its own semantics. Semantics are the rules you use to understand what something means. Computers follow directions exactly as written. A piece of computer code has exactly one meaning that is defined by the semantics of the language.


Text horizontal alignment

Now let’s look at some specific CSS commands. Text can be centered using the command text-align: center;. This is shown in the .whiteCenter class above. You can also align left or right, or justify, which means to add space between the words so that every line has the same width.


Centering other HTML elements

Some HTML elements, like images, will not respond to the text-align CSS command. You can still center these canvas by placing them inside a <center> element. For example to center an image, you could write the code

<center>
    <img src="robot.png"></img>
</center>

Making a background image for the page

One thing that can make your page look nicer is to add a background image. This can be done by including a background-image command in the body selector of your style sheet. The CSS example below sets the background image to be in the center of the page. It also sets a background color so that if the image is too small the background will be black instead of white:

body
{ 
    background-color: black;
    background-image: url(myBackground.png);
    background-repeat: no-repeat;
    background-position: center; 
}

Terms


Exercise

  1. Write a new HTML page with a few elements, including at least an image, a heading, and a paragraph.

  2. Put a <style> element in the head of the document.

  3. Add the following CSS commands to the <style> element:

    1. a command that uses an element selector for the <body> element. Make this command set the background image and color for the page.

    2. a command to center the text and text color of the headings of your document. Use a class selector to do this.

    3. a command to justify the text of paragraphs and change the text color to something different than you used for headings. Use whatever selector type you want.

  4. Center the image that you added to the page using a <center> element.