CSS

What is it?

Cascading Stylesheets. It's what adds the style to HTML. By using a consistent stylesheet, you can apply styles across multiple HTML pages on an entire website.

Why should I learn it?

CSS goes hand-in-hand with HTML. It allows you to be very flexible with modifying and customizing design elements and provides methods for making your sites responsive to different screen sizes and formats.

What can I do with it?

You can apply it to a web page/site you have already made and change things like color, typeface and layout. You can also use it to customize sites you create from content management systems, like Wordpress, or development frameworks, like Bootstrap.

How long will it take?

You can start applying CSS immediately to the HTML page you created in the previous exercise. As you work with it, you will learn tips and techniques that will help you create interesting designs. But you should be able to pick up the basics in a few hours.

Getting Started

CSS (Cascading Stylesheets) is a language that lets you apply style to your HTML pages. You can add color, change typefaces, adjust sizes and control layout. You can even use CSS techniques to make your sites responsive to different screen formats, like tablets and phones.

Like HTML, CSS can be developed in a simple text editor like TextEdit, BBEdit or Notepad. Or you can use an HTML editor like Text Wrangler, Sublime Text, Komodo Edit or Notepad++.

You can apply CSS in three different ways:

Within an element: add the style attribute to any element. This style only applies to the element on which it is placed.

<p style="color: red">

The above controls the color of the text of that particular paragraph.

In the head of a web page: you can include styles in the head section of your web page. These styles only apply to elements on the page on which they are placed.

<style> p { color: red; } </style>

The above controls the color of the text of all paragraphs on the page.

As a separate stylesheet linked to multiple pages: this is the preferred method. You create a separate file that includes all your styles and then you link that page in your html file.

<link rel="stylesheet" type="text/css" href="style.css" />

You will place the above code in the head of your html page. You can name the file anything you want, as long as you give it a .css extension. Be sure to use the proper relative path to the file, depending on where you save it. As with all Web development files, it is important to establish an organized file structure to start. You should pay attention to the relationship between files when creating links and inserting images.

CSS3 is the current generation of CSS. It adds some cool functionality like rounded corners, gradients and animated transitions, which we will cover after the basics.

A property is a command written between curly braces that is applied to an html element. Each property contains a value, assigned after a colon. End each property line with a semicolon.

h1 { color: blue; font-style: italic; }

The above style assigns a blue color and italic style to the h1 element. You can apply as many properties as you need to the associated element. The properties have associated values deemed by the designer.

Make sure you close the curly brace and the semicolon. Inconsistent coding can cause errors and problems that will take time to troubleshoot. Like HTML, CSS properties should be lower-cased. It is considered consistent coding style to use lowercase for css properties and is the standard the most Web developers now use.

Basic Properties

Basic Properties

There are several basic properties that you will use in your styleseheet.

  • Font properties
  • font-family - use to indicate a specific use of a typeface. User must still have the font on their device, but by including a list of typefaces, you can increase the chance of them having one of your desired fonts. For example: font-family: Arial, Verdana, Helvetica, sans-serif.

    font-size – typically em (a relative size) or px (pixel sized)

    font-weight - bold

    font-style – italic

  • Color and Background properties
  • color – color of text; can use color name or hexidecimal code

    background – color of background

    background-image –background-image: url(“name.gif”);

    background-repeat – use 'no-repeat' to show once; background-repeat: no-repeat;

  • Text properties
  • text-decoration – underline

    vertical-align - vertical positioning of the element

    text-align – alignment within element

    text-indent – first line indent

  • Box properties
  • margin-top, margin-right, margin-bottom, margin-left

    shorthand example - margin: 1px 1px 1px 1px; Read these clockwise starting with top

    padding-top, padding-right, padding-bottom, padding-left

    shorthand example: padding: 1px 1px 1px 1px; Read these clockwise starting with top

  • Border properties
  • border-top,border-right, border-bottom, border-right

    border-width - establish size of border

    shorthand example border-width: 1px 1px 1px 1px; Read these clockwise starting with top

    border-color

    border-style – dotted, dashed, solid, none;

    shorthand example: border: 2px solid red; This creates the same border size, style and color for all borders

  • List properties
  • list-style-type - disc, bullet, none

    display: inline (to make lists present horizontally)

  • Other properties
  • width - can be pixel or percent; percent used for responsive design

    height - can be pixel or percent

    float – used for positioning and wrapping around an element

    display - inline or block to change default

    position – absolute or relative

    top – use with absolute positioning

    left- use with absolute positioning

  • Positioning
  • Use divs as containers for layout

    Can use absolute or relative positioning

    Can size containers with pixel or percent, but we will cover percentages in more detail when we discuss responsive design. See below for more on layout.

