WHAT IS CSS?
Introduction to CSS
CSS adds styles to your web pages: it’s the skin over the bones of HTML. This tutorial will teach you how to style our webpages.
- Cascading Style Sheets (CSS) are a standard developed to allow designers control over presentational elements of a Web page and effectively separate content from presentation.
- A style is a group of attributes that are called by a single name.
- A style sheet is a group of styles.
- The cascade part of CSS means that more than one stylesheet can be attached to a document, and all of them can influence the presentation. It also means that different applications of CSS can be applied to a page in order of precedence: inline, embedded, external and default.
CODE ACADEMY LESSON IV
1. What’s CSS? Lessons 1-6
The basics: what CSS is, how it works, and why we separate form from function.
CSS SYNTAX
The CSS syntax is a little different from the tag and attribute format of HTML. A CSS style is made up of a selector, which is the HTML element or class name you wish to define rules for, and a set of properties and values. A property and its value are separated by a colon (:). You can define multiple properties for a style, separating them with a semi-colon(;). Property/value sets are enclosed in brackets{}.
For example, if you wanted to redefine all HTML in your <p> tags to look like this, then your style would look like this:
p {
color: #00CC00;
font-size: 13px;
font-family: "Courier New", Courier, monospace;
font-weight: bold; text-decoration:none;
}
The order of properties doesn’t matter, as long as you separate them with a semi-colon. Property values that have multiple words are surrounded by double quotes: “Courier New”.
You can apply the same style to multiple selectors by grouping them:
h1, h2, h3, h4 {
color: #00CC00
}
There is a full CSS reference and extensive code examples at:
also at: http://www.barelyfitz.com/screencast/html-training/css/positioning/
CODE ACADEMY LESSON IV
2. CSS Syntax
Now that you know what CSS is, it’s time to learn how to use it.
Sizing in CSS
There are a number of different measurement schemas within xHTML / CSS. Which one to use depends on context, and you can mix and match them.
px
– number of pixels, relative to the screen size. This is the most consistent across machines, browsers, monitors%
– percentage of the total width or heightem
– size relative to the em size of the base font
We will go into when it is appropriate to use the various schemes in later weeks. For now, use the px units in your stylesheets.
CODE ACADEMY LESSON IV
3. Details, Details
You’ve got basic CSS under your belt—now we’ll cover some of the finer aspects.
The three types of HTML elements to apply styles to:
An important concept to understand is that there are basically three types of HTML tags: block-level elements, inline elements, and replaced tags.
- Think of block-level elements as boxes that have a line break before and after. Block-level elements are the ones you will spend most of your time applying style rules to, or manipulating with scripting. They include
h1-h6, p, div, ul, ol, blockquote
. - Inline elements on the other hand, don’t have line breaks before and after. Inline elements are used in the middle of another element, and include
a, b, strong, italic, em, span
- The third kind of HTML tag is called a replaced tag. What it means is simply that these elements have a set width and height. The most-used replaced tag is the <img> tag, which you must specify a height and width for.
If an element is not explicitly defined, it is known as an anonymous element.You will not be able to style this element directly.
CLASSES AND IDS
Classes and Ids are a way to designate specific elements in your HTML. You can apply either a class or id or both to any element:
<div id="navigation">
<p>
There is one key difference between a classes and ids:
- IDs can only be applied to one element per page
- Classes can be applied to multiple elements per page
When naming classes and ids, it is good practice to name them logically and semantically. The names should not describe the physical attributes of the style you plan to apply to them, but the type of thing that they are in the structure of your page. For example, if you have a unordered list of links that will serve as your navigation, this:
<ul id = "navigation">
is better than this:
<ul id = "top">
The reason for this once again we want to separate the structure from the presentation. Naming your classes and ids logically means that if you radically change the color scheme or layout defined by your style sheet, the structure will still make sense.
3 WAYS TO USE STYLE SHEETS
There are three methods of accessing style sheets from your HTML:
- Inline as part of an HTML tag.
- Embedded in the <head> section of your page between <style></style> tags
- In an external document that is linked to the page
Here is an example of a page that uses inline and embedded styles:
We are going to focus primarily on using external style sheets. The are a couple of advantages to this. First, you can apply the same styles to some or all pages of your site. Second, you can make a change on the external style sheet and all the pages it is linked to will change. And last, with a simple change to your code, you can switch style sheets and completely alter the look of your page.
Style sheets work in 4.x or later browsers (but still not consistently) such as Navigator 4.5 or 6 and IE 4 or 5. Most earlier browsers ignore them.
A good place to see style sheets in action, and to really understand how powerful they are, is the CSS Zen Garden.
CREATING AND LINKING TO YOUR OWN EXTERNAL STYLE SHEET
An external style sheet is a plain text document containing all the style declarations you wish to apply to the linked pages. It does not have the structural tags (html, head, body) that your HTML documents have.
Once you have created your style sheet, you can associate it with your page using the link tag in your HTML, placed between the <head> tags:
<link href="styke.css" rel="stylesheet" type="text/css"/>
MANIPULATING BASIC CSS PROPERTIES
CSS Classes and IDs
This tutorial covers how to group CSS selectors into classes or identify a single selector by ID.
CSS Selectors: 23 exercises
WEB DEVELOPER ADD-ONS
There is an excellent suite of Firefox and Google Chrome add-ons that will help you in your site development. We’re going to install them now, and I highly recommend that you install them on your home machine:
As the course goes on, we are going to learn to use the various tools included in the suite.
VALIDATING YOUR CODE
It is essential to make sure that you are writing valid xHTML code. Improperly formatted code can cause your pages to render in unpredictable ways or not at all in various browsers.
The W3C offers a free validator that you can run any html page through:
You can also access the validator through the “Tools” menu in the Web developer toolbar.
HOMEWORK
CODE ACADEMY | Introduction to CSS
No. 7 | CSS AN OVERVIEW
NO. 8 | DESIGN A BUTTON ON YOUR WEBSITE
CODE ACADEMY | CSS Classes and IDs
NO. 9 | CSS SELECTORS
NO. 10 | SORTING YOUR FRIENDS
CSS
USING THE WHAT IS CSS? VIDEO WE WATCHED INN\ CLASS —
Go to one of the html pages you already created and add three div’s that corollate to three div styles in the style.css page you created.
- Complete ALL the code academy tutorials finishing with Introduction to CSS No. 7 CSS: An Overview.
- Using all the properties we have covered today, create a single, external stylesheet and apply it to both your bio and your resume pages.
- Post the new work and link it to your homework page.
- Go back into your index.html, artist.html, resume.html and contact.html pages and add div’s.
- Create a style.css page in Text Wrangler and link it to your index.html, artist.html, resume.html and contact.html pages. Add the div names in your css page and STYLE them including font, color, size and any other attributes you want to use.
- Take any 12 images. They can be photos, illustrations, your artwork, anything you have. If you do not have anything you can pull images from Google images or create different colored boxes and use those as images. Create two different sizes of these images, one thumbnail image and one full size image. The full size image should not exceed 800×600 pixels. Use the “Save for Web” process to optimize the images, saving them in the file format most appropriate for each image. Save these images to the “images” folder you created in week two.
- Create HTML / CSS using the thumbnail size of the images that duplicates the functionality of the thumbnail gallery that we went over in class today. Take the thumbnail gallery one step further – link each thumbnail to its full sized image. Post the files and images to your server and put the link to the gallery on your blog.
- Add a background image.
- Make one of your images link to another website.
- Add ALT, HEIGHT & WIDTH properties to all your images.
- Add a border to one of your pages.
Homework: http://www.briannaruthmills.com/homework-week-13-due-427/
http://www.briannaruthmills.com/webdesign/homework.html
http://monicaconiglio.com/week-13-homework-due-4-27-15/
http://leahmartocci.com/webdesign/homework.html
MISSING
Rounded corners images
Clickable images
http://www.kellykemner.com/homework-week-13-4-27-15/
http://kellykemner.com/webdesign/homework.html
Your clickable images shouldn’t be linking to flickr.
http://www.jenniferbadrow.com/?p=167
Your missing all your html pages.
Week 13:
http://www.alexaemilia.com/homework-week-13-due-42715/
http://www.alexaemilia.com/webdesign/aihomework.html
Your screen shot of your badges is not showing up.
Your second link is dead.
Homework Week 13:
http://www.michelleanndickman.org/homework-week-13-due-42715/
You only posted one badge. Where is all your homework?
http://www.tylerdichiaro.org/homework-week-13-due-4-27-2015/
http://tylerdichiaro.org/webdesign/homeworkpage.html
Your images should be clickable from a small image to a larger image.
http://www.lindsayperrotti.com/?p=163
http://lindsayperrotti.com/webdesign/homework.html
Your images on your portfolio page are broken.
Rounded images missing.
Embeded video and audio missing.
http://www.joeyboullianne.com/homework-week-13-due-april-27th/
Embeded video and audio missing.
Rounded images missing.
http://www.sophiaaiello.com/week-13-homework-due-4-27-15/
Embeded video and audio missing.
http://www.kylanoshea.org/webdesign/homework.html
Rounded images and embeded video missing.
Homework:
http://www.lindsayperrotti.com/?p=163
http://lindsayperrotti.com/webdesign/homework.html
http://monicaconiglio.com/webdesign/homework.html
http://www.kajalpatel6.com/webdesign/homework.html
Rounded images are broken.
Embeded audio missing.
Week 13:
http://www.alexaemilia.com/homework-week-13-due-42715/
http://www.alexaemilia.com/webdesign/homeworkai.html