Review

CSS uses rules to define the design of an HTML element.

Here's an HTML element labeled with the CSS properties that control different aspects of its appearance. When you want to style an HTML element, imagine there is a box around it and apply these properties to style it.

We've already looked at three properties to control the appearance of an HTML element's text. The next few cards will cover five more properties that affect the space surrounding the text.

Css-summary

background-color

The background-color property sets the color for the background of an HTML element.

Css-4

Try it out

Change the background-color to the hex number #0099cc.


background-image

Instead of a solid color, the background-image property sets an image as the background of an HTML element.

Css-5

Try it out

Change the background-image to url('https://goo.gl/ODpi3y').


border

The border property sets the width, style, and color of an element's border

Css-6

Try it out

Set the border to 3px solid #cc0000. This changes the border width to 3px, the border style to solid, and the border color to #cc0000.


padding

The padding property creates space between the content and border of an element. This whitespace is useful in order to improve readability and organization of the page.

Css-7

Try it out

Increase the padding to 23px.


padding

The padding property sets the padding on all sides. It's possible to set the padding on each side.

The properties padding-top, padding-bottom, padding-left, and padding-right are available to set the padding on each side of an HTML element.

Css-7

Try it out

Set padding-top to 10px. Set padding-bottom to 23px.


margin

The margin property creates space for multiple HTML elements. The margin is a transparent area outside the border of an element.

Css-8

Try it out

Increase the margin to 14px.


margin

The margin property sets the margin on all sides. It's possible to set the margin on each side.

The properties margin-top, margin-bottom, margin-left, and margin-right are available to set the margin on each side of an HTML element.

Css-8

Try it out

Set margin-top to 10px. Set margin-left to 23px.


margin

The properties margin-left, and margin-right are available to set the margin on either side of an HTML element. If one of these properties is set to auto, then it will take as much as possible.

To move the HTML element to the far left of the screen, use margin-right: auto. This will maximize the amount of space there is on the right side margin, pushing the element to the far left.

To center an element, set margin-right: auto and margin-left: auto. The margin to the left and right will be equal and the element will be centered.

Css-8

Try it out

Below margin-right: auto, add margin-left: auto in order to center the h1 element.


<head> and <link>

Here's an example of using CSS in a web page:

  • The head element contains information that the web browser needs to display the page.

  • The link element tells the browser where to find the CSS file used to style the page. The rel attribute tells the browser that the file being linked is a CSS file to style the page. The href attribute gives the browser the path to the CSS file.

  • The body element contains the content of the page that shows up in the web browser.

Head-link
  • ?