Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Project CSS A1 CSS Setup and Selectors

Topics: Inline Styles , The <style> Tag , Linking the CSS File , Tag Name , Class Name , Multiple Classes , ID Name , Classes and IDs , Specificity , Chaining Selectors , Nested Elements , Chaining and Specificity , Important , Multiple Selectors

Project Title : Letter Format

  1. Create a folder with your name like john inside this folder.
  2. In this newly created folder, create an html file named letter-format.html
  3. Add current code to that file:
<!DOCTYPE html>
      /* css code here */
  1. Create a paragraph with this text under body tag. Then use inline style to set text color bule and font size 18px.
Letter Date

Open letter-format.html in the browser and monitor changes.

  1. Create another paragraph with this text after previous paragraph. Use internal style to define a style for p tag and set the color to green.
Contact Information
Your Name
Your Email Address
  1. At the same location as html file, create a css file named style.css

  2. Link style.css to format-letter.html. Hint: Add style tag to head section of html file and set href, ref and type attributes.

  3. Set font-weight to bold for p tag in the style.css and check changes in the browser.

  4. Add a div tag after prvious p tag with this text. set divs color brown in the style.css.

Dear Mr./Ms. Last Name:
  1. Add another div with this text and set its class to main. Set main class font to italic in the style.css.
Body of Letter
The first paragraph of your letter should provide an introduction as to why you are writing so that your purpose is obvious from the very beginning.
  1. Add another div with this text and set its id to closing. Set closing id font decoration to underline.
Best regards,
Your Name
  1. Create a new div with class="list". Then, add an unordered list include these items.
Letter Date
Contact Information
Body of Letter
  1. Change items colors to red through Chaining and Specificity. All lis inside list class should be green.

Want to get reviewed?

Send Pull Request. Check how to deliver your code:

Need help?

Download Free eBook

You can’t perform that action at this time.