diff --git a/foundations/.vscode/settings.json b/foundations/.vscode/settings.json new file mode 100644 index 000000000000..6f3a2913e199 --- /dev/null +++ b/foundations/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file 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/style.css b/foundations/cascade/01-cascade-fix/style.css index daf07e0e8a47..b7a7d6d712bf 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -2,22 +2,21 @@ body { font-family: Arial, Helvetica, sans-serif; } -.para, -.small-para { - color: hsl(0, 0%, 0%); - font-weight: 800; -} -.small-para { +p.small-para { font-size: 14px; font-weight: 800; + color: hsl(0, 0%, 0%); + } -.para { +.para{ + font-weight: 800; font-size: 22px; + color: hsl(0, 0%, 0%); } -.confirm { +#confirm-button { background: green; color: white; font-weight: bold; @@ -29,14 +28,11 @@ body { font-size: 20px; } -.child { + + +.text .child { color: rgb(0, 0, 0); - font-weight: 800; font-size: 14px; + font-weight: 800; } -div.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..75dedb81b121 100644 --- a/foundations/intro-to-css/01-css-methods/index.html +++ b/foundations/intro-to-css/01-css-methods/index.html @@ -4,11 +4,19 @@ + + Methods for Adding CSS
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..eb618dc214cb --- /dev/null +++ b/foundations/intro-to-css/01-css-methods/style.css @@ -0,0 +1,7 @@ +div{ + color: white; + background-color: red; + text-align: center; + font-size: 32px; + font-weight: bold; +} \ 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..5f9d7c535d67 100644 --- a/foundations/intro-to-css/02-class-id-selectors/index.html +++ b/foundations/intro-to-css/02-class-id-selectors/index.html @@ -9,9 +9,9 @@

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 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..a09c490a614a 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,19 @@ +p{ + background-color: lightcoral; + font-family: Verdana,"DejaVu Sans", sans-serif; +} + +.segundo { + color: blue; + font-size: 36px; +} + +.tercero { + font-size: 24px; +} + +.cuarto { + background-color: lightgreen; + font-weight: bold; + font-size: 24px; +} \ 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..b23f1c605fac 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..bdd12cee7589 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -0,0 +1,13 @@ +button{ + font-size: 28px; + font-family: Helvetica, 'Times New Roman', sans-serif; +} + +.primero{ + color: white; + background-color: black; +} + +.segundo{ + background-color: yellow; +} \ No newline at end of file diff --git a/foundations/intro-to-css/04-chaining-selectors/solution/solution.css b/foundations/intro-to-css/04-chaining-selectors/solution/solution.css index 32c0a649e5ce..550d10cbfd81 100644 --- a/foundations/intro-to-css/04-chaining-selectors/solution/solution.css +++ b/foundations/intro-to-css/04-chaining-selectors/solution/solution.css @@ -1,9 +1,9 @@ -.avatar.proportioned { +.proportioned .avatar { height: auto; width: 300px; } -.avatar.distorted { +.distorted .avatar{ height: 400px; width: 200px; } \ 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..d7081c7ca229 100644 --- a/foundations/intro-to-css/04-chaining-selectors/style.css +++ b/foundations/intro-to-css/04-chaining-selectors/style.css @@ -1 +1,10 @@ +.avatar.proportioned{ + height: auto; + width: 300px; +} + +.avatar.distorted{ + height: 400px; + width: 200px; +} /* Add CSS Styling */ \ 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..e9b886784aae 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: yellow; + color: red; + font-size: 20px; + text-align: center; +} \ No newline at end of file