diff --git a/.gitignore b/.gitignore index 89d5c4329004..cf4960f246d3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ # Ignore MacOS autogenerated .DS_Store +.vscode/ \ 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..17028329fa8d 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: 300px; } \ No newline at end of file diff --git a/foundations/block-and-inline/02-margin-and-padding-2/style.css b/foundations/block-and-inline/02-margin-and-padding-2/style.css index 00d1de59bf90..667da7ac0c5a 100644 --- a/foundations/block-and-inline/02-margin-and-padding-2/style.css +++ b/foundations/block-and-inline/02-margin-and-padding-2/style.css @@ -7,21 +7,32 @@ body { width: 400px; background: #fff; margin: 16px auto; + padding: 8px; } .title { background: #e3f4ff; + font-size: 16px; + margin-bottom: 8px; + padding: 8px; } .content { background: #e3f4ff; + padding: 16px 8px; + margin-bottom: 8px ; } .button-container { background: #e3f4ff; + text-align: center; + padding: 8px; } button { background: white; border: 1px solid #eee; + display: block; + margin: 0 auto; + padding: 8px 24px; } \ 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..e8b7a6b977e2 100644 --- a/foundations/cascade/01-cascade-fix/style.css +++ b/foundations/cascade/01-cascade-fix/style.css @@ -2,10 +2,8 @@ body { font-family: Arial, Helvetica, sans-serif; } -.para, -.small-para { - color: hsl(0, 0%, 0%); - font-weight: 800; +.para { + font-size: 22px; } .small-para { @@ -13,11 +11,17 @@ body { font-weight: 800; } -.para { - font-size: 22px; +.para, +.small-para { + color: hsl(0, 0%, 0%); + font-weight: 800; } -.confirm { +/* + I used an ID selector to target the Confirm button as .confirm wasn't working + */ + +#confirm-button { background: green; color: white; font-weight: bold; @@ -29,14 +33,18 @@ body { font-size: 20px; } -.child { - color: rgb(0, 0, 0); - font-weight: 800; - font-size: 14px; -} - div.text { color: rgb(0, 0, 0); font-size: 22px; font-weight: 100; } + +/* +I combined the type and class to target the div with a class child +*/ + +div.child { + color: rgb(0, 0, 0); + font-weight: 800; + font-size: 14px; +} \ No newline at end of file diff --git a/foundations/intro-to-css/01-css-methods/index.html b/foundations/intro-to-css/01-css-methods/index.html index effe3cc3db01..11a5606ed9e3 100644 --- a/foundations/intro-to-css/01-css-methods/index.html +++ b/foundations/intro-to-css/01-css-methods/index.html @@ -5,10 +5,18 @@ 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/styles.css b/foundations/intro-to-css/01-css-methods/styles.css new file mode 100644 index 000000000000..d75b453190e9 --- /dev/null +++ b/foundations/intro-to-css/01-css-methods/styles.css @@ -0,0 +1,7 @@ +div { + background: red; + color: white; + font-size: 32px; + font-weight: bold; + text-align: center; +} \ 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..bebce1febad8 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..e94e40fc84bd 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,22 @@ +.description.odd { + font-family: 'Verdana', 'DejaVu Sans', sans-serif; + background-color:#dd77b1 ; +} + +.description.odd.cool { + font-size: 24px;; +} + +.text { + color: #153bc5; +} + +#even-two { + background-color: #74be6a; + font-size: 24px; + font-weight: bold; +} + +#even-one { + font-size: 36px; +} \ 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..e3af7de49e61 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..8837436debce 100644 --- a/foundations/intro-to-css/03-grouping-selectors/style.css +++ b/foundations/intro-to-css/03-grouping-selectors/style.css @@ -0,0 +1,14 @@ +.btn.black { + background-color: #000; + color: #fff; +} + +.btn.yellow { + background-color: #fff000; +} + +.btn.black, +.btn.yellow { + font-family: 'Helvetica', 'Times New Roman', sans-serif; + font-size: 28px; +} \ 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..fc304a5e279e 100644 --- a/foundations/intro-to-css/04-chaining-selectors/style.css +++ b/foundations/intro-to-css/04-chaining-selectors/style.css @@ -1 +1,10 @@ -/* Add CSS Styling */ \ No newline at end of file +/* Add CSS Styling */ +.avatar.proportioned { + width: 300px; + height: auto; +} + +.avatar.distorted { + width: 300px; + height: 600px; +} diff --git a/foundations/intro-to-css/05-descendant-combinator/style.css b/foundations/intro-to-css/05-descendant-combinator/style.css index e69de29bb2d1..a48ac1e516e5 100644 --- a/foundations/intro-to-css/05-descendant-combinator/style.css +++ b/foundations/intro-to-css/05-descendant-combinator/style.css @@ -0,0 +1,13 @@ +/* .container .text { + background-color: #fff000; + color: #ff0000; + font-size: 20px; + text-align: center; +} */ + +div p { + background-color: #fff000; + color: #ff0000; + font-size: 20px; + text-align: center; +} \ No newline at end of file