WebcoreFE

Welcome to CSS

CSS stands for Cascading Style Sheets. It is a second language that works together with HTML. HTML says what each part of the page is: a heading, a paragraph, a list. CSS says how each part looks: its colors, sizes, spacing and position.

This lesson is about backgrounds: what fills the space behind the text of a part of the page.

Think of decorating a room. HTML builds the walls. CSS decorates them. You can paint a wall one color (background-color), or cover it with wallpaper (background-image). Wallpaper has a small pattern that repeats across the whole wall (background-repeat). A poster is a single picture that you hang once, in one spot (background-position).

Painted wall background-color: skyblue;

Wallpaper background-image: url('dot.png'); background-repeat: repeat;

One poster background-repeat: no-repeat; background-position: right top;

Painted wall background-color: skyblue;

Wallpaper background-image: url('dot.png'); background-repeat: repeat;

One poster background-repeat: no-repeat; background-position: right top;

The wallpaper is one small dot picture, repeated again and again until the wall is covered. The poster is a picture shown only once, so you also choose where it hangs.

How a CSS rule is written

CSS is written as rules. Each rule says which part to style, then what to change.

.bannerselector
(which part)
{start
background-colorproperty
(what to change)
:colon
#4CC9FFvalue
(change it to this)
;semicolon
}end

One property and its value together are called a declaration. A rule can hold many declarations between its curly braces, each one ending with a semicolon.

A closer look

Picking what to style: selectors

The selector is the first part of a rule. It points at the parts of the page the rule should change. A tag name like body or h1 picks every element with that tag. A dot and a class name, like .banner, picks every element with class="banner". You met the class attribute in HTML Lesson 4. A hash and an id, like #top, picks the one element with id="top".

A plain box: <div>

<div> is an HTML tag that groups other elements into one box. On its own it looks like nothing. It becomes useful with CSS: give the <div> a class, and you can color the whole box at once, with everything inside it.

Where CSS goes

In these lessons, each code box has two tabs: HTML and CSS. The CSS tab opens first. The browser adds the CSS to the page for you, just like the CSS tab of the WebCore code editor. In a single HTML file, you can put the same rules between <style> and </style> inside <head>. The style attribute from HTML Lesson 4 also works, but it changes only one element. A CSS rule can change many elements at once.

Writing colors

You can write a color by name, like skyblue or white. For an exact shade, use a hex code: a # followed by six numbers and letters, like #4CC9FF. Another way is rgb(76, 201, 255), which mixes red, green and blue from 0 to 255. All three of these give the same sky blue.

Color and picture together

An element can have a background color and a background picture at the same time. The picture sits on top, and the color shows through any clear parts of the picture. The color also shows if the picture can't load, so it is a good idea to set both. A smooth blend of colors, called a gradient, also counts as a picture: background-image: linear-gradient(#4CC9FF, #5CE69E);

Sizing the picture

A picture is shown at its real size unless you say otherwise. The logo in our examples is very large, so we add background-size: 48px; to draw it 48 pixels wide. You can also write cover, which stretches the picture until it covers the whole box.

Let's build it

Let's decorate the top banner of Front Page Bytes. The HTML stays the same in every step: a <div class="banner"> box with the site name, then a short story below it. Only the CSS changes. Each code box opens on the CSS tab with the new lines highlighted. Click HTML to see the page being styled.

Step 1: Color the whole page

Your code

