CSS Fundamentals
for Beginners

Exercise #1: Personalize the content (5-10 mins)

1. Update the page title in the title tag.
2. Update your name and tagline in the header section.
3. Update your profile image.

Bonus: If you have some extra time, try updating the content for the rest of the page.

Don’t forget to save your changes (File > Save) and refresh the browser after each update! Don’t worry if you don’t finish. There’s placeholder content already included in the starter template.

Protip! Improve your work flow with keyboard shortcuts:

CMD/CTRL + S to save
CMD/CTRL + R to refresh the browser

Adding Background Colours

Using the background property to add colours to various page sections can be very useful when laying out the CSS for your HTML document. We will be going more in depth with the various background options but for now, try changing the colours below and see what happens!

Default styles: Reset vs Normalize

You may notice that the colours don't span all the way to the edge of the page. That's because browsers have their own user agent style sheet to add default styles to the html elements. Here's an example of Chrome's user agent style sheet, which can be seen using dev tools:

A CSS Reset is a set of CSS rules that resets the user agent styles of the HTML elements to a consistent, unstyled baseline to avoid cross-browser differences as much as possible.

Normalize is slightly different because it "normalizes" the consistencies to a default style rather than removing the styles. Another option is to choose a reset and customize it yourself to create your own.

Note that if you add it as a separate style sheet, it should be included before your custom style sheet.

These various style sheets can be downloaded at cssreset.com but for today, it’s already included in the project > css folder. Let's add it to today's project file (index.html).

Font Styles & Typography

Let's experiment with a few CSS properties for styling text. Try changing some of the values below.

Resources:
Text CSS properties reference
http://csstypeset.com- CSS generator

Class Exercise: Typography

Let's add some styles together using a few web safe fonts, cssfontstack.com.

1. Set the main font-family & line-height using body as the selector.

body {
    font-family: Georgia, Times, "Times New Roman", serif;
    line-height: 1.5;
}

2. Set font styles for h1, h2 and h3

h1 {
    font-family: "Brush Script MT", cursive;
    font-weight: 400;
    font-size: 80px;
}
h2 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 32px;
}
h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

Exercise #3: Typography (10mins)

1. Find and add 2-3 font families from Google Fonts
2. Update the font & typography styles to your liking! You can add some more later as the page starts to come together.

Text CSS properties reference
http://csstypeset.com - CSS generator

Need help deciding on fonts? The example project uses Open Sans (sans-serif), Merriweather (serif), Pacifico (cursive).

Your page should look something like this: Example 3.

Padding and Margin

The padding and margin can both be declared using similar syntax of 1 to 4 values. Values can be declared using different measurement units but pixels or percentages are most commonly used. Setting the value to "0" will remove any default space on an HTML element. Any positive value will add space.

• 4 values means top, right, bottom, left
• 3 values means top, right & left, bottom
• 2 values means top & bottom, right & left
• 1 value means the same amount of padding on all sides

Change some values to see the difference between margin and padding. Trying using 1 - 4 values. Let's also inspect the element using Chrome's Developer tool.

padding and margin test

Center aligning with margin

The margin property can also be used to center align block level elements. (More about block level elements later). First, a width needs to be set. Then, setting the left & right values to auto will find the center of the page. The 0 just refers to the top and bottom value.

Margin also accepts negative values. See more here.

Class exercise

1. Add the box model fix to our CSS file. link
2. Go back to our HTML & CSS project files, add padding:1px to the header section to see how it changes the spacing. Open up the Chrome Dev Tools and inspect the element.
3. The content is also too wide. Let’s use the margin: 0 auto trick to center align the content. Try adding the styles to the .profile section in your CSS file.

.profile {
    width: 1000px;
    margin: 0 auto;
}

Your page will look something like this:

width & max-width, px vs %

The content is all nice and centered now but what happens when the browser window is smaller than the set width? Let’s look at the difference between the max-width and width property and using percentages and pixels.

Minimize the screen and see how the box responds. Then change the width to a percentage value less than 100% and try it again.

Lunchtime!

Need some time to check your work?

Take a look in the examples folder. We are now up to 5-header.html & 5-header.css.

