From 8005e033ff272a85cfb2748fb872ccb385f51719 Mon Sep 17 00:00:00 2001 From: TheBigH50 Date: Wed, 11 Jan 2023 14:33:10 -0600 Subject: [PATCH 1/7] edit exe3 to not refer to the main element as multiple elements --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 02d0365..57a78c0 100644 --- a/README.md +++ b/README.md @@ -29,10 +29,10 @@ Steps are to be completed by writing css rulesets in your `index.css` file. Steps are to be completed by writing css rulesets in your `index.css` file. -1. Create a **ruleset** in your `index.css` file that selects all elements with the `main` tag name -2. Create a **declaration** in your new ruleset that changes the **max width** of the `main` elements to **600px** -3. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `main` elements to **24px**, to center the `main` elements between the left and right edges of the page (or their containing element). -4. Create a **declaration** in your new ruleset that changes the **margin left** and **margin right** of the `main` elements to **auto**, to center the `main` elements between the left and right edges of the page (or their containing element). +1. Create a **ruleset** in your `index.css` file that selects the element with the `main` tag name +2. Create a **declaration** in your new ruleset that changes the **max width** of the `main` element to **600px** +3. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `main` element to **24px**, to space the `main` element between the left and right edges of the page (or it's containing element). +4. Create a **declaration** in your new ruleset that changes the **margin left** and **margin right** of the `main` element to **auto**, to center the `main` element between the left and right edges of the page (or it's containing element). ## Exercise 4 From c2d2f65a5ae8c79fb7c56aaf37bf6f22851ae668 Mon Sep 17 00:00:00 2001 From: TheBigH50 Date: Wed, 11 Jan 2023 14:34:52 -0600 Subject: [PATCH 2/7] change 24px top and bottom margin rules to 44px to make changes more visible --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 57a78c0..9986ba4 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Steps are to be completed by writing css rulesets in your `index.css` file. 1. Create a **ruleset** in your `index.css` file that selects the element with the `main` tag name 2. Create a **declaration** in your new ruleset that changes the **max width** of the `main` element to **600px** -3. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `main` element to **24px**, to space the `main` element between the left and right edges of the page (or it's containing element). +3. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `main` element to **44px**, to space the `main` element between the left and right edges of the page (or it's containing element). 4. Create a **declaration** in your new ruleset that changes the **margin left** and **margin right** of the `main` element to **auto**, to center the `main` element between the left and right edges of the page (or it's containing element). ## Exercise 4 @@ -39,7 +39,7 @@ Steps are to be completed by writing css rulesets in your `index.css` file. Steps are to be completed by writing css rulesets in your `index.css` file. 1. Create a **ruleset** in your `index.css` file that selects all elements with the `section` tag name -2. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `section` elements to **24px**, to center the `section` elements between the left and right edges of the page (or their containing element). +2. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `section` elements to **44px**, to center the `section` elements between the left and right edges of the page (or their containing element). 3. Create a **declaration** in your new ruleset that changes the **padding left**, **padding right**, **padding top** and **padding bottom** of the `section` elements to **16px**, to give the `section` elements space between their content and border. ## Exercise 5 From b715fc040e6c873e66e0d6cb06473b9a995a7646 Mon Sep 17 00:00:00 2001 From: TheBigH50 Date: Wed, 11 Jan 2023 14:38:31 -0600 Subject: [PATCH 3/7] reword exe3 step 3 to make more sense --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9986ba4..daac4de 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Steps are to be completed by writing css rulesets in your `index.css` file. 1. Create a **ruleset** in your `index.css` file that selects the element with the `main` tag name 2. Create a **declaration** in your new ruleset that changes the **max width** of the `main` element to **600px** -3. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `main` element to **44px**, to space the `main` element between the left and right edges of the page (or it's containing element). +3. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `main` element to **44px**, to space the `main` element further apart from the `header` and `footer` elements (or it's containing element). 4. Create a **declaration** in your new ruleset that changes the **margin left** and **margin right** of the `main` element to **auto**, to center the `main` element between the left and right edges of the page (or it's containing element). ## Exercise 4 From 517d379e774838be1b9bac8c8ebf4339e886ec4c Mon Sep 17 00:00:00 2001 From: TheBigH50 Date: Wed, 11 Jan 2023 14:41:05 -0600 Subject: [PATCH 4/7] reword exe4 step 2 to make more sense, change 44px to auto --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index daac4de..2a772d3 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Steps are to be completed by writing css rulesets in your `index.css` file. Steps are to be completed by writing css rulesets in your `index.css` file. 1. Create a **ruleset** in your `index.css` file that selects all elements with the `section` tag name -2. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `section` elements to **44px**, to center the `section` elements between the left and right edges of the page (or their containing element). +2. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `section` elements to **auto**, to center the `section` elements between the top and bottom of their containing element. 3. Create a **declaration** in your new ruleset that changes the **padding left**, **padding right**, **padding top** and **padding bottom** of the `section` elements to **16px**, to give the `section` elements space between their content and border. ## Exercise 5 From e6b8346f0e2555d0c855184f5acfb317473d66ea Mon Sep 17 00:00:00 2001 From: TheBigH50 Date: Wed, 11 Jan 2023 14:48:40 -0600 Subject: [PATCH 5/7] test and reword exe4 step 2 to be a more visible change, set auto to 44px --- README.md | 2 +- index.html | 1 + style.css | 14 ++++++++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 style.css diff --git a/README.md b/README.md index 2a772d3..74f1584 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ Steps are to be completed by writing css rulesets in your `index.css` file. Steps are to be completed by writing css rulesets in your `index.css` file. 1. Create a **ruleset** in your `index.css` file that selects all elements with the `section` tag name -2. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `section` elements to **auto**, to center the `section` elements between the top and bottom of their containing element. +2. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `section` elements to **44px**, to space the `section` elements apart from the top and bottom of neighboring elements. 3. Create a **declaration** in your new ruleset that changes the **padding left**, **padding right**, **padding top** and **padding bottom** of the `section` elements to **16px**, to give the `section` elements space between their content and border. ## Exercise 5 diff --git a/index.html b/index.html index 763c638..1891cfa 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ CSS Intro + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d8597d8 --- /dev/null +++ b/style.css @@ -0,0 +1,14 @@ +main { + max-width: 600px; + margin-top: 44px; + margin-bottom: 44px; + margin-left: auto; + margin-right: auto; + +} + +section { + margin-top: 44px; + margin-bottom: 44px; + +} \ No newline at end of file From e4f5746a12004ae46b369ceea4810adac1b58182 Mon Sep 17 00:00:00 2001 From: TheBigH50 Date: Wed, 11 Jan 2023 14:53:46 -0600 Subject: [PATCH 6/7] exe4 added a step between 2 and 3 (now step3) to add border to sections so new step4 (padding) is more of a visible change --- README.md | 3 ++- style.css | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 74f1584..835e0f5 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,8 @@ Steps are to be completed by writing css rulesets in your `index.css` file. 1. Create a **ruleset** in your `index.css` file that selects all elements with the `section` tag name 2. Create a **declaration** in your new ruleset that changes the **margin top** and **margin bottom** of the `section` elements to **44px**, to space the `section` elements apart from the top and bottom of neighboring elements. -3. Create a **declaration** in your new ruleset that changes the **padding left**, **padding right**, **padding top** and **padding bottom** of the `section` elements to **16px**, to give the `section` elements space between their content and border. +3. Create a **declaration** in your new ruleset that sets the **border** of the `section` elements to **3px** **dotted** **orange** to create a visible border around the `section` elements. +4. Create a **declaration** in your new ruleset that changes the **padding left**, **padding right**, **padding top** and **padding bottom** of the `section` elements to **16px**, to give the `section` elements space between their content and border. ## Exercise 5 diff --git a/style.css b/style.css index d8597d8..6238b16 100644 --- a/style.css +++ b/style.css @@ -10,5 +10,5 @@ main { section { margin-top: 44px; margin-bottom: 44px; - + border: 3px dotted orange; } \ No newline at end of file From d6e786dd211c1e0e184b4c830c2d8882f0b1970c Mon Sep 17 00:00:00 2001 From: TheBigH50 Date: Wed, 11 Jan 2023 14:57:46 -0600 Subject: [PATCH 7/7] remove testing css file and stylesheet link --- index.html | 1 - style.css | 14 -------------- 2 files changed, 15 deletions(-) delete mode 100644 style.css diff --git a/index.html b/index.html index 1891cfa..763c638 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ CSS Intro - diff --git a/style.css b/style.css deleted file mode 100644 index 6238b16..0000000 --- a/style.css +++ /dev/null @@ -1,14 +0,0 @@ -main { - max-width: 600px; - margin-top: 44px; - margin-bottom: 44px; - margin-left: auto; - margin-right: auto; - -} - -section { - margin-top: 44px; - margin-bottom: 44px; - border: 3px dotted orange; -} \ No newline at end of file