From b032444d2c7270ebaddbb7875fc90843ace48a0b Mon Sep 17 00:00:00 2001 From: Hamza Ahmed Date: Thu, 5 Oct 2023 11:22:17 +0100 Subject: [PATCH] done core --- .vscode/settings.json | 3 ++ index.html | 45 ++++++++++++++++-------------- styles.css | 64 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+), 21 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} 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..31423bd 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,64 @@ +p { + font-size: 28px; + color: orange; +} + +.paragraph { + color: green; + font-size: 28px; +} + +#paragraph { + color: red; + font-size: 28px; +} + +h1, +h2, +h3, +h4 { + color: pink; +} + +.container-one { + font-size: 28px; +} + +.container-one p { + color: blue; + font-size: 12px; + margin-left: 10px; + border-bottom: solid black 2px; +} + +.container-two > span { + font-size: 28px; + color: black; +} + +.container-two p { + color: purple; + font-size: 15px; + margin-left: 10px; + border-bottom: solid 1px black; +} + +.container-two > p > span { + font-size: 12px; + color: grey; +} + +div.container-one.container-two > p { + color: purple; + font-size: 10px; + font-weight: bold; + text-transform: uppercase; + margin-left: 10px; + border-bottom: rgb(0, 0, 0) 1px solid; +} + +section.container-one.container-two > p, +section.container-one.container-two > p > span { + color: orange; + font-size: 28px; +}