Also, you can prepare for the next exercise by picking two images to use as the background images for your page or just choose from the images included in your project > images. Here’s the link to the final project for reference.

Resources for free images:

• http://superfamous.com/
• http://www.gratisography.com/
• http://littlevisuals.co/
• http://nos.twnsnd.co/
• http://unsplash.com/

Float, Clear and Clearfix

First we have to break it, then put it back together. One of the most confusing CSS concepts is when to use clear:both and the .clearfix class. Rule of thumb: if there's is an element that follows the floated element, apply clear: both to that element. If all the elements need to be floated, apply the .clearfix class to the parent element.

Click on the Edit is JSFiddle to open the example. Let's go through the instructions.

Let's add this clearfix snippet to our CSS file to use it later.

Want to know more about the clearfix trick and clearing floats? Here you go:
http://css-tricks.com/snippets/css/clear-fix/
http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

Exercise #8: Background, colours, border (20mins)

1. Update the Work Experience and Education section with the same background colour. The sample project is using a very light gray (#fefefc).
2. Change the font colour of the Profile, Skills & Contact section to white or #ffffff. (Try combining selectors for shared styles.)
3. Add another background image to the Skills section. Don’t worry about the overlay effect right now. Just add the image.
4. Add an underline to the <h2> headings, #cccccc or a colour of your choosing.
5. Update the background colour for the Contact section. Use #111111 or a colour of your choosing.
6. Pick an accent colour and apply it to all links (a element).

Colour inspiration:
http://colours.neilorangepeel.com/
http://flatuicolors.com/

If you get stuck, ask a mentor! Don’t worry if you don’t finish, we’ll go through it together as a class.

Your page should look similar to this: Example 8.

Profile Heading Update

Let’s update the <h2> tag in the profile section and give it a style different from the other headings. First, we’ll override the bottom border. We need to use a selector that is specific to the profile section. Add a background color too. Try using your accent colour.

.profile h2 {
    border: none;
    background: #2980b9;
}

Headings are block level elements so by default, they are going to want to span 100% width of its container. We could set a width value on it but what if we change the greeting? Then we’d have to set the width again. Inline elements are as wide as their content.

In CSS we can use display: inline-block; to access the block and inline behaviors and change how the h2 is displayed. Add some padding too.

.profile h2 {
    border: none;
    background: #2980b9;
    display: inline-block;
    padding: 10px 20px;
}

Read more about inline & block elements and the display property here.

CSS Transition

The transition property can be used to change values over a specified duration making the transition appear less abrupt. Hover over this paragraph to see the transition. Experiment and change some of the values below.

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

More about transition: http://css-tricks.com/almanac/properties/t/transition

Gradients

background can also be used to create a gradient. Using CSS gradients instead of an image file, is better for flexibility and performance. Gradients are usually one color that fades into another. With CSS you can control the direction of the fade, the colors, as well as where the color changes happen.

Gradients are set using the background-image property. The shorthand background property will also work.

To set the values, use linear-gradient(color, color) to set the start and stop colour. The axis defaults at a top-to-bottom angle, though it is also possible to change the direction of the axis. To change the direction to left-to-right, pass an additional parameter at the beginning of linear-gradient()starting with the word "to" and the direction. (ex. "to right")

background-image: linear-gradient(to right, red, blue);

In the example below, try putting a start and stop colour. Then try changing the direction.

Learn all about gradients here: http://css-tricks.com/css3-gradients/

Gradients and Background Images

In our Skills section, the text is hard to read on top of the background image. We can use gradients and set multiple background images to achieve this effect.

Declare the gradient first so it can sit on top of the image. We also want to see the image through the gradient so use RGBA color values to set the alpha transparency.

Position: fixed

When positioning an element as fixed, it will always be positioned to the viewport and will always stay fixed on the page, even on page scroll. Try adding a top value (or any other directional offset property: right, bottom, left).

<div class="box"></div>

Class Exercise: Position and style download link

Use fixed positioning for the link to make it always available as the user is scrolling down the page.

What properties & values are needed to position this element to the top right of the page?

.download {
    position: fixed;
    top: 0;
    right: 0;
}

To style this download link to look more like a button, follow these instructions here.