Coder Social home page Coder Social logo

css_exercise's Introduction

title slug
Exercise: CSS Intro
/css-intro-exercise

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.

css_exercise's People

Contributors

johndward01 avatar bryantellius avatar debmiera avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.