Methods for Adding CSS

commit 4af2ddc1c6dded60b37f5538fb98049edfdda635 Author: NetMan <13informatyka14@gmail.com> Date: Thu Dec 28 18:32:06 2023 +0100 Initial commit CSS foundations 01-05 from TOD's CSS exercises repo diff --git a/01-css-methods/README.md b/01-css-methods/README.md new file mode 100644 index 0000000..8763459 --- /dev/null +++ b/01-css-methods/README.md @@ -0,0 +1,24 @@ +# Methods for Adding CSS +In this exercise, you're going to practice adding CSS to an HTML file using all three methods: external CSS, internal CSS, and inline CSS. You should only be using type selectors for this exercise when adding styles via the external and internal methods. You should also use keywords for colors (e.g. "blue") instead of using RGB or HEX values. + +There are three elements for you to add styles to, each of which uses a different method of adding CSS to it, as noted in the outcome image below. All other exercises in this section will have a CSS file provided and linked for you, but for this exercise you will have to create the file and link it in the HTML file yourself. This is all about practicing using these different methods and getting the syntax right. + +> ## quick tip: +> Do not worry about details in these exercises that are not specifically mentioned in the exercise or self check section. Because the desired outcomes are screenshots, your browser may show a different font, the colors may appear different on your machine, or the spacing between elements may look different. Only concern yourself with the specific items you are supposed to be learning for each exercise. + +The properties you need to add to each element are: + +* `div`: a red background, white text, a font size of 32px, center aligned, and bold +* `p`: a green background, white text, and a font size of 18px +* `button`: an orange background and a font size of 18px + +## Desired Outcome +![desired outcome](./desired-outcome.png) + + +### Self Check +- Did you use all three methods of adding CSS to an HTML file? +- Did you properly link the external CSS file in the HTML file? +- Does the `div` element have CSS added via the external method? +- Does the `p` element have CSS added via the internal method? +- Does the `button` element have CSS added via the inline method? diff --git a/01-css-methods/desired-outcome.png b/01-css-methods/desired-outcome.png new file mode 100644 index 0000000..c26dadd Binary files /dev/null and b/01-css-methods/desired-outcome.png differ diff --git a/01-css-methods/index.html b/01-css-methods/index.html new file mode 100644 index 0000000..effe3cc --- /dev/null +++ b/01-css-methods/index.html @@ -0,0 +1,14 @@ + + + + + + + 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/01-css-methods/solution/solution.css b/01-css-methods/solution/solution.css new file mode 100644 index 0000000..6a4afad --- /dev/null +++ b/01-css-methods/solution/solution.css @@ -0,0 +1,7 @@ +div { + background-color: red; + color: white; + font-size: 32px; + text-align: center; + font-weight: bold; +} diff --git a/01-css-methods/solution/solution.html b/01-css-methods/solution/solution.html new file mode 100644 index 0000000..6a1e00b --- /dev/null +++ b/01-css-methods/solution/solution.html @@ -0,0 +1,23 @@ + + + + + + + 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/02-class-id-selectors/README.md b/02-class-id-selectors/README.md new file mode 100644 index 0000000..a2a4c67 --- /dev/null +++ b/02-class-id-selectors/README.md @@ -0,0 +1,25 @@ +# Class and ID Selectors +Knowing how to add class and ID attributes to HTML elements, as well as use their respective selectors, is invaluable. It's important to practice using them. + +There are several elements in the HTML file provided, which you will have to add either class or ID attributes to, as noted in the outcome image below. You will then have to add rules in the CSS file provided using the correct selector syntax. Look over the outcome image carefully, and try to keep in mind which elements look similarly styled (classes), which ones may be completely unique from the rest (ID), and which ones have slight variations from others (multiple classes). + +It isn't entirely important which class or ID values you use, as the focus here is on being able to add the attributes and use the correct selector syntax to style elements. For the colors in this exercise, try using a non-keyword value (RGB, HEX, or HSL). The properties you need to add to each element are: + +* **All odd numbered elements**: a light red/pink background, and a list of fonts containing `Verdana` and `DejaVu Sans` with `sans-serif` as a fallback +* **The second element**: blue text and a font size of 36px +* **The third element**: in addition to the styles for all odd numbered elements, add a font size of 24px +* **The fourth element**: a light green background, a font size of 24px, and bold + +Quick tip: in VS Code, you can change which format colors are displayed in RGB, HEX, or HSL by hovering over the color value in the CSS and clicking the top of the popup that appears! + +> ### Note: +> Part of your task is to add a font to _some_ of these items. Your browser's font's might be different than the one displayed in the desired outcome image. As long as you confirm that the fonts _are_ being applied to the right lines any differences are okay for this exercise. + +## Desired Outcome +![desired outcome](./desired-outcome.png) + + +### Self Check +- Do the odd numbered `p` elements share a class? +- Do the even numbered `div` elements have unique IDs? +- Does the Number 3 element have multiple classes? diff --git a/02-class-id-selectors/desired-outcome.png b/02-class-id-selectors/desired-outcome.png new file mode 100644 index 0000000..cb4670d Binary files /dev/null and b/02-class-id-selectors/desired-outcome.png differ diff --git a/02-class-id-selectors/index.html b/02-class-id-selectors/index.html new file mode 100644 index 0000000..263042a --- /dev/null +++ b/02-class-id-selectors/index.html @@ -0,0 +1,17 @@ + + + + + + + Class and ID Selectors + + + +

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/02-class-id-selectors/solution/solution.css b/02-class-id-selectors/solution/solution.css new file mode 100644 index 0000000..ef9c0b7 --- /dev/null +++ b/02-class-id-selectors/solution/solution.css @@ -0,0 +1,27 @@ +.odd { + background-color: rgb(255, 167, 167); + font-family: Verdana, "DejaVu Sans", sans-serif; +} + +.adjust-font-size { + font-size: 24px; +} + +#two { + color: #0000ff; + font-size: 36px; +} + +/* + In the id selector 'four' below, we could have also + added a rule to set the font size to 24px. + + However, since the elements 'Number 3' and 'Number 4' + in the HTML file share the same font size, we reused + the 'adjust-font-size' class above to help reduce + duplicate code. +*/ +#four { + background-color: hsl(120, 100%, 75%); + font-weight: bold; +} diff --git a/02-class-id-selectors/solution/solution.html b/02-class-id-selectors/solution/solution.html new file mode 100644 index 0000000..9e47d63 --- /dev/null +++ b/02-class-id-selectors/solution/solution.html @@ -0,0 +1,17 @@ + + + + + + + Class and ID Selectors + + + +

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/02-class-id-selectors/style.css b/02-class-id-selectors/style.css new file mode 100644 index 0000000..e69de29 diff --git a/03-grouping-selectors/README.md b/03-grouping-selectors/README.md new file mode 100644 index 0000000..8b5d206 --- /dev/null +++ b/03-grouping-selectors/README.md @@ -0,0 +1,20 @@ +# Grouping Selectors + +Let's build a little off the previous exercise, in which you (hopefully) added multiple classes to a single element in order to apply two different rules to it. + +Instead of having a single element with two different rules applied, though, you're instead going to give two elements each a unique class name, then add rules for styles that both elements share as well as their own unique styles. Make sure you take a good look at the outcome image below to see exactly what is unique about each element, and what both elements have in common. + +This will help you further practice adding classes and using class selectors, so be sure you add the class attribute in the HTML file. For the remainder of these exercises, the format of any colors is entirely up to you; we trust you'll practice using the different values! The properties you need to add to each element are: + +* **The first element**: a black background and white text +* **The second element**: a yellow background +* **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback + +## Desired Outcome +![desired outcome](./desired-outcome.png) + + +### Self Check +- Does each element have a unique class name? +- Did you use the grouping selector for styles that both elements share? +- Did you make separate rules for the styles unique to each element? diff --git a/03-grouping-selectors/desired-outcome.png b/03-grouping-selectors/desired-outcome.png new file mode 100644 index 0000000..d2cf644 Binary files /dev/null and b/03-grouping-selectors/desired-outcome.png differ diff --git a/03-grouping-selectors/index.html b/03-grouping-selectors/index.html new file mode 100644 index 0000000..796431e --- /dev/null +++ b/03-grouping-selectors/index.html @@ -0,0 +1,14 @@ + + + + + + + Grouping Selectors + + + + + + + \ No newline at end of file diff --git a/03-grouping-selectors/solution/solution.css b/03-grouping-selectors/solution/solution.css new file mode 100644 index 0000000..0464142 --- /dev/null +++ b/03-grouping-selectors/solution/solution.css @@ -0,0 +1,15 @@ + +.inverted, +.fancy { + font-family: Helvetica, "Times New Roman", sans-serif; + font-size: 28px; +} + +.inverted { + background-color: black; + color: white; +} + +.fancy { + background-color: yellow; +} \ No newline at end of file diff --git a/03-grouping-selectors/solution/solution.html b/03-grouping-selectors/solution/solution.html new file mode 100644 index 0000000..88a4ede --- /dev/null +++ b/03-grouping-selectors/solution/solution.html @@ -0,0 +1,14 @@ + + + + + + + Grouping Selectors + + + + + + + \ No newline at end of file diff --git a/03-grouping-selectors/style.css b/03-grouping-selectors/style.css new file mode 100644 index 0000000..e69de29 diff --git a/04-chaining-selectors/README.md b/04-chaining-selectors/README.md new file mode 100644 index 0000000..01a7511 --- /dev/null +++ b/04-chaining-selectors/README.md @@ -0,0 +1,23 @@ +# Chaining Selectors + +Credits for the images in this exercise go to [Katho Mutodo](https://linktr.ee/photobykatho_) and [Andrea Piacquadio](https://www.pexels.com/@olly?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels). + + +With this exercise, we've provided you with a partially completed HTML file which you'll configure. The purpose of this exercise is to focus on understanding how to chain different selectors, rather than solely adding attributes. Additionally, you'll have the chance to review your HTML images. + +We have two images for you to style, each with two class names, where one of the class names is shared. The goal here is to chain the selectors for both elements, so that each have a unique style applied, despite using a shared class selector. For example, you want an element that has both X and Y to have one set of styles, while an element with X and Z has a completely different set of styles. We included the original images as well, so that you can see how the styles you will be adding look in comparison, so do not add any styles to them. + +**Note:** Download and group the images in a separate "images" folder. Ensure correct image source paths in your HTML to avoid image loading issues. This is crucial for a cleaner project structure. + +The properties you need to add to each element are: + +* Make the element with both the `avatar` and `proportioned` classes 300 pixels wide, then give it a height so that it retains its original square proportions (don't hardcode in a pixel value for the height!). +* Make the element with both the `avatar` and `distorted` classes 200 pixels wide, then make its height twice as big as its width (here you should hardcode in a pixel value). + +## Desired Outcome +![desired outcome](./desired-outcome.png) + +### Self Check +- Did you properly chain class selectors for each rule? +- Does the `proportioned` image retain its original square proportions? +- Does the `distorted` image end up looking squished and, well, distorted? diff --git a/04-chaining-selectors/desired-outcome.png b/04-chaining-selectors/desired-outcome.png new file mode 100644 index 0000000..b87a6da Binary files /dev/null and b/04-chaining-selectors/desired-outcome.png differ diff --git a/04-chaining-selectors/index.html b/04-chaining-selectors/index.html new file mode 100644 index 0000000..dfed3f8 --- /dev/null +++ b/04-chaining-selectors/index.html @@ -0,0 +1,23 @@ + + + + + + + Chaining Selectors + + + + + +

