Classes
Most of the time when we are styling a website we want to be able to make tailored changes to individual elements, rather than broad stroke changes to everything all at once. To do this we can use classes and ids, let's look at classes first.
Let's say I wanted to have paragraphs of text that had different colours, red and blue. What I can do is create classes that we put onto our HTML elements that will set them with the specific colour. For example:
Let's say I wanted to have paragraphs of text that had different colours, red and blue. What I can do is create classes that we put onto our HTML elements that will set them with the specific colour. For example:
Now that we have put these classes on our HTML element we can add our CSS that will do the job that we're wanting done. Here's our CSS:
Task 1: Create 4 classes in your trains website and use them to style some elements in different ways. Try adding properties to elements that you perhaps haven't toyed with yet (like <img>). Hint: try using border-radius.
Task 2: First, make sure that you have 5 different images on your site.
Next, create 5 classes in your CSS: .img-xs, img-s, img-m, img-l, img-xl
Use the "width" property to set these with different widths (xs being the smallest, xl being the largest) and give these classes to the different images on your site.
Task 2: First, make sure that you have 5 different images on your site.
Next, create 5 classes in your CSS: .img-xs, img-s, img-m, img-l, img-xl
Use the "width" property to set these with different widths (xs being the smallest, xl being the largest) and give these classes to the different images on your site.
