Skip to main content

Exercise: CSS Intro

Exercise Repo

Objective#

Practice using CSS rulesets to add styles to web pages.

Exercise 1#

Steps are to be completed in your root directory (CSS_Exercise/) and index.html file.

  1. Create a new css file, named index.css, in your project's root directory
  2. Create a link element nested in the <head></head> of your index.html file, that contains an href attribute with a value that links to your newly created external stylesheet (don't forget to add a rel attribute to describe the linked content as a stylesheet*)

Exercise 2#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Add a nav-link class name to each anchor element on your page.
  2. Create a ruleset in your index.css file that selects all elements with nav-link class name
  3. Create a declaration in your new ruleset that changes the text color of the nav-link elements to orange
  4. Create a declaration in your new ruleset that changes the text decoration of the nav-link elements to none, to remove the default underline for links.

Exercise 3#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Create a ruleset in your index.css file that selects all elements with the main tag name
  2. Create a declaration in your new ruleset that changes the max width of the main elements to 600px
  3. Create a declaration in your new ruleset that changes the margin top and margin bottom of the main elements to 24px, to center the main elements between the left and right edges of the page (or their containing element).
  4. Create a declaration in your new ruleset that changes the margin left and margin right of the main elements to auto, to center the main elements between the left and right edges of the page (or their containing element).

Exercise 4#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Create a ruleset in your index.css file that selects all elements with the section tag name
  2. Create a declaration in your new ruleset that changes the margin top and margin bottom of the section elements to 24px, to center the section elements between the left and right edges of the page (or their containing element).
  3. Create a declaration in your new ruleset that changes the padding left, padding right, padding top and padding bottom of the section elements to 16px, to give the section elements space between their content and border.

Exercise 5#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Add a title id attribute to the h1 element in your index.html file
  2. Create a ruleset in your index.css file that selects the element with the title id
  3. Create a declaration in your new ruleset that changes the font size of the title element to 40px.
  4. Create a declaration in your new ruleset that changes the font weight of the title element to 800, to give the title element's text a bolded font weight.

Exercise 6#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Add a d-inline class name attribute to the current li elements in your index.html file
  2. Create a ruleset in your index.css file that selects the element with the d-inline class name
  3. Create a declaration in your new ruleset that changes the display of the d-inline elements to inline, to have each <li></li> display as an inline element.

Exercise 7#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Create a ruleset in your index.css file that selects any <ul></ul> element nested as a child of a <nav></nav> element. Use the descendent selector.
  2. Create a declaration in your new ruleset that changes the list style of the nav > ul elements to none, to remove the bullet points that are displayed by default for lists.

Exercise 8#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Create a ruleset in your index.css file that selects the <body></body> element.
  2. Create a declaration in your new ruleset that changes the background color of the <body></body> element to #222222.
  3. Create a declaration in your new ruleset that changes the text color of the <body></body> element's text content to #EEEEEE.

Exercise 9#

Steps are to be completed by writing css rulesets in your index.css file.

  1. Add an avatar id attribute to the <img> element in your index.html file.
  2. Create a ruleset in your index.css file that selects the element with the avatar id.
  3. Create a declaration in your new ruleset that changes the width of the avatar element to 100px.
  4. Create a declaration in your new ruleset that changes the margin left and margin right of the avatar element to auto.
  5. Create a declaration in your new ruleset that changes the margin top and margin bottom of the avatar element to 32px.