+ +

+ + \ No newline at end of file diff --git a/04-chaining-selectors/pexels-andrea-piacquadio-3777931.jpg b/04-chaining-selectors/pexels-andrea-piacquadio-3777931.jpg new file mode 100644 index 0000000..1f7652c Binary files /dev/null and b/04-chaining-selectors/pexels-andrea-piacquadio-3777931.jpg differ diff --git a/04-chaining-selectors/pexels-katho-mutodo-8434791.jpg b/04-chaining-selectors/pexels-katho-mutodo-8434791.jpg new file mode 100644 index 0000000..4844432 Binary files /dev/null and b/04-chaining-selectors/pexels-katho-mutodo-8434791.jpg differ diff --git a/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg b/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg new file mode 100644 index 0000000..1f7652c Binary files /dev/null and b/04-chaining-selectors/solution/images/pexels-andrea-piacquadio-3777931.jpg differ diff --git a/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg b/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg new file mode 100644 index 0000000..4844432 Binary files /dev/null and b/04-chaining-selectors/solution/images/pexels-katho-mutodo-8434791.jpg differ diff --git a/04-chaining-selectors/solution/solution.css b/04-chaining-selectors/solution/solution.css new file mode 100644 index 0000000..32c0a64 --- /dev/null +++ b/04-chaining-selectors/solution/solution.css @@ -0,0 +1,9 @@ +.avatar.proportioned { + height: auto; + width: 300px; +} + +.avatar.distorted { + height: 400px; + width: 200px; +} \ No newline at end of file diff --git a/04-chaining-selectors/solution/solution.html b/04-chaining-selectors/solution/solution.html new file mode 100644 index 0000000..2a646fa --- /dev/null +++ b/04-chaining-selectors/solution/solution.html @@ -0,0 +1,20 @@ + + + + + + + Chaining Selectors + + + +

