Introduction to Basic CSS

Cascading Style Sheets (CSS) tell the browser how to display the text and other
content that you write in HTML.

Note that CSS is case-sensitive so be careful with your capitalization. CSS has
been adopted by all major browsers and allows you to control:

 color
 fonts
 positioning
 spacing
 sizing
 decorations
 transitions

There are three main ways to apply CSS styling. You can apply inline styles
directly to HTML elements with the styleattribute. Alternatively, you can place
CSS rules within styletags in an HTML document. Finally, you can write CSS
rules in an external style sheet, then reference that file in the HTML document.
Even though the first two options have their use cases, most developers prefer
external style sheets because they keep the styles separate from the HTML
elements. This improves the readability and reusability of your code. The idea
behind CSS is that you can use a selector to target an HTML element in the
DOM (Document Object Model) and then apply a variety of attributes to that
element to change the way it is displayed on the page.

In this section, you'll see how adding CSS styles to the elements of your
CatPhotoApp can change it from simple text to something more.
 Basic CSS: Import a Google Font
In addition to specifying common fonts that are found on most operating
systems, we can also specify non-standard, custom web fonts for use on our
website. There are various sources for web fonts on the internet but, for this
example we will focus on the Google Fonts library.

Google Fonts is a free library of web fonts that you can use in your CSS by
referencing the font's URL.

So, let's go ahead and import and apply a Google font (note that if Google is
blocked in your country, you will need to skip this challenge).

To import a Google Font, you can copy the font(s) URL from the Google Fonts
library and then paste it in your HTML. For this challenge, we'll import
the Lobsterfont. To do this, copy the following code snippet and paste it into the
top of your code editor(before the opening styleelement):

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"

type="text/css">

Now you can use the Lobsterfont in your CSS by using Lobsteras the

FAMILY_NAME as in the following example:
font-family: FAMILY_NAME, GENERIC_NAME; .

The GENERIC_NAME is optional, and is a fallback font in case the other

specified font is not available. This is covered in the next challenge.

Family names are case-sensitive and need to be wrapped in quotes if there is a

space in the name. For example, you need quotes to use the "Open Sans"font, but
not to use the Lobsterfont.

Create a font-familyCSS rule that uses the Lobsterfont, and ensure that it will be
applied to your h2element.
 Basic CSS: Import a Google Font
In addition to specifying common fonts that are found on most operating
systems, we can also specify non-standard, custom web fonts for use on our
website. There are various sources for web fonts on the internet but, for this
example we will focus on the Google Fonts library.

Google Fonts is a free library of web fonts that you can use in your CSS by
referencing the font's URL.

So, let's go ahead and import and apply a Google font (note that if Google is
blocked in your country, you will need to skip this challenge).

To import a Google Font, you can copy the font(s) URL from the Google Fonts
library and then paste it in your HTML. For this challenge, we'll import
the Lobsterfont. To do this, copy the following code snippet and paste it into the
top of your code editor(before the opening styleelement):

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"

type="text/css">

Now you can use the Lobsterfont in your CSS by using Lobsteras the

FAMILY_NAME as in the following example:
font-family: FAMILY_NAME, GENERIC_NAME; .

The GENERIC_NAME is optional, and is a fallback font in case the other

specified font is not available. This is covered in the next challenge.

Family names are case-sensitive and need to be wrapped in quotes if there is a

space in the name. For example, you need quotes to use the "Open Sans"font, but
not to use the Lobsterfont.

Create a font-familyCSS rule that uses the Lobsterfont, and ensure that it will be
applied to your h2element.
 Basic CSS: Specify How Fonts Should Degrade
There are several default fonts that are available in all browsers. These generic
font families include monospace, serifand sans-serif

When one font isn't available, you can tell the browser to "degrade" to another
font.

For example, if you wanted an element to use the Helveticafont, but degrade to

the sans-seriffont when Helveticawasn't available, you will specify it as follows:
p {
  font-family: Helvetica, sans-serif;
}

Generic font family names are not case-sensitive. Also, they do not need quotes
because they are CSS keywords.

To begin with, apply the monospacefont to the h2element, so that it now has two

fonts - Lobsterand monospace.

In the last challenge, you imported the Lobsterfont using the linktag. Now

