Giter Club home page Giter Club logo

lesson-css-selector-basic's Introduction

CSS Selector Basics

Style using Classes and IDs - Independent Practice (10 mins) - PART 1

Using what we've done in class and see how far you can get through these exercises in 10 minutes:

  • make an unordered HTML list of the following animals:

    • mouse
    • canary
    • penguin
    • salmon
    • cat
    • goldfish
    • dog
    • sheep
    • parakeet
    • tuna
  • make all the mammals red, all the birds blue, and all the fish orange using CSS classes

  • apply the following colors to the list using IDs:

    • mouse - gray
    • canary - orangeRed
    • penguin - black
    • salmon - salmon
    • cat - sienna
    • goldfish - gold
    • dog - tan
    • sheep - steelBlue
    • parakeet - lime
    • tuna - purple
  • add the following background colors to your existing classes:

    • mammal - lavenderBlush
    • bird - lightGray
    • fish - lightYellow

Independent Practice - Using CSS to select class and id attributes (10 minutes) - PART 2

Go back to your code from the previous independent practice problem and continue to work through these exercises:

  • make the mammals bold

  • make the birds italic

  • make the fish underlined

  • create a new unordered list add a list item for each the following plants:

    • Dogwood Tree
    • Oak Tree
    • Saguaro
    • Kelp
    • Venus Fly Trap
    • Ent
  • give all ul's a border with a width of 3 pixels, a color of plum, and a style of dotted. Also, give them a border radius of 5px.

  • give all li's a top border of 3 pixels, a color of seagreen, and a style of solid.

lesson-css-selector-basic's People

Contributors

dshcheung avatar sytong avatar tan-sam avatar

Watchers

 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.