diff --git a/index.html b/index.html
index 7b65980..a4be354 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,17 @@
-
-
-
-
+
+
+
+
CSS Selector Fun
-
-
- Make this text orange and 28px
- Make this text orange and 28px
- Make this text orange and 28px
+
+
+ Make this text orange and 28px
+ Make this text orange and 28px
+ Make this text orange and 28px
Make this text green and 28px
Make this text red and 28px
@@ -26,34 +26,38 @@ Make this heading pink
but also some slightly different styles. Is there a way we can avoid
repeating the common styles in the stylesheet? -->
- This text should stay black and 28px
-
- Make this text blue and 12px. Make this paragraph have 10px left margin and a black 2px bottom border.
-
+ This text should stay black and 28px
+
+ Make this text blue and 12px. Make this paragraph have 10px
+ left margin and a black 2px bottom border.
+
-
This text should stay black and 28px.
-
- Make this text purple and 15px. Make this paragraph have 10px left margin and a black 1px bottom border.
-
- Make this text 12px and grey.
-
+
Make this text 12px and grey.
+
-
This text should be purple, 10px, all capitals and bold. Make this paragraph have 10px left margin and black 1px bottom border.
+
+ This text should be purple, 10px, all capitals and bold. Make this
+ paragraph have 10px left margin and black 1px bottom border.
+
Make this text orange and 28px.
+ Make this text orange and 28px.
-
-
+
diff --git a/styles.css b/styles.css
index e69de29..d57df7d 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,56 @@
+.paragraph {
+ color: green;
+ font-size: 28px;
+}
+#paragraph {
+ color: red;
+ font-size: 28px;
+}
+h1,
+h2,
+h3,
+h4 {
+ color: pink;
+}
+.container-one {
+ color: black;
+ font-size: 28px;
+}
+.container-one p {
+ color: blue;
+ font-size: 12px;
+ margin-left: 10px;
+ border-bottom: 2px solid black;
+}
+.container-two span {
+ color: black;
+ font-size: 28px;
+}
+.container-two p {
+ color: purple;
+ font-size: 15px;
+ margin-left: 10px;
+ border-bottom: 2px solid black;
+}
+.container-two p span {
+ color: grey;
+ font-size: 12px;
+}
+.container-one.container-two p {
+ font-size: 10px;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+section.container-one.container-two p {
+ color: orange;
+ font-size: 28px;
+ text-transform: initial;
+ font-weight: normal;
+ border-bottom: none;
+}
+section.container-one.container-two p span {
+ color: orange;
+ font-size: 28px;
+ text-transform: lowercase;
+ font-weight: normal;
+}