Important highlights of chapters 7-14 and what I have learned!

By reading those chapters I got a good understanding of what are a cascading sheet and all different changes that I can add to a cascading sheet.

CSS (Cascading style sheets) defines the appearance. A style sheets is simply a text file that contains one or more rules that determine through properties and values- how certain elements in a webpage should be displayed.

Each style rule in a style sheet has two main parts: the selector, which determines which elements are affected, and the declaration block, made up of one or more property/value pairs (each constitutes a declaration)

To add comments to style rules:

1. In your style sheet, type /* to begin your comment.

2. Type the comment.

3. Type */ to signal the end of the comment.

An em is roughly equal to the element’s font size, so 2em would mean “twice the font size.”

I can construct my own color by specifying its amount of red, green, and blue (hence the name RGB).

I can make style sheet with three methods: external style sheets (the preferred choice), embedded style sheets, and inline styles (the least desirable).

To create an external style sheet:

1. Create a new text document in your text editor of choice.

2. Define the style rules for your Web pages

3. Save the document in a text-only format in the desired directory document with the extension .css to designate it as a Cascading Style Sheet.

To link an external style sheet:

1. Type <link rel="stylesheet" in the head section of each HTML page.

2. Type a space and then href="url.css", where url.css is the name of my CSS style sheet.

3. Type a space and the final />.

An embedded style sheet is the second way to apply CSS to a page. It lets me set the styles directly in the HTML document that I want to affect (typically it goes in the head)

To designate media specific style sheets:

1. Add media="output" to the link or style start tags, where output is one or more of the following: print, screen, or all

2. Alternatively, use the @media at-rule in your style sheet

To select elements to format based on their class:

1. Type. (a period).

2. with no space, type classname, where classname identifies the class to which you’d like to apply the styles.

To select elements to format based on their id:

1. Type #

2. With no intervening space, type id, where id uniquely identifies the element to which I’d like to apply the styles.

Selecting Part of an Element:

To select the first line or first letter of an element:

1. Type element, where element is the selector for the element whose first line I’d like to format.

2. Type  :first-line to select the entire first line of the element.

EX: p:first-line {

                                Color: red;

}

To select links to format based on their state:

1. Type a (since a is the name of the element for links).

2. Type : (a colon).

3. Type link to change the appearance of links that haven’t yet been or aren’t currently being activated or pointed at. Or type visited to change links that the visitor has already activated.

Or type focus if the link is selected via the keyboard and is ready to be activated.

Or type hover to change the appearance of links when pointed to.

Or type active to change the appearance of links when activated.

To apply styles to groups of elements:

1. Type selector1, where selector1 is the name of the first element that should be affected by the style rule.

2. Type , (a comma).

3. Type selector2, where selector2 is the next tag that should be affected by the style rule.

To set the font family:

After the desired selector in your style sheet, type font-family: name, where name is your first choice of font.

To create italics:

1.     Type font-style:  2. after the colon (:), type italic for italic text

To apply bold formatting:

1.     Type font-weight: 2. Type bold to give an average bold weight to the text.

To mandate a specific font size:

1. Type font-size: 2. Type a specific size after the colon (:), such as 13px. Or use a keyword to specify the size: xx-small, x-small, small, medium, large, x-large, or xx-large.

To set the line height:

1.     Type line-height: 2. Type n, where n is a number that will be multiplied by the element’s font size to obtain the desired line height.

To change the text’s background:

1. Type background:

2. Type transparent or color, where color is a color name

3. If desired, type url(image.gif) to use an image for the background, where image.gif is the path and file name of the image relative to the location of the style sheet.

If desired, type repeat to tile the image both horizontally and vertically, or repeat-x to tile the image only horizontally, or repeat-y to tile the image only vertically, or no-repeat to not tile the image.

To specify tracking:

Type word-spacing: length, where length is a number with units, as in 0.4em or 5px.

To add indents:

Type text-indent: length, where length is a number with units, as in 1.5em or 18px.

To set white space properties:

1. Type white-space:

2. Type pre to have browsers display all the spaces and returns in the original text. Or type nowrap to treat all spaces as non-breaking. Or type normal to treat white space as usual.

To align text:

1. Type text-align:

2. Type left to align the text to the left. Or type right to align the text to the right. Or type center to center the text in the middle of the screen. Or types justify to align the text on both the right and the left.

To change the text case:

1. Type text-transform:

2. Type capitalize after the colon (:) to put the first character of each word in uppercase.

Or type uppercase to change all the letters to uppercase. Or type lowercase to change all the letters to lowercase.

To use a small caps font:

Type font-variant: small-caps.

To decorate text:

1. Type text-decoration:

2. Type underline after the colon (:) to underline text. Or type overline for a line above the text.

Or type line-through to strike out the text.

To use a background image:

1. Type background-image:

2. Then type url(image.png), where image.png is the path and name of the image that should be used for the background. Or type none to use no image at all, as in background-image: none;

To wrap text around elements:

1.     Type float:  2. Type left  or right

To position elements absolutely:

1. Type position: absolute;  2. type top, right, bottom, or left. Then type : v, where v is expressed as the desired distance that you want to offset the element from its ancestor (10px or 2em, for example)

3. If desired, add position: relative

To specify how elements should be displayed:

1.  Type display:

2. Type block to display the element as block-level , Or type inline to display the element as inline , Or type inline-block to display the element as inline but with block-level characteristics, meaning you can also assign the element properties, such as width, height, margin, and padding, on all four sides.