body {  background-color: #F0F7FF;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

The selector body picks the <body> element, which holds the whole page. background-color: #F0F7FF; paints it a very light blue.

Step 2: Color one box with a class

Your code

body {  background-color: #F0F7FF;}.banner {  background-color: #4CC9FF;  padding: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

.banner, with a dot, picks the element with class="banner". Only that box turns sky blue, and the story below it keeps the page color.

padding: 16px; adds some space inside the box, so the text doesn't touch its edges. You'll learn more about it in CSS Lesson 2.

Step 3: Add a picture

Your code

body {  background-color: #F0F7FF;}.banner {  background-color: #4CC9FF;  padding: 16px;  background-image: url('/storage/assets/WebcoreIconNoBg.png');  background-size: 48px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

background-image puts a picture behind the text. The file's address goes inside url( ). background-size: 48px; makes the logo small. Notice that the logo repeats across the whole banner, like wallpaper. That's what a background picture does at first.

Step 4: Show the picture only once

Your code

body {  background-color: #F0F7FF;}.banner {  background-color: #4CC9FF;  padding: 16px;  background-image: url('/storage/assets/WebcoreIconNoBg.png');  background-size: 48px;  background-repeat: no-repeat;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

background-repeat: no-repeat; turns the wallpaper into a single poster. Now there's one logo, in the top-left corner. Other values are repeat-x (one row across) and repeat-y (one column down).

Step 5: Move the picture

Your code

body {  background-color: #F0F7FF;}.banner {  background-color: #4CC9FF;  padding: 16px;  background-image: url('/storage/assets/WebcoreIconNoBg.png');  background-size: 48px;  background-repeat: no-repeat;  background-position: right center;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

background-position: right center; moves the logo to the right side, halfway down, so it no longer sits behind the words. The first word is left, center or right. The second word is top, center or bottom.

Step 6: Write it all in one line

Your code

body {  background-color: #F0F7FF;}.banner {  background: #4CC9FF url('/storage/assets/WebcoreIconNoBg.png') no-repeat right center;  background-size: 48px;  padding: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

The background property is a shorthand: one line that sets the color, picture, repeat and position together. The banner looks the same as in step 5.

background-size comes on its own line, after the shorthand. The common mistakes below show why the order matters.

Quick notes

selector { } A CSS rule

.banner { background-color: skyblue; }

How to use

selector Which elements to style: body, .class or #id.
{ } Holds the changes for that selector.
property: value; One change. End each one with a semicolon.

Examples

Color the whole page.
```
body {  background-color: #F0F7FF;}
```
Style every element with class="banner".
```
.banner {  background-color: skyblue;}
```
Style the one element with id="top".
```
#top {  background-color: gold;}
```

background-color Solid color

body { background-color: #F0F7FF; }

How to use

skyblue A color name.
#4CC9FF A hex code for an exact shade.
rgb(76, 201, 255) Red, green and blue, each from 0 to 255.
transparent No color. This is the default.

Examples

A notice box that stands out.
```
.notice {  background-color: #FFF3C4;}
```
A dark footer box.
```
.footer {  background-color: #11141A;}
```
Weather cards in different colors.
```
.sunny {  background-color: gold;}.rainy {  background-color: skyblue;}
```

background-image Picture or gradient

.banner { background-image: url('logo.png'); }

How to use

url('logo.png') A picture file. Put the address inside the quotes.
linear-gradient(red, blue) A smooth blend from one color to another.
none No picture. This is the default.

Examples

A photo behind a banner.
```
.banner {  background-image: url('beach.jpg');}
```
A gradient instead of a photo.
```
.banner {  background-image: linear-gradient(#4CC9FF, #5CE69E);}
```

background-repeat Repeat or show once

.banner { background-repeat: no-repeat; }

How to use

repeat Tiles across and down. This is the default.
no-repeat Shows the picture once.
repeat-x One row, from left to right.
repeat-y One column, from top to bottom.

Examples

A small pattern that covers the whole page.
```
body {  background-image: url('dots.png');  background-repeat: repeat;}
```
One logo, shown once.
```
.banner {  background-image: url('logo.png');  background-repeat: no-repeat;}
```
A stripe along the top of a box.
```
.box {  background-image: url('stripe.png');  background-repeat: repeat-x;}
```

background-position Where the picture sits

.banner { background-position: right center; }

How to use

left / center / right Where it sits across. Write this word first.
top / center / bottom Where it sits up and down. Write this word second.
20px 10px An exact spot: 20px from the left, 10px from the top.

Examples

A logo on the right side of a banner.
```
.banner {  background-position: right center;}
```
A picture in the middle of a box.
```
.box {  background-position: center center;}
```
A small icon in the top-left corner.
```
.note {  background-position: left top;}
```

background-size How big the picture is

.banner { background-size: 48px; }

How to use

48px The width of the picture. The height follows, so it keeps its shape.
cover Fills the whole box. Some edges may be cut off.
contain Fits the whole picture inside the box.
auto The real size of the picture. This is the default.

Examples

A small logo, 48 pixels wide.
```
.banner {  background-size: 48px;}
```
A photo that fills the whole banner.
```
.banner {  background-size: cover;}
```
A whole picture that fits inside a box.
```
.box {  background-size: contain;}
```

background All in one line

.banner { background: skyblue url('logo.png') no-repeat right center; }

How to use

Write the parts with spaces between them: color, picture, repeat, position.
Leave out any part you don't need.
background-size Write it on its own line, after the shorthand.

Examples

Color only.
```
.banner {  background: skyblue;}
```
A color plus one logo on the right side.
```
.banner {  background: skyblue url('logo.png') no-repeat right center;  background-size: 48px;}
```

Common mistakes

These are mistakes many beginners make. Each mini browser shows what really happens.

Forgetting the dot before a class name

The mistake

body {  background-color: #F0F7FF;}banner {  background-color: #4CC9FF;  padding: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

Without the dot, banner looks for a tag called <banner>. There is no such tag on the page, so the box stays plain.

Tip: Start a class selector with a dot: .banner

Forgetting a semicolon

The mistake

body {  background-color: #F0F7FF;}.banner {  background-color: #4CC9FF  padding: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

Without the ;, the browser reads two lines as one: #4CC9FF padding: 16px. That isn't a real color, so the browser skips it. Both the color and the padding are lost.

Tip: End each declaration with a semicolon, even the last one, so adding a new line later is safe.

Writing the shorthand last

The mistake

body {  background-color: #F0F7FF;}.banner {  background-size: 48px;  background: #4CC9FF url('/storage/assets/WebcoreIconNoBg.png') no-repeat right center;  padding: 16px;}

<!DOCTYPE html><html lang="en">  <head>    <title>Front Page Bytes</title>  </head>  <body>    <div class="banner">      <h1>Front Page Bytes</h1>      <p>Your daily tech news, made simple.</p>    </div>    <h2>New Phones Arrive This Week</h2>    <p>Three new phones go on sale on Friday.</p>  </body></html>

What you see

The background shorthand resets every background property it doesn't list, including the size. Because it comes after background-size, the logo goes back to its real size, and only a big piece of it fits in the banner.

Tip: Put the background shorthand first, then any single background properties below it.

Test your knowledge

Edit the CSS on the left. Open the HTML tab to see the class names you can use. The mini browser updates as you type, and each goal gets a check mark when it's done. For a picture, you can use url('/storage/assets/WebcoreIconNoBg.png') with background-size: 48px;

No clicking needed. Each goal gets a check mark by itself once your code does it.

Give the whole page (body) a background color. not done yet
Give the .weather box its own background color. not done yet
Add a picture or a gradient to the .weather box. not done yet
Show that picture only once. not done yet

Your code

What you see

Try an exercise

Recap

A CSS rule has a selector, then declarations inside { }, like .banner { background-color: skyblue; }. Each declaration ends with ;.
background-color paints a solid color, and background-image adds a picture or gradient on top of it.
background-repeat, background-position and background-size control the picture, and background sets several of them in one line.

References

Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.

W3C. CSS Backgrounds and Borders Module Level 3 (official specification). Open reference
LibreTexts. Web Site Design (2022, open textbook). Open reference

waving_hand Welcome to CSS

How a CSS rule is written

search A closer look

Picking what to style: selectors

A plain box: <div>

Where CSS goes

Writing colors

Color and picture together

Sizing the picture

construction Let's build it

1 Step 1: Color the whole page

2 Step 2: Color one box with a class

3 Step 3: Add a picture

4 Step 4: Show the picture only once

5 Step 5: Move the picture

6 Step 6: Write it all in one line

sticky_note_2 Quick notes

report Common mistakes

error Forgetting the dot before a class name

error Forgetting a semicolon

error Writing the shorthand last

quiz Test your knowledge

task_alt Recap

menu_book References

Welcome to CSS

A closer look

Let's build it

Step 1: Color the whole page

Step 2: Color one box with a class

Step 3: Add a picture

Step 4: Show the picture only once

Step 5: Move the picture

Step 6: Write it all in one line

Quick notes

Common mistakes

Forgetting the dot before a class name

Forgetting a semicolon

Writing the shorthand last

Test your knowledge

Recap

References