CSS

3. CSS Mission

You now have Spider-Man’s WWW and Iron Man's HTML structure. Now Shuri needs your help to bring style to T’Challa and add Black Pantherto the team.

If you can't watch the video on YouTube click here.

How do you tell the computer what styles and colors to use on your web page?

Below are the goals and challenges you must complete to get Black Panther's help.

Goals:

Use the CSS language to change the style of the text on a web page.
Represent colors using RGB and Hexadecimal.

images and text are pile of bones, HTML is skeleton, CSS is style

Challenge 3.1: Change the Style (color, font, size) of text on Web Page

Watch the video to learn how to add style to your HTML elements and complete slide 24. If you can't watch it on YouTube click here.
Try it yourself to add style rules to the paragraph element and complete slides 25.

Identify parts of a CSS rule: element, property, colon, value, semicolon

Challenge 3.2 CSS: RGB and Hex Color Codes

Watch the video to learn about representing colors on a computer using RGB and Hexadecimal. Complete slide 26. If you can't watch the video on youtube click here
Advanced: Watch the video below to learn how hexadecimal is used to represent RGB values. Click here if you can't watch it on YouTube. Complete slide 27.

Challenge 3.3: Build a practice web page

Watch the video below to see how you can make a practice web page. If you can't watch the video on youtube click here. Complete slide 28.
Summarize what you have learned about HTML and CSS on slide 29.
Use what you learned about HTML and CSS. Complete slide 30 to make a practice web page. This is only practice and your web page won't be saved. In the next section you will create your website.

3.4 Final CSS Challenge

Time to complete your mission goals

Use the CSS language to change the style of the text on a web page.
Represent data using RGB and HEX symbols.

Complete CSS Challenge and add Black Panther to your team. You can use your notes. When you demonstrate the CSS goals you will receive an email from Black Panther.

Vocabulary

CSS

CSS stands for Cascading Style Sheets. CSS is a language used to describe how the HTML elements should be displayed on a web page.

CSS Selector

A CSS selector is used to choose the HTML element you want to style. To Select ( escoger ) is to choose.

CSS Selector

A CSS Property is what you want to change about the element. A property ( ela propiedad ) is a special quality or characteristic of something. For example, one property about a person could be the color of their hair. A property you might want to change is the color of a heading 1 (h1).

CSS Value

A CSS Value is what you want to set the CSS property to. In math the value ( el valor ) can be different numbers, x = 4 or x = -1. For example, the CSS color property can have different values such as red or blue. The font-size property can be 25px or 20px.

Pixel

Pixels ( el píxel ) are tiny little dots of light that make up images on a comptuer screen. These little dots are actually mutliple tiny dots of little lights of different colors - red, green or blue.

Colors: RGB & Hexadecimal

A single pixel is made up of different values for red, green and blue - RGB. Each value can range from 0 to 255 for each and is stored in triplets (R, G, B). For example, the RGB value for a pink color is (247, 219, 236).

A shorter way to represent an RGB color is using hexadecimal color. Each RGB value from 0 to 255 is converted to a hexadecimal in the form #RRGGBB. The color pink above (247, 219, 236) can be converted where 247 is f7, 219 is db and 236 is ec in hexadecimal. So you can use #f7dbed to represent the color pink as a value for changing colors usnig CSS styles.

« Prev Mission 2: HTML Next Mission 4: Share»