Craigslist is a notoriously under-designed and also very successful website. Its table-like design, gray panels, and royal blue hyperlinks hearken back to the early days of the Internet. It might be a blast from the past, but with a few simple style tweaks we can bring Craigslist into the modern world.

In this practice, you will use CSS attributes to update the styles on an example Craigslist homepage. Use what you've learned about HTML attributes and CSS selectors to apply styles to various DOM elements.

Clone the practice from the starter.

Once you've in VS Code, you can drag the index.html file into your browser to view the webpage, or use the File Explorer to open it in your browser.

Remember to save the CSS file and refresh the page in the browser whenever you make changes.

In some of the instructions, you will be given the name of a CSS property that you are to use. You can use the MDN CSS Reference to help you figure out how to use those properties. Once a property has been introduced to you, following instructions that use it will not refer to the property, again.

The objective of this practice is to re-skin the Craigslist homepage to use a more modern design aesthetic. Visit craigslist.org to see the most current version of the site. The following two screenshots show Craigslist's current homepage and an updated homepage, respectively.

Current Craigslist homepage:

A more modern Craigslist homepage:

The index.html file contains all the HTML for the example Craigslist homepage. Write all of your CSS for the page in main.css, which is linked in the HTML file.

Your Craigslist page should be bare-bones HTML at this point. Add the following initial styles to the page in your main.css file to make it look better:

Use the universal selector to make all elements:

• Use the font "Helvetica Neue", "Helvetica", sans-serif
• Have a background color of Whitesmoke (#F5F5F5)
• Have a text color of Charcoal Gray (#464646)

Use tag selectors to:

• Remove the underline text decoration on all anchor tags by using the text-decoration property
• Give all UL elements 0 padding using the padding property

Use a child combinator selector to:

• Remove the bullet points on all LI elements that are direct children of UL elements using the list-style property

Use pseudo-classes on all <a> tags to:

• Have the Craigslist purple color #800080 when they are visited
• Have a font weight of bold and color #800080 when they are are hovered

Use pseudo-classes on all <span>s that are direct children of <a> tags to:

• Have a font weight of bold and color #800080 when they are are hovered

There are three main sections in the body of the page, represented by the HTML elements with these IDs: "leftbar", "center" and "rightbar". Style their container, represented by the element with the class name of "page-container", as well as the three main sections, according to the specs below.

Use a class selector to select the element with the class "page-container" and:

• Give the container a maximum width of 1200 pixels using the max-width property

Use ID selectors to style the elements with the IDs "leftbar", "center", and "rightbar" so that:

• They are all floated left using the float property
• They all have top/bottom padding of zero and left/right padding of 30 pixels using the padding property
• They all have a box sizing of border box using the box-sizing property

Use a tag selector on the FOOTER element to:

• Make the footer clear the float in both directions using the clear property

Use ID selectors to select the elements with the IDs "leftbar" and "rightbar" and:

• Give them a width of 25%

Use an ID selector to select the element with the ID "center" and:

• Give it a width of 50%
• Give it a solid one pixel border in the color #464646
• Give it a border radius of ten pixels using the border-radius property

Use a child combinator selector to style all DIVs that are direct children of the element with the "center" ID:

• Float them to the left
• Give each of them a width of 33%

Use a descendant combinator selector to style the H2 that is a descendant of the element with the "topban" ID:

• Align the text of the H2 to the center

Use a tag+class selector to style the UL element with the class name "clfooter" and:

• Align the text of the UL to the center
• Give it a top border only that is one pixel solid gray
• Give it top/bottom padding of ten pixels and left/right padding of zero pixels

Use a child combinator selector to style all LI elements that are direct children of the UL with the class name "clfooter" and:

• Display all LIs as inline elements using the display property
• Give all LIs in the ul.clfooter 5px padding on the right side

The Craigslist logo is a purple peace sign, which also happens to be a common emoji these days. What else screams 2010s and beyond better than emojis? So, let's add some to the Craigslist homepage!

Peace Symbol Emoji:

Create pseudo-elements to add the purple peace sign emoji before every H4 element with the class name "ban" using the ::before pseudo-element.

Hint: While pseudo-classes let you style elements based on their state, pseudo-elements let you style specific parts of the selected element. The ::before pseudo-element will create a pseudo-element that is the first child of the selected element. This pseudo-element will not introduce a new element into the DOM (hence, pseudo).

macOS Pro-Tip: You can use Control+Command+Spacebar on a Mac to pull up the emoji keyboard. Search for the purple peace sign emoji.

Right now, the calendar is looking a little peaked.

• Set the border on each TD to be a solid 1px with color #333.
• Use the border-collapse property on the table with the class of "cal" to collapse the borders around each date into a single calendar.
• Change all the colors of the text of the links to green.
• Make all of the link texts bold.
• Center-align the content of all the TDs in the calendar.
• Change the color of the text of the days in the calendar that are not links to a half-transparent black.
• Use the cursor property to indicate that a day without a link is not clickable. You'll have to analyze the HTML to figure out how to do that. You cannot use CSS selectors to select an element and, then, apply a style to a parent element. So, you'll need to figure out a way to select those table data elements.
• Highlight the day indicated as "today" (look at the HTML) by setting its background color to dark violet and its text color to white.
• When the pointer (cursor) is over one of the table data cells that contains the numbers, have the table cell's background color turn lavender.

In this project, you used pseudo-classes to style elements based on their hover and visited states. Can you use more pseudo-classes? Use -three more pseudo-classes* to style elements on the page.

Check out the MDN doc on pseudo-classes for a full list. Some good ones to use: :focus, :first-child, :last-child, :nth-child

Go back through and make additional changes as you see fit -- make it your own! Have fun with it.