From b5c13ebd4b823704ea8b5aba3496a0af446719b1 Mon Sep 17 00:00:00 2001
From: gent009 <167322651+gent009@users.noreply.github.com>
Date: Wed, 29 May 2024 23:23:21 +0100
Subject: [PATCH] selectors
---
index.html | 45 +++++++++++++++++++++++--------------------
styles.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 80 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
index 7b65980..ae0d1d6 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,13 @@
-
-
-
-
+
+
+
+
CSS Selector Fun
-
-
-
+
+
Make this text orange and 28px
Make this text orange and 28px
Make this text orange and 28px
@@ -26,34 +25,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..fbd2d97 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,56 @@
+p {
+ font-size: 28px;
+}
+p:not(.paragraph):not(#paragraph) {
+ color: orange;
+}
+.paragraph {
+ color: green;
+}
+#paragraph {
+ color: red;
+}
+
+h1,
+h2,
+h3,
+h4 {
+ color: pink;
+}
+
+div.container-one p,
+div.container-two p {
+ margin-left: 10px;
+ border-bottom: 2px solid black;
+}
+div.container-one p {
+ color: blue;
+ font-size: 12px;
+ border-bottom-width: 2px;
+}
+
+div.container-two p {
+ color: purple;
+ font-size: 15px;
+ border-bottom-width: 1px;
+}
+
+div.container-one p span {
+ color: blue;
+}
+div.container-two p span {
+ color: grey;
+ font-size: 12px;
+}
+
+div .container-one .container-two p {
+ color: purple;
+ font-size: 10px;
+ text-transform: uppercase;
+ font-weight: bold;
+}
+section .container-one .container-two p,
+section .container-one .container-two p span {
+ color: orange;
+ font-size: 28px;
+}