Format of a CSS file

Copy and paste all the code in the Code Sample - CSS to the right into a text editor like Text Wrangler (Mac) or Notepad++ (PC). All css files should have the .css extension. For this file, name it style.css and save it in the same folder as the html page you created in the previous exercise. For consistency and easy troubleshooting, filenames should be lowercase with no spaces.

In the index.html page, insert the Sample Code - HTML into the head of your document. You will need to do this in all your html pages for the styles to apply to those pages. Open index.html that you created in a browser (File, Open File). You should see the file render with the new styles associated. .

Play with the styles. Change colors and other attributes to see how they affect the page.

Code Sample - Basic Elements

CSS

 

HTML

Your page should look something like this when you open it in a browser.

Classes and IDs

Classes

The above styles aren't the only ones you can create. Sometimes you need to use the same style across different elements of your site. For this, you can create a special class. Use the format below, preceding your class with a period (.). You can create as many special classes as you need, and you can use a class as many times as you want on a page.

.small { font-size: 8px; font-style: italic; }

The code above will create a style called "small" that you can use anytime you want smaller, italic text on the site. You can add any other properties you want to this style. To apply the style to an element in the html page, use the syntax below.

<p class="small">Copyright 2016</p>

You can create classes that can be applied to any element or you can create classes for specific elements. For example, you can make a special class that applies only when used for paragraphs.

p.small { font-size: 8px; font-style: italic; }

IDs