+ + \ No newline at end of file diff --git a/04-chaining-selectors/style.css b/04-chaining-selectors/style.css new file mode 100644 index 0000000..d55c2c5 --- /dev/null +++ b/04-chaining-selectors/style.css @@ -0,0 +1 @@ +/* Add CSS Styling */ \ No newline at end of file diff --git a/05-descendant-combinator/README.md b/05-descendant-combinator/README.md new file mode 100644 index 0000000..7577c4e --- /dev/null +++ b/05-descendant-combinator/README.md @@ -0,0 +1,18 @@ +# Descendant Combinator +Understanding how combinators work can become a lot easier when you start playing around with them and see what exactly is affected by them versus what isn't. + +The goal of this exercise is to apply styles to elements that are descendants of another element, while leaving elements that *aren't* descendants of that element unstyled. + +You can use either type or class selectors for this exercise; use whichever you may feel you want to practice with more. The HTML file is set up (so no need to edit anything in it) such that any combination of selectors will work, so if you're feeling adventurous you can even try combining a type *and* class selector for the descendant combinator. + +The properties you need to add are: + +* Only the `p` elements that are descendants of the `div` element should have a yellow background, red text, a font size of 20px, and center aligned. + +## Desired Outcome +![desired outcome](./desired-outcome.png) + + +### Self Check +- Do the elements that contain the text "This should be styled" have the correct styles applied? +- Do the elements that contain the text "This should be unstyled" have no styles applied? diff --git a/05-descendant-combinator/desired-outcome.png b/05-descendant-combinator/desired-outcome.png new file mode 100644 index 0000000..5927af2 Binary files /dev/null and b/05-descendant-combinator/desired-outcome.png differ diff --git a/05-descendant-combinator/index.html b/05-descendant-combinator/index.html new file mode 100644 index 0000000..9da1ae5 --- /dev/null +++ b/05-descendant-combinator/index.html @@ -0,0 +1,21 @@ + + + + + + + Descendant Combinator + + + +