comment out that import of the Lobsterfont(using the HTML comments you
learned before) from Google Fonts so that it isn't available anymore. Notice how
your h2element degrades to the monospacefont.

Note
If you have the Lobster font installed on your computer, you won't see the
degradation because your browser is able to find the font.
 Basic CSS: Add Borders Around Your Elements
CSS borders have properties like style, colorand width

For example, if we wanted to create a red, 5 pixel border around an HTML

element, we could use this class:

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

Create a class called thick-green-border. This class should add a 10px, solid,

green border around an HTML element. Apply the class to your cat photo.
 Basic CSS: Add Rounded Corners with border-radius
Your cat photo currently has sharp corners. We can round out those corners
with a CSS property called border-radius.

You can specify a border-radiuswith pixels. Give your cat photo a border-
radiusof 10px.

Note: this challenge allows for multiple possible solutions. For example, you
may add border-radiusto either the .thick-green-borderclass or the .smaller-
imageclass.

Basic CSS: Use a CSS Class to Style an Element

Classes are reusable styles that can be added to HTML elements.

Here's an example CSS class declaration:

<style>
  .blue-text {
    color: blue;
  }
</style>

You can see that we've created a CSS class called blue-textwithin the <style>tag.

You can apply a class to an HTML element like this:

<h2 class="blue-text">CatPhotoApp</h2>

Note that in your CSS styleelement, class names start with a period. In your
HTML elements' class attribute, the class name does not include the period.

Inside your styleelement, change the h2selector to .red-textand update the

color's value from blueto red.

Give your h2element the classattribute with a value of 'red-text'.

 Basic CSS: Set the id of an Element
In addition to classes, each HTML element can also have an idattribute.

There are several benefits to using idattributes: You can use an idto style a
single element and later you'll learn that you can use them to select and modify
specific elements with JavaScript.

idattributesshould be unique. Browsers won't enforce this, but it is a widely

agreed upon best practice. So please don't give more than one element the
same idattribute.

Here's an example of how you give your h2element the id of cat-photo-app:

<h2 id="cat-photo-app">

Give your formelement the id cat-photo-form.

 Basic CSS: Adjust the Padding of an Element
Now let's put our Cat Photo App away for a little while and learn more about
styling HTML.

You may have already noticed this, but all HTML elements are essentially little
rectangles.

Three important properties control the space that surrounds each HTML
element: padding, margin, and border.

An element's paddingcontrols the amount of space between the element's

content and its border.

Here, we can see that the blue box and the red box are nested within the yellow
box. Note that the red box has more paddingthan the blue box.

When you increase the blue box's padding, it will increase the distance(padding)
between the text and the border around it.
 Basic CSS: Adjust the Margin of an Element
An element's margincontrols the amount of space between an
element's borderand surrounding elements.

Here, we can see that the blue box and the red box are nested within the yellow
box. Note that the red box has a bigger marginthan the blue box, making it
appear smaller.

When you increase the blue box's margin, it will increase the distance between its
border and surrounding elements.

Change the marginof the blue box to match that of the red box.
 Basic CSS: Use Clockwise Notation to Specify the
Padding of an Element
Instead of specifying an element's padding-top, padding-right, padding-bottom,
and padding-leftproperties individually, you can specify them all in one line,
like this:

padding: 10px 20px 10px 20px;

These four values work like a clock: top, right, bottom, left, and will produce the
exact same result as using the side-specific padding instructions.
 Basic CSS: Use Attribute Selectors to Style Elements
You have been giving idor classattributes to elements that you wish to
specifically style. These are known as ID and class selectors. There are other CSS
Selectors you can use to select custom groups of elements to style.

Let's bring out CatPhotoApp again to practice using CSS Selectors.

For this challenge, you will use the [attr=value]attribute selector to style the
checkboxes in CatPhotoApp. This selector matches and styles elements with a
specific attribute value. For example, the below code changes the margins of all
elements with the attribute typeand a corresponding value of radio:
[type='radio'] {
  margin: 20px 0px 20px 0px;
}

Using the typeattribute selector, try to give the checkboxes in CatPhotoApp a top

margin of 10px and a bottom margin of 15px.

Basic CSS: Understand Absolute versus Relative Units

The last several challenges all set an element's margin or padding with pixels
(px). Pixels are a type of length unit, which is what tells the browser how to size
or space an item. In addition to px, CSS has a number of different length unit
options that you can use.

