diff --git a/css-exercises b/css-exercises new file mode 160000 index 000000000000..4bc0b62b22c3 --- /dev/null +++ b/css-exercises @@ -0,0 +1 @@ +Subproject commit 4bc0b62b22c31f271b8bc1787f7edc55416038af diff --git a/foundations/block-and-inline/01-margin-and-padding-1/style.css b/foundations/block-and-inline/01-margin-and-padding-1/style.css index f4d0a7084532..ca28db0aef12 100644 --- a/foundations/block-and-inline/01-margin-and-padding-1/style.css +++ b/foundations/block-and-inline/01-margin-and-padding-1/style.css @@ -7,15 +7,15 @@ body { background: pink; border: 3px solid blue; /* CHANGE ME */ - padding: 0px; - margin: 0px; + padding: 32px; + margin: 12px; } .two { background: lightblue; border: 3px solid purple; /* CHANGE ME */ - margin-bottom: 0px; + margin-bottom: 48px; } .three { @@ -23,6 +23,6 @@ body { border: 3px solid brown; width: 200px; /* CHANGE ME */ - padding: 0px; - margin-left: 0px; + padding: 32px; + margin-left: auto; } \ No newline at end of file diff --git a/foundations/cascade/01-cascade-fix/.vscode/settings.json b/foundations/cascade/01-cascade-fix/.vscode/settings.json new file mode 100644 index 000000000000..6f3a2913e199 --- /dev/null +++ b/foundations/cascade/01-cascade-fix/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/foundations/cascade/01-cascade-fix/style.css b/foundations/cascade/01-cascade-fix/style.css index daf07e0e8a47..35ebbb2332ee 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -1,6 +1,9 @@ body { font-family: Arial, Helvetica, sans-serif; } +.para { + font-size: 22px; +} .para, .small-para { @@ -13,11 +16,8 @@ body { font-weight: 800; } -.para { - font-size: 22px; -} -.confirm { +#confirm-button { background: green; color: white; font-weight: bold; @@ -29,13 +29,13 @@ body { font-size: 20px; } -.child { + +.text.child { color: rgb(0, 0, 0); font-weight: 800; font-size: 14px; } - -div.text { +.text { color: rgb(0, 0, 0); font-size: 22px; font-weight: 100; diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html index effe3cc3db01..16d693779665 100644 --- a/foundations/intro-to-css/01-css-methods/index.html +++ b/foundations/intro-to-css/01-css-methods/index.html @@ -4,11 +4,20 @@ + Methods for Adding CSS + -
Style me via the external method!
+
Style me via the external method!

I would like to be styled with the internal method, please.

- + + \ No newline at end of file diff --git a/foundations/intro-to-css/01-css-methods/style.css b/foundations/intro-to-css/01-css-methods/style.css new file mode 100644 index 000000000000..47cf18817633 --- /dev/null +++ b/foundations/intro-to-css/01-css-methods/style.css @@ -0,0 +1,6 @@ +.red-bg { + background-color: red; + font-size: 32px; + text-align: center; + color:white; +} \ No newline at end of file diff --git a/foundations/intro-to-css/02-class-id-selectors/index.html b/foundations/intro-to-css/02-class-id-selectors/index.html index 263042ae92a0..8a847704ae66 100644 --- a/foundations/intro-to-css/02-class-id-selectors/index.html +++ b/foundations/intro-to-css/02-class-id-selectors/index.html @@ -8,10 +8,10 @@ -

Number 1 - I'm a class!

-
Number 2 - I'm one ID.
-

Number 3 - I'm a class, but cooler!

-
Number 4 - I'm another ID.
-

Number 5 - I'm a class!

+

Number 1 - I'm a class!

+
Number 2 - I'm one ID.
+

Number 3 - I'm a class, but cooler!

+
Number 4 - I'm another ID.
+

Number 5 - I'm a class!

\ No newline at end of file diff --git a/foundations/intro-to-css/02-class-id-selectors/style.css b/foundations/intro-to-css/02-class-id-selectors/style.css index e69de29bb2d1..037107c42cb8 100644 --- a/foundations/intro-to-css/02-class-id-selectors/style.css +++ b/foundations/intro-to-css/02-class-id-selectors/style.css @@ -0,0 +1,15 @@ +.odd-numbers { + background-color: rgb(255,192,203); + font-family: "verdana", "Dejavu Sans", sans-serif; +} +#number-2 { + color:rgb(23,0,128); + font-size: 36px; + +} +#number-4 { + background: rgb(144,238,144); + font-size: 24px; + font-weight: bold; + +} \ No newline at end of file diff --git a/foundations/intro-to-css/03-grouping-selectors/index.html b/foundations/intro-to-css/03-grouping-selectors/index.html index 796431e53ea7..76a42893e105 100644 --- a/foundations/intro-to-css/03-grouping-selectors/index.html +++ b/foundations/intro-to-css/03-grouping-selectors/index.html @@ -8,7 +8,7 @@ - - + + \ No newline at end of file diff --git a/foundations/intro-to-css/03-grouping-selectors/style.css b/foundations/intro-to-css/03-grouping-selectors/style.css index e69de29bb2d1..b9d134577693 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -0,0 +1,12 @@ +.black { + background-color: #000; + color:#ffff +} +.yellow { + background-color: #fff00f; + +} +.yellow.black { + font-size: 28px; + font-family: "Helvetica", "Times New Roman", sans-serif; +} \ No newline at end of file diff --git a/foundations/intro-to-css/04-chaining-selectors/style.css b/foundations/intro-to-css/04-chaining-selectors/style.css index d55c2c5c7090..85673659a78e 100644 --- a/foundations/intro-to-css/04-chaining-selectors/style.css +++ b/foundations/intro-to-css/04-chaining-selectors/style.css @@ -1 +1,9 @@ -/* Add CSS Styling */ \ No newline at end of file +/* Add CSS Styling */ +.avatar.proportioned { + width: 300px; + height: auto; +} +.avatar.distorted { + width: 200px; + height: 400px; +} \ No newline at end of file diff --git a/foundations/intro-to-css/05-descendant-combinator/style.css b/foundations/intro-to-css/05-descendant-combinator/style.css index e69de29bb2d1..a9328ffdc42b 100644 --- a/foundations/intro-to-css/05-descendant-combinator/style.css +++ b/foundations/intro-to-css/05-descendant-combinator/style.css @@ -0,0 +1,6 @@ +.container .text { + background-color: #ffff00; + color:#ff0000; + font-size: 20px; + text-align: center; +} \ No newline at end of file