Sometimes you want to set up a style that will only be used on one element on a page. This is particularly helpful for using styles to layout a page. You will use in conjunction with the html elements for layout (see below), to create interesting and responsive layouts. Use the pound sign or hashtag (#) before the style to indicate an id.

#header { width: 960px; height: 100px; background: lightblue; } Then include the id in the element on the page. IDs can be used with any element, but they are often used with the generic container elements <div> and <span>. <div id="header"> <h1>Cindy's Web Page</h1> </div>

Code Sample - Classes and IDs

Add the styles below to the bottom of you css file and then add a paragraph that references the small class to the bottom of the html page. Do this before the closing body element.Add a div element with an id of "header" to the top of the page around your h1.

Make sure you save both files. Refresh the index.html file in the browser. Refresh the page every time you make a change.

CSS

HTML

 

Notice how a box was created around your header section and the last paragraph with the copyright information is much smaller than the other paragraphs.

Notice how this code creates a box with the dimensions and styling indicated by the header id and applies it to that div element in the page. You can add a logo here and do other styling to the elements within the header to create the introductory segment of the page. Next we'll use divs with ids to create an entire page layout.

Using CSS for Layout

As we introduced above, there are generic html elements that allow you to structure a page and add styles.

<div> - a block element, used to create containers for content or sections on a page.

<span> - an inline element, used to apply a style that somethat that is otherwise not styled. We'll work on this more as we move into JavaScript programming concepts.

You will make some changes in your html page to apply the divs you will need to begin to add structure. We'll apply ids for header, nav (for the navigation bar), section (for the content and footer. We will use pixel widths for the widths of our divs in this tutorial, but will introduce percentages in the responsive design exercise.

Then use the following to apply to a div containers to the content on your page. Make sure all content on the page is included in a div, so it will be in a layout container. See the code sample on the right.

Notice that the nav property has styles to control the way the lists and links look for that property only. This allows us to structure the navigation section of the page in a way that is unique to the default list and link styles.

Code Sample - Layout

CSS

Remove the style for #header we created above. Add the properties below to your stylesheet. These styles are a little more complex than what you added above, but go through them carefully to understand what they are meant to do. Make a margin "auto" centers it on the page.

HTML

Now create the divs on the html page to correspond to what is in the stylesheet. Make sure all content goes in a div. The code below includes html comments to indicate where the divs begin and end, but this code does not affect how the page looks. It just makes it easier to be sure you have closed all divs that have been opened. Paying attention to closing divs will become more important as we have nested divs in more complex layouts.

Your page should be starting to look like it has some layout applied to it. You will have to add the divs to all your pages, but you can just modify the first page as a template and res-ave them, if you'd like.

Another Stylesheet

Just for fun, let's apply another stylesheet that uses the same divs but creates a completely different layout. Find the code to the right and create a new stylesheet with these styles.

This stylesheet gives us the ability to have a side, vertical navigation bar that goes next to the section div instead of above it. We introduce the float property to float the nav div next to the section div. Notice the changes made to the nav list that allow it to display vertically and notice the changes to the widths to accommodate the side-by-side layout.

In this stylesheet, an overall div called "main" is used to contain all the other elements and center the page. Include the html for the main div around all content in the body, as in the example to the right.

You could use this same technique to include a sidebar on the page. Play around with css until you get the layout you want.

This demonstrates the power of CSS. By making changes to CSS, you can accomplish a broad design upgrade without have to do much manipulation of the html pages.

Code Sample - Another Stylesheet

CSS

HTML

Make sure you have the new stylesheet linked in the head of the document (style2.css). And include the main div around all the content on the page.

Your page should now look like this. Magic! A completely new layout!

Other Elements

CSS3 works together with HTML5. It's not really the newest generation of CSS, but a way to understand where certain modules of elements are in their development. CSS 1 was proposed in 1996 and CSS2 in 1998. The last specification was CSS 2.1 in 2004, and that's when widespread browser support for it started developing. When we think of modern CSS, we are mainly thinking of the CSS 2.1 specification.

Massive changes in the development environment, including mobile and online apps weren't addressed by the original CSS. It became too difficult to get one full specification approved, so CSS became approved in modules. CSS3 is based on and meant to extend the CSS 2.1 specification. Some areas are further along in the process than others. You can go to the W3C Current Work page to assess the status of any feature within a module.

CSS3 introduces some exciting new features including non-standard fonts, text effects, gradients, opacity, rounded corners, border images, table striping, multiple backgrounds and improvements in page layout.

Here are a few you can try on one of your divs. See the last two properties on the header div below. The border-radius adds rounded corners to a div. The code below only adds these to the top left and right corners, using the shorthand syntax.

There are different types of gradients you can try. The code below does a linear gradient from dark gray to white.

Test these out on your header div.

#header { position: relative; margin-left: auto; margin-right: auto; border-left: 2px solid gray; border-right: 2px solid gray; border-top: 2px solid gray; width:950px; height: 75px; background-color: #CCCCCC; border-radius: 10px 10px 0 0; background: linear-gradient(darkgray, white); }

When a new property is introduced in CSS3, it is not always fully supported by browsers. Sometimes you have to add the browser prefix to the property until it is fully supported by the browser. If you want to use a new property, you should be sure to use the prefixes for it to render in all browsers. Otherwise, it may be ignored by that browser. For example:

background: darkgray; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(darkgray, white); /* For Safari/Chrome */ background: -o-linear-gradient(darkgray, white)); /* For Opera */ background: -moz-linear-gradient(darkgray, white)); /* For Firefox */ background: linear-gradient(darkgray, white)); /* Standard syntax */

Also notice above how CSS is commented. Use the "/*" and "*/" to surround any comments in a CSS page.

There are some new ways to do positioning with HTML 5. There are for commonly used elements that can be used without a div for these main sections of the page. It's not required to use these. You still have to create divs for other segments of the page. Some designers continue to use divs for all their container elements.

<header></header> <nav></nav> <section></section> <footer></footer>

Add CSS properties as you would for divs in stylesheet, i.e:

header { width: 950px; height: 100px; padding-top: 0px; padding-left: 0px; }

Moving On

That's a pretty good introduction to CSS. You should now have an understanding of the basic properties and values and how to use them to design and layout a web page. You'll have to spend some time to achieve exactly the layout and design you want, but you now have a basic understanding of the CSS properties that you need to use. We'll continue to use CSS as we move into Responsive Design next.