recitation5 notes

W3orgtrselectors how does the browser know how to

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: or1 selector1[attr=value] targets all elements specified by selector1 with a specified attribute, e.g. input[type=password] Selectors can also be combined! For example, img.classA.classB#idName[alt=”Profile image”] There are a lot more ways to select elements; for a complete list check out the W3C specs: How does the browser know how to display particular selected elements? Notice that a rule also consists of declarations, which are simply property:value pairs. The browser renders targeted elements based on these property:value pairs. There are lots of properties - no need to memorize all of them. Check a reference like the Mozilla Developer Network (MDN: Reference) to find the properties (and the possible values that can be associated with those properties) you need in order to implement a particular styling. CSS let's you change almost everything about a page's appearance. Properties range from typographical (font-size, letter-spacing, line-height, font-weight, font-style) to appearance (color, opacity, backgrounds, border) to positional ("position", top/left/right/bottom) to size (height, width, padding, margin) and more. Let’s now style the whale page with what we know! 1. Create a new file called whale.css. 2. Link to it whale.html by including <link rel="stylesheet" href="/path/to/whale.css" /> in whale.html's header. 3. Give the "Welcome..." <p> element the id "welcome". Add a presentation rule to whale.css that makes this element's content larger, Arial font, centered, and of dark blue color. For example: #welcome { font-family:Arial; font-size:36px; color: #3B6AA0; text-align: center; } Now, whale page looks like: 4. Give the whale picture <img> element the class "whale pic". Then, using CSS, center the whale picture and give it rounded corners! For example: .whale_pic { display:block; -webkit-border-radius: 20px; -moz...
View Full Document

This document was uploaded on 03/18/2014 for the course EECS 6.170 at MIT.

Ask a homework question - tutors are online