2.  Missing (or duplicate) semicolons can make the browser completely ignore the style rule.  You may add extra spaces between the properties/values to keep the style sheet readable (such as advancing to the next line) H1 {color: red; background: yellow;}

3.  The selector determines which elements a style rule is applied to.  Example: If you want all the “p” elements with the Arial font, 12 pixels high, you will need to create a selector that identifies just the “p” elements while leaving the other elements in your code alone.  A selector can define up to 5 different criteria for choosing the elements that should be formatted. Generally you use 1 or 2.

4. 1. The type or name of the element:  h1 {color: red;} 2. The context in which the element is found:  h1 em {color:red;}  h1 being the context and em being the name of the desired element  (em in css is referring to the size of the letter in relative terms. We will revisit this when we get into units of measurement)

5. 3. The class or id of an element  em.very {color: red;} div#gaudi {color: red;} (div and em is the name of the desired element and.very and #gaudi being the class and id respectively) 4. The pseudo-class of an element or a pseudo- element itself  a:link {color:red;} (a=name, link=pseudo-class (meaning the “a” elements that haven’t yet been visited))

6. 5. Whether or not an element has certain attributes and values  a[name] {color:red;} (a=name, [name]=attribute) You can use the square brackets to add information to a selector about the desired element’s attributes and/or values.

7. Attaching Styles

8.  Attach a style sheet to a page by adding the code to the section of the HTML page. There are 3 ways to attach CSS to a page:  1. External Style Sheet: Best used to control styling on multiple pages.   2. Internal Style Sheet: Best used to control styling on one page.  h1 {color: red;)  3. Inline Style Sheet*: CSS is not attached in the but is used directly within HTML tags.  Some Text

9.  Placed within the head tag  Tags are used for internal styles. What would the tag be?  Best used for single page webpage and/or to alter only one page.  You cannot access an internal style sheet from a page. It is page specific.

10.  Can be applied to as many html documents as you need.  Can include rules for customizing text, tables, form elements, etc.  SAVE your style sheet in a separate text doc using the.css file extension to identify the file as being a CSS sheet.  Be sure to save in the same file folder as your html files.

11.  You can link to your style sheet by simply assigning formatting rules to your html document.  What tag would you use for this?  The tag is entered between the head tags.  You will need to use the path of the style sheet when naming the link. (If your css is in a subfolder, you will have to state the folder in which it is in ex: css/styles.css)

12.  To be used directly within the tag that you are using.  Uses the style attribute: style=  If used, it will override any internal or external style that was originally applied to that sheet.  Use internal or external if you plan to use more than once.

13. Class and ID

14.  You can create a CSS class to apply a style rule to specific instances of HTML tags in a page.  Example: If you want a specific paragraph(s) formatted differently from all the other paragraphs, you can create a class specifically for that paragraph.  After you create a class, you need to assign the “class” attribute to the specific area you intend to alter (example: paragraphs)

15.  Rules:  The CSS must begin with a period (but not used in the value to the class attribute).  Class names must begin with a letter and can contain only letters, underscore characters, dashes, and numbers.  They cannot contain spaces and are case sensitive. (Both the style sheet and the html attribute must be identical.)  Classes can be used more than once.

16.  Class in CSS.contentsubhead {font-family: Georgia, Times, serif; margin-left: 20px}  Class attribute within the html document

17.  You can set up a class in an internal or external style sheet  Why not an inline style?  Inline styles are specific to its relative tags anyway…USELESS!

18.  An ID selector allows you to create a generic set of style rules and then apply them to your page via the matching HTML attribute, ID.  What is the difference between an ID and CLASS?  With “class” you can apply to several html elements whereas with “ID” you can only use the ID once (to a single tag).  ID’s are unique (as we previously seen when using them for links to a specific area within a page)

19.  ID styles take precedence over those of the class  Example: If both class and ID are applied to the same element, the element will take on the property and values of the CSS ID  The ID selector must begin with a pound sign (or hash mark): # The sign is not repeated in the matching HTML attribute

20.  ID in CSS #maincontent {font-family: Georgia, Times, serif; margin-left: 20px}  Class attribute within the html document

22.  Serve as “empty containers” with which you can apply styles.  Generally you associate a class with the div and span tags.  What do they look like?  Both tags do not have any default formatting.

23.  Used to group a block of elements that you need to style together.  Example: the banner area at the top of a page may be made up of one or more images, heading, and a set of links for your primary navigation.  Considered a block-level tag  Means that it adds blank lines above and below the content it surrounds  Similar to a paragraph tag

24.  Used to style a group of words or letters within a bigger block (similar to the font tag around a word or words within a paragraph)  In particular, style a portion of text that has no other tag around it.  Exists to solely provide you with an inline element to which you can apply styles  FYI:  When you apply a class to a tag, the class-based rules override any conflicting rules already assigned to the tag.