` -> Do you remember how to do that? Ask your coach to help you out if you are having any problems. +> If you do not remember, ask your coach to help you. ## Main styling -Set the font family and reset the padding and margin of the page +Set the font family and reset the padding and margin of the page. ```css body { @@ -56,11 +55,11 @@ body { } ``` -Let's wrap the contents in a `div` element with the id `wrapper` so we can tweak its dimensions and center it. +Let's wrap the contents of the page in a `div` element with the id `wrapper` so we can tweak its dimensions and center it. > Did you remember to close the element you just added? -Style the wrapper +Let's style the wrapper ```css #wrapper { @@ -71,29 +70,25 @@ Style the wrapper } ``` -Try tweaking the style. +Try tweaking some of the styles that we just added to see what happens? > Remove the `max-width` and reload the page - > Remove the `min-width` and try resizing the page - > Do you notice how the content no longer centers when removing the `margin` property? Ask your coach to explain why. ## Text shadow -Text shadow, adds a drop shadow to the header. This only works with CSS3 compatible browsers, so unless you are using a really [old browser](http://caniuse.com/css-textshadow) or IE9, you should be able to see the results. - -The text-shadow property is formatted as follows: +Text shadow will add a drop shadow to the header. The text-shadow property is formatted as follows: `text-shadow: horizontal-shadow vertical-shadow blur color` - horizonal-shadow is the length of the shadow along the x-axis - vertical-shadow is the length of the shadow along the y-axis - blur controls how much, if any, blur radius to add to the shadows. This is optional, but can look cool. -- color controls the color of the shadow. It is also optional +- color controls the color of the shadow. It is also optional. ### Style the header @@ -106,7 +101,7 @@ h1 { } ``` -Tweak the text-shadow property, and add a blur of 2px +Let's tweak the text-shadow property by adding a 2px blur. > Can you see the difference? Keep the version you like the most. @@ -157,19 +152,17 @@ Things should be looking a bit better now, but the images are still too big! Set } ``` -Great! Now our images and links are on the left, and the main content on the right. +Great! Now our images and links are on the left, and our main content is on the right. ### Border-radius -[Border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements. In the past, multiple divs and the use of images was required to achieve that effect. +[Border radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) enables us to create rounded corners for our elements. Border radius can be defined in many different units - the higher the number, the bigger the curve. An example of border-radius in your code would be: `border-radius: 10px;` -Now that we know what border radius is, let's use it to add a nice frame to the first image. - -Wrap the first image in a `div` with the class `frame` +Let's add it so that it adds a nice frame to the first image. Wrap the first image in a `div` with the class `frame`. ```css .frame { @@ -181,14 +174,15 @@ Wrap the first image in a `div` with the class `frame` } ``` -As we only want the bottom right and bottom left corners to be rounded, we can be more specific when setting the border radius so it only applies to those corners. +If we only wanted the bottom right and bottom left corners to be rounded, we could be more specific when setting the border radius so it only applies to those corners. ```css - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; +border-bottom-left-radius: 5px; +border-bottom-right-radius: 5px; ``` +> Play around with border radius a little bit to see what effects you get. -Let's also round the corners of the second picture. First, let's add a class `rounded` to it. +Let's also round the corners of the second picture. First, let's add a class `rounded` to it then add the `border-radius`. ```css .rounded { @@ -200,9 +194,9 @@ Rounded corners look much nicer, don't you agree? ### Adding some subtle styling to the page -Small details make the difference. +Small details like this can make a big visual difference to your website. -Add a top and bottom border to the first image +Let's add a top and bottom border to the first image. ```css #left-bar .frame img { @@ -212,21 +206,21 @@ Add a top and bottom border to the first image } ``` -Also add a top border to our page, to make it a bit more polished. Add this to the style of the `body` +Also add a top border to our page, to make it a bit more polished. Add this to the style of the `body` element. ```css - border-top: 5px solid #4c4066; +border-top: 5px solid #4c4066; ``` -### Background - -Background is not a new CSS property, but in CSS3 it had a lot more capabilities. You can set multiple background images, specify their dimension, position and attachment. +### Background images -To set a background you can use +You can set a background image to any element on your page. To do this you declare that it's the background you want to change then add a URL, which is the path to your image. Like so: `background: url(path/to/image)` -to set multiple backgrounds, you simple need to specify them separating them by commas +You can also set multiple background images, specify their dimension, position and attachment. To set multiple backgrounds, you simple need to specify them separating them by commas. + + `background: url(path/to/image), url(path/to/other/image), ...` You can also set different properties for your backgrounds, by defining them in a similar comma separated way. @@ -254,7 +248,7 @@ background-size: 420px auto, auto 900px; Awesome. Now we can see Anita's picture properly. -But when we scroll, we don't want the background to change. To fix this, we must set the images as fixed. We can do that by specifying the `background-attachment` property +But when we scroll, we don't want the background to change. To fix this, we must set the images as fixed. We can do that by specifying the `background-attachment` property. Let's add: ```css background-attachment: fixed, fixed; @@ -345,7 +339,7 @@ By using `em` instead of `px` to set the font-size, we are keeping it relative t Increase the `line-height` of all other paragraphs. We can do this with another very smart selector, The **not** selector. -The **not** selector, finds all elements who don't match the specified description, in our case, all paragraphs that don't have a class `about` +The **not** selector, finds all elements who don't match the specified description, in our case, all paragraphs that do not have an `about` class. ```css p:not(.about) { @@ -356,16 +350,16 @@ p:not(.about) { ### Anita's speech The speech that we are using in our page, is titled **Where We Are And Where We Are Going**. -To make our content more clear, wrap the remaining paragraphs (all but the `about`) in a div with the class `speech` +To make our content more clear, wrap the remaining paragraphs (all but the `about` one) in a div with the class `speech`. Also, add its title using an `h2` heading -> That should come right after you open up the `speech` div +> That should come right after you open up the `speech` div. ### Achievements Anita had an amazing personality and was a person who contributed greatly to women in technology. -Let's list some of her achievements, just after the `about` paragraph +Let's list some of her achievements, just after the `about` paragraph. ```html