The two main types of length units are absolute and relative. Absolute units tie
to physical units of length. For example, inand mmrefer to inches and
millimeters, respectively. Absolute length units approximate the actual
measurement on a screen, but there are some differences depending on a
screen's resolution.

Relative units, such as emor rem, are relative to another length value. For
example, emis based on the size of an element's font. If you use it to set the font-
sizeproperty itself, it's relative to the parent's font-size.

Note
There are several relative unit options that are tied to the size of the viewport.
They are covered in the Responsive Web Design Principles section.

Add a paddingproperty to the element with class red-boxand set it to 1.5em.

 Basic CSS: Inherit Styles from the Body Element
Now we've proven that every HTML page has a bodyelement, and that
its bodyelement can also be styled with CSS.

Remember, you can style your bodyelement just like any other HTML element,
and all your other elements will inherit your bodyelement's styles.

First, create a h1element with the text Hello World

Then, let's give all elements on your page the color of greenby adding color:
green;to your bodyelement's style declaration.

Finally, give your bodyelement the font-family of monospaceby adding font-

family: monospace;to your bodyelement's style declaration.

Basic CSS: Override Class Declarations with Inline

Styles
So we've proven that id declarations override class declarations, regardless of
where they are declared in your styleelement CSS.

There are other ways that you can override CSS. Do you remember inline styles?

Use an inline styleto try to make our h1element white. Remember, in line

styles look like this:

<h1 style="color: green;">

Leave the blue-textand pink-textclasses on your h1element.

Basic CSS: Override All Other Styles by using

Important
Yay! We just proved that inline styles will override all the CSS declarations in
your styleelement.

But wait. There's one last way to override CSS. This is the most powerful method
of all. But before we do it, let's talk about why you would ever want to override
CSS.
In many situations, you will use CSS libraries. These may accidentally override
your own CSS. So when you absolutely need to be sure that an element has
specific CSS, you can use !important

Let's go all the way back to our pink-textclass declaration. Remember that

our pink-textclass was overridden by subsequent class declarations, id
declarations, and inline styles.

Let's add the keyword !importantto your pink-text element's color declaration to

make 100% sure that your h1element will be pink.

An example of how to do this is:

color: red !important;

Basic CSS: Use Hex Code for Specific Colors

Did you know there are other ways to represent colors in CSS? One of these
ways is called hexadecimal code, or hex codefor short.

We usually use decimals, or base 10 numbers, which use the symbols 0 to 9 for

each digit. Hexadecimals(or hex) are base 16 numbers. This means it uses sixteen
distinct symbols. Like decimals, the symbols 0-9 represent the values zero to
nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can
represent a digit in hexadecimal, giving us 16 total possible values. You can find
more information about hexadecimal numbers here.

In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red
(R), green (G), and blue (B) components. For example, #000000is black and is
also the lowest possible value. You can find more information about the RGB
color system here.
body {
  color: #000000;
}

Replace the word blackin our bodyelement's background-color with its hex

coderepresentation, #000000.

Basic CSS: Use Hex Code to Mix Colors

To review, hex codes use 6 hexadecimal digits to represent colors, two each for
red (R), green (G), and blue (B) components.

From these three pure colors (red, green, and blue), we can vary the amounts of
each to create over 16 million other colors!
For example, orange is pure red, mixed with some green, and no blue. In hex
code, this translates to being #FFA500.

The digit 0is the lowest number in hex code, and represents a complete absence
of color.

The digit Fis the highest number in hex code, and represents the maximum
possible brightness.

Replace the color words in our styleelement with their correct hex codes.

Color Hex Code

Dodger Blue #1E90FF

Green #00FF00

Orange #FFA500

Red #FF0000

<style>
.red-text {
color: #FF0000;
}
.green-text {
color: #00FF00;
}
.dodger-blue-text {
color:  #1E90FF;
}
.orange-text {
color:  #FFA500;
}
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="green-text">I am green!</h1>

<h1 class="dodger-blue-text">I am dodger blue!</h1>

<h1 class="orange-text">I am orange!</h1>
 Basic CSS: Use Abbreviated Hex Code
Many people feel overwhelmed by the possibilities of more than 16 million
colors. And it's difficult to remember hex code. Fortunately, you can shorten it.