This should be styled.

This should be unstyled.

This should be styled.

+ + \ No newline at end of file diff --git a/05-descendant-combinator/solution/solution.css b/05-descendant-combinator/solution/solution.css new file mode 100644 index 0000000..ad40f09 --- /dev/null +++ b/05-descendant-combinator/solution/solution.css @@ -0,0 +1,15 @@ +.container .text { + background-color: yellow; + color: #E00000; + font-size: 20px; + text-align: center; +} + +/* Below are some other possible descendant combinators: + +div p +div > p +div .text +.container p + +*/ diff --git a/05-descendant-combinator/solution/solution.html b/05-descendant-combinator/solution/solution.html new file mode 100644 index 0000000..b76a9e5 --- /dev/null +++ b/05-descendant-combinator/solution/solution.html @@ -0,0 +1,21 @@ + + + + + + + Descendant Combinator + + + +

This should be styled.

This should be unstyled.

This should be styled.

+ + \ No newline at end of file diff --git a/05-descendant-combinator/style.css b/05-descendant-combinator/style.css new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md new file mode 100644 index 0000000..e432cb1 --- /dev/null +++ b/README.md @@ -0,0 +1,29 @@ +# CSS Exercises + +These exercises consist of a series of CSS-related tasks intended to complement the HTML and CSS content on The Odin Project (TOP). They should only be completed when instructed during the course of the curriculum. + +When doing these exercises, please use all documentation and resources you need to accomplish them. You are _not_ intended to have any of this stuff memorized at this point. Check the docs, use Google, and do what you need to do (besides checking the solutions) to get them done. + +## Contributing + +If you have suggestions to improve an exercise, ideas for a new exercise, or notice an issue with an exercise, please feel free to open an issue after thoroughly reading our [contributing guide](https://github.com/TheOdinProject/.github/blob/main/CONTRIBUTING.md). + +## How To Use These Exercises + +1. Fork and clone this repository. To learn how to fork a repository, see the GitHub documentation on how to [fork a repo](https://docs.github.com/en/get-started/quickstart/fork-a-repo). + * Copies of repositories on your machine are called clones. If you need help cloning to your local environment, you can learn how from the GitHub documentation on [cloning a repository](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository-from-github/cloning-a-repository). +2. Go to an exercise directory and open the HTML file in a web browser. You can open the file directly or use something like VSCode's Live Server extension. +3. For each exercise, read the README thoroughly before starting any work. + * Each README has a "Self Check" list. Use this to ensure you haven't missed any important details in your implementation. +4. Make your edits in the `index.html` and/or the `style.css` files in order to make the output in your browser look like the Desired Outcome image(s). + * Depending on the instructions of the exercise, you may only need to make edits in one of these files. +5. Once you successfully finish an exercise, check TOP's solution to compare it with yours. + * You should not be checking the solution for an exercise until you finish it! + * Keep in mind that TOP's solution is not the only solution. If your solution differs wildly from TOP's solution (and still passes the self-check criteria), feel free to ask about it in the chatroom. +6. Do not submit your solutions to this repo, as any PRs that do so will be closed without merging. + +## Some Hints +- The official solutions put all changes at the _end_ of the CSS file, which may duplicate some selectors (e.g. there might be a `body {}` in the given CSS and another `body {}` in the solution). When you are working on an exercise, it is best practice to add your CSS to existing selectors instead of duplicating them at the end of the file. We're sacrificing this best practice in our official solutions to make it extra clear to you what things we changed to solve the exercise. +- Unless listed in the self-check section, do not worry about getting the exact pixel value for things like margin, padding and font size. These exercises are intended to test your knowledge of CSS, not your ability to guess that a screenshot is using `font: sans-serif bold 16px` or that the margin is _exactly_ `42px`. +- You may need to add some elements to your HTML to get things into the right spot. (For the first few exercises, we make it explicit when this needs to happen.) +- You may need to add more selectors to your CSS file. The first few exercises have almost everything already done for you, but as you progress, you'll find that you need to add more and more selectors to get the correct result.