From 77967a1842f9ad5711e1824d42773b2ed7faee0d Mon Sep 17 00:00:00 2001 From: Hamada Abdelaal Date: Tue, 5 Mar 2024 12:16:08 +0100 Subject: [PATCH 1/2] CSS Selector Fun --- index.html | 59 ++++++++++++++++++++++++---------------------- styles.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 7b65980..629bda3 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,62 @@ - - - - + + + + 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

-

Make this heading pink

-

Make this heading pink

-

Make this heading pink

-

Make this heading pink

+

Make this heading pink

+

Make this heading pink

+

Make this heading pink

+

Make this heading pink

- 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..a11ba68 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,69 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; + margin-bottom: 30px; +} + +p { + font-size: 28px; +} + +.orange-color { + color: orange; +} + +.paragraph { + color: green; +} + +#paragraph { + color: red; +} + +.pink-color { + color: pink; +} + +.container-one, +.container-two { + color: black; + font-size: 28px; +} + +.container-one p { + color: blue; + font-size: 12px; + border-bottom: 2px solid black; +} + +.container-two p { + color: purple; + font-size: 15px; + border-bottom: 1px solid black; +} + +.container-one p, +.container-two p, +.container-one.container-two p { + margin-left: 10px; +} + +.container-two p span { + color: gray; + font-size: 12px; +} + +.container-one.container-two p { + color: purple; + font-size: 10px; + font-weight: bold; + text-transform: uppercase; + border-bottom: 1px sokid black; +} + +section.container-one.container-two p, +section.container-one.container-two span { + color: orange; + font-size: 28px; +} From 6455190e6728dee974b2d5a7effe40d9876bc02c Mon Sep 17 00:00:00 2001 From: Hamada Abdelaal Date: Tue, 5 Mar 2024 12:29:10 +0100 Subject: [PATCH 2/2] font-weight normal for the last p --- styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/styles.css b/styles.css index a11ba68..6d7c195 100644 --- a/styles.css +++ b/styles.css @@ -66,4 +66,5 @@ section.container-one.container-two p, section.container-one.container-two span { color: orange; font-size: 28px; + font-weight: normal; }