For example, red's hex code #FF0000can be shortened to #F00. This shortened

form gives one digit for red, one digit for green, and one digit for blue.

This reduces the total number of possible colors to around 4,000. But browsers
will interpret #FF0000and #F00as exactly the same color.

Go ahead, try using the abbreviated hex codes to color the correct elements.

<style>
.red-text {
color: #F00;
}
.fuchsia-text {
color: #F0F;
}
.cyan-text {
color: #0FF;
}
.green-text {
color: #0F0;
}
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>

 Basic CSS: Use RGB values to Color Elements
Another way you can represent colors in CSS is by using RGBvalues.

The RGB value for black looks like this:

rgb(0, 0, 0)

The RGB value for white looks like this:

rgb(255, 255, 255)

Instead of using six hexadecimal digits like you do with hex code, with RGByou
specify the brightness of each color with a number between 0 and 255.

If you do the math, the two digits for one color equal 16 times 16, which gives us
256 total values. So RGB, which starts counting from zero, has the exact same
number of possible values as hex code.

Here's an example of how you'd change the body background to orange using its
RGB code.

body {
  background-color: rgb(255, 165, 0);
}

Let's replace the hex code in our bodyelement's background color with the RGB
value for black: rgb(0, 0, 0)

<style>
body {
background-color: rgb(0,0,0);
}
</style>
 Basic CSS: Use CSS Variables to change several
elements at once
CSS Variables are a powerful way to change many CSS style properties at once
by changing only one value.

Follow the instructions below to see how changing just three values can change
the styling of many elements.

In the penguinclass, change the blackvalue to gray, the grayvalue to white, and

the yellowvalue to orange.

Basic CSS: Create a custom CSS Variable

To create a CSS Variable, you just need to give it a namewith two dashesin front of
it and assign it a valuelike this:

--penguin-skin: gray;

This will create a variable named --penguin-skinand assign it the value of gray.

Now you can use that variable elsewhere in your CSS to change the value of
other elements to gray.

In the penguinclass, create a variable name --penguin-skinand give it a value

of gray

style>
.penguin {

/* add code below */

--penguin-skin: gray;
/* add code above */

Basic CSS: Use a custom CSS Variable

After you create your variable, you can assign its value to other CSS properties
by referencing the name you gave it.

background: var(--penguin-skin);
This will change the background of whatever element you are targeting to gray
because that is the value of the --penguin-skinvariable.

Note that styles will not be applied unless the variable names are an exact
match.

Apply the --penguin-skinvariable to the backgroundproperty of the penguin-

top, penguin-bottom, right-handand left-handclasses.

Basic CSS: Use a custom CSS Variable

After you create your variable, you can assign its value to other CSS properties
by referencing the name you gave it.

background: var(--penguin-skin);

This will change the background of whatever element you are targeting to gray
because that is the value of the --penguin-skinvariable.

Note that styles will not be applied unless the variable names are an exact
match.

Apply the --penguin-skinvariable to the backgroundproperty of the penguin-

top, penguin-bottom, right-handand left-handclasses.

Basic CSS: Attach a Fallback value to a CSS Variable

When using your variable as a CSS property value, you can attach a fallback
value that your browser will revert to if the given variable is invalid.

Note: This fallback is not used to increase browser compatibilty, and it will not
work on IE browsers. Rather, it is used so that the browser has a color to display
if it cannot find your variable.

Here's how you do it:

background: var(--penguin-skin, black);

This will set background to black if your variable wasn't set.

Note that this can be useful for debugging.

It looks there is a problem with the variables supplied to the .penguin-
topand .penguin-bottomclasses. Rather than fix the typo, add a fallback value
of blackto the backgroundproperty of the .penguin-topand .penguin-bottomclasses.

Basic CSS: Cascading CSS variables

When you create a variable, it becomes available for you to use inside the
element in which you create it. It also becomes available within any elements
nested within it. This effect is known as cascading.

Because of cascading, CSS variables are often defined in the :rootelement.

You can think of the :rootelement as a container for your entire HTML

document, in the same way that an htmlelement is a container for
the bodyelement.

By creating your variables in :root, they will be available throughout the whole
web page.

Define a variable named --penguin-bellyin the :rootselector and give it the value

of pink. You can then see how the value will cascade down to change the value to
pink, anywhere that variable is used.