From af84614dac9efcf479f868db1956f7684198561d Mon Sep 17 00:00:00 2001 From: Usama Date: Sat, 30 Sep 2023 03:04:34 +0100 Subject: [PATCH 1/2] completed exercise --- .vscode/settings.json | 3 +++ css_fun.css | 51 +++++++++++++++++++++++++++++++++++++ css_fun.html | 47 ++++++++++++++++++++++++++++++++++ index.html | 59 ------------------------------------------- 4 files changed, 101 insertions(+), 59 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 css_fun.css create mode 100644 css_fun.html delete mode 100644 index.html diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/css_fun.css b/css_fun.css new file mode 100644 index 0000000..924efa1 --- /dev/null +++ b/css_fun.css @@ -0,0 +1,51 @@ +.different_color p { + color: orange; + font-size: larger; + +} +header { + text-align: center; +} + +.black p { + color: black; + font-size: larger; +} + +.different_color > p:nth-of-type(4) { + color: green; +} +.different_color > p:nth-of-type(5) { + color: red; +} + +.TheHeads { + color: pink; +} + +.smaller { + position: relative; + top: 12px; + color: blue; +} + +.smalls { + font-size: 11px; + position: relative; + top: 12px; + color: purple; +} + +.smallas { + color: purple; + position: relative; + top: 12px; + font-size: 11px; +} +.yellow { + color: orange; +} + +.no-bullet { + list-style-type: none; +} \ No newline at end of file diff --git a/css_fun.html b/css_fun.html new file mode 100644 index 0000000..906e7d2 --- /dev/null +++ b/css_fun.html @@ -0,0 +1,47 @@ + + + + + + Document + + + +

CSS Selector Fun

+
+
+
+
+

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

+
+

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. +

+
+ +

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.

+ + +
+ + \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 7b65980..0000000 --- a/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - CSS Selector Fun - - - -

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

- - -
- 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. -

-
- - -
-

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.

-
- - - From d03bdaa6c3aa946ae0f0be6d0845cfc53393a793 Mon Sep 17 00:00:00 2001 From: usama ibrahim Date: Sat, 7 Oct 2023 10:53:38 +0100 Subject: [PATCH 2/2] completed exercise --- .vscode/settings.json | 2 +- css_fun.css | 33 +++++++++++++++++++++++++-------- css_fun.html | 10 +++++----- 3 files changed, 31 insertions(+), 14 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index f673a71..155422b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5502 + "liveServer.settings.port": 5503 } \ No newline at end of file diff --git a/css_fun.css b/css_fun.css index 924efa1..516d76a 100644 --- a/css_fun.css +++ b/css_fun.css @@ -1,51 +1,68 @@ .different_color p { color: orange; - font-size: larger; + font-size: 28px; } header { text-align: center; } -.black p { - color: black; - font-size: larger; -} - .different_color > p:nth-of-type(4) { color: green; + font-size: 28px; } .different_color > p:nth-of-type(5) { color: red; + font-size: 28px; } .TheHeads { color: pink; + font-size: 3s0px; } .smaller { position: relative; top: 12px; color: blue; + font-size: 12px; + margin-left: 10px; + border-bottom: solid 2px ; } .smalls { - font-size: 11px; + font-size: 15px; position: relative; top: 12px; color: purple; + border-bottom: solid 2px; + margin-left: 10px; } .smallas { color: purple; position: relative; top: 12px; - font-size: 11px; + font-size: 10px; + margin-left: 10px; + border-bottom: solid 1px black; } + + .yellow { color: orange; + font-size: 28px; } .no-bullet { list-style-type: none; +} + +.border-text { + color: gray; + font-size: 10px; +} + +.black-p { + font-size: 28px; } \ No newline at end of file diff --git a/css_fun.html b/css_fun.html index 906e7d2..231fd01 100644 --- a/css_fun.html +++ b/css_fun.html @@ -24,16 +24,16 @@

Make this heading pink

Make this heading pink

Make this heading pink

-

This text should stay black and 28px

+

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

+

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 purple and 15px. Make this paragraph have 10px left margin and a black 1px bottom border. Make the border 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