Add exercise instructions for css foundations

foundations/01-css-methods/README.md

@@ -0,0 +1,16 @@
+# Methods for Adding CSS
+In this exerrcise, you're going to practice adding CSS to an HTML file using all three methods: external CSS, internal CSS, and inline CSS.
+
+There are three elements for you to add styles to, each of which uses a different method of adding CSS to it, as noted in the outcome image below. All other exercises in this section will have a CSS file provided and linked for you, but for this exercise you will have to create the file and link it in the HTML file yourself.
+
+You should only be using type selectors for this exercise when adding styles via the external and internal methods.
+
+## Desired Outcome
+<!-- Insert Outcome Image -->
+
+### Self Check
+- Did you use all three methods of adding CSS to an HTML file?
+- Did you properly link the external CSS file in the HTML file?
+- Does the `div` element have CSS added via the external method?
+- Does the `p` element have CSS added via the internal method?
+- Does the `button` element have CSS added via the inline method?

foundations/02-class-id-selectors/README.md

@@ -0,0 +1,14 @@
+# Class and ID Selectors
+Knowing how to add class and ID attributes to HTML elements, as well as use their respective selectors, is invaluable, and it's important to practice using them.
+
+There are several elements in the HTMl file provided, which you will have to add either class or ID attributes to as noted in the outcome image below. You will then have to add rules in the CSS file provided using the correct selector syntax. Look over the outcome image carefully, and try to keep in mind what elements look similarly styled (classes), which ones may be completely unique from the rest (ID), and which ones have slight variations from others (multiple classes).
+
+It isn't entirely important what class or ID values you use, as the focus here is being able to add the attributes and use the correct selector syntax to style elements.
+
+## Desired Outcome
+<!-- Insert Outcome Image -->
+
+### Self Check
+- Do the odd numbered `div` elements share a class?
+- Do the even numbered `div` elements have unique ID's?
+- Does the 3rd `div` element have multiple classes?

foundations/03-grouping-selectors/README.md

@@ -0,0 +1,15 @@
+# Grouping Selectors
+
+Let's build a little off the previous exercise, where you (hopefully) added multiple classes to a single element in order to apply two different rules to it.
+
+Instead of having a single element with two different rules applied, though, we're instead going to give two elements each a unique class name, then add rules for styles that both elements share as well as their own unique styles. Make sure you take a good look at the outcome image below to see exactly what is unique about each element, and what both elements have in common.
+
+This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file.
+
+## Desired Outcome
+<!-- Insert Outcome Image -->
+
+### Self Check
+- Does each element have a unique class name?
+- Did you use the grouping selector for styles that both elements share?
+- Did you make separate rules for the styles unique to each element?

foundations/04-chaining-selectors/README.md

@@ -0,0 +1,10 @@
+# Chaining Selectors
+With this exercise we've provided you a completed HTML file, so you will only have to edit the CSS file. It's more important to understanding how chaining different selectors works for this exercise than actually adding the attributes.
+
+We have two different elements for you to style, each with two class names where one of the class names is shared. The goal here is to chain the selectors for both elements so that each have a unique style applied despite using a shared class selector. In other words, you want an element that has both X and Y to have one set of styles, while an element with X and Z has a completely different set of styles.
+
+## Desired Outcome
+<!-- Insert Outcome Image -->
+
+### Self Check
+- Did you properly chain class selectors for each rule?

foundations/05-descendant-combinator/README.md

@@ -0,0 +1,13 @@
+# Descendant Combinator
+Understanding how combinators work can become a lot easier when you start playing around with them and seeing what exactly is affected by them versus what isn't.
+
+The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that *aren't* descendants of that element unstyled.
+
+You can use either type or class selectors for this exercise, whichever you may feel you want to practice with more. The HTML file is setup (so no need to edit anything on your part in it) where any combination of selectors will work, so if you're feeling adventurous you can even try combining a type *and* class selector for the descendant combinator.
+
+## Desired Outcome
+<!-- Insert Outcome Image -->
+
+### Self Check
+- Do the elements that contain the text "This should be styled" have the correct styles applied?
+- Do the elements that contain the text "This should be unstyled" have no styles applied?

foundations/06-cascade-fix/README.md

@@ -0,0 +1,15 @@
+# CSS Methods
+This final exercise for CSS Foundations is going to get you a little more comfortable with the cascade, specificity and rule order in particular. Both the HTMl and CSS files are filled out for you, so instead of adding rules yourself you will simply be editing what is provided.
+
+There are several elements that have some sort of specificity or rule order issue in the provided CSS file. Each element that you must fix will contain text that tells you how to fix the issue, either "Fix specificity" or "Fix rule order".
+
+Specificity issues will require you to either add or remove a selector from an already existing rule, while rule order issues will require you to remove an entire rule from its current position and place it at the end of the CSS file in a particular order.
+
+Issues with the cascade can be the bane for many when it comes to CSS, so once you complete this exercise you'll be one step ahead of the curve and on your way to loving CSS (or at the very least being friendly acquaintances with it).
+
+## Desired Outcome
+<!-- Insert Outcome Image -->
+
+### Self Check
+- Do all rules for elements labeled "Fix specificity" have the correct selector added or removed?
+- Are all rules for elements labeled "Fix rule order" placed at the end of the CSS file and in the correct order?