Basics CSS Chapter 3 1

The bad way to produce styles tags such as b, i, u, and font are discouraged in strict HTML, even some of them are deprecated. – Why is this bad? Because they describe appearance and formatting not content. Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices! 2 HTML without CSS Desired output

Cascading Style Sheets (CSS) CSS describes appearance and layout of information on a web page – (as opposed to HTML, which describes the content of the page) can be embedded in HTML or placed into separate.css file – Embedded inline with an individual element – Embedded in the page’s head section – Can be placed in separate.CSS file (preferred) 3 declare a style for an individual element by using the style attribute in the element’s start tag Each CSS property is followed by a colon and the value of the attribute – Multiple property declarations are separated by a semicolon color property sets text color – Color names and hexadecimal codes may be used as the value Inline style

4 Style attribute Sets the paragraph’s font size to 20pt Sets the paragraph’s color to light blue

Embedded Style Sheets 5 Styles are placed in a style element style element consists of one or more rules each of which consists of one or more selectors that specify HTML element(s) on which CSS rules are applied ‒A rule is a CSS statement describing a set of tags and a set of styles to apply to those tags ‒ Each rule body in a style sheet begins and ends with a curly brace ( { and } ). CSS rules in a style sheet use the same format as inline styles: – The property is followed by a colon ( : ) and the value of that property – Multiple properties are separated by semicolons ( ; ) style element attribute type specifies the MIME type (the specific encoding format) of the style sheet. Style sheets use text/css

Embedded Style Sheets 6 Sets the MIME type to text/css Sets the properties for all elements in the document within em tags Style sheet begins Sets the properties for all h1 elements in the document Sets the properties for all p elements in the document Style sheet ends

Embedded Style Sheets 7 The special class is applied to this p element

External Style sheets: rules placed into separate.css file 8 External style sheets are reusable. Creating them once and reusing them reduces programming effort. Help create a uniform look for a website – separate pages can all use the same styles – Modifying a single CSS file makes changes to styles across an entire website link element – Uses rel attribute to specify a relationship between two documents – type attribute specifies the MIME type of the related document – href attribute provides the URL for the CSS document HTML......

External Style sheets: resume.css 9 h1, h2, h3 { color: green; font-family: Helvetica, "Arial Black", sans-serif; } h2 { font-size: 12pt; } p { color: purple; background-color: #ffbb00; }

External Style sheets: resume.html 10 Marty Stepp's Resume Marty Stepp's Resume Objective To get out of teaching and become a waiter! I can't take it any more. Please hire me! I am desperate. I am available starting Summer 2011 for any job, any place. I'll move if I have to. I'll live in a van. I will shine shoes. Please please please. Education Arizona, (BS) Arizona, (MS)

CSS properties for colors p{ color: red; background-color: yellow; } 11 CSS This paragraph uses the style above. Output propertydescription colorcolor of the element's text background-color color that will appear behind the element (i.e., background color of the element)

Specifying colors p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; } 12 CSS Output color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow color nameswhite RGB codes: red, green, and blue values from 0 (none) to 255 (full) hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)

CSS properties for fontsfonts CSS properties for fontsfonts 13 propertydescription font-familywhich font will be used font-sizehow large the letters will be drawn font-styleused to enable/disable italic style font-weightused to enable/disable bold style Complete list of font properties

font-family 14 p { font-family: Georgia; } h2 { font-family: "Courier New"; } This paragraph uses the first style above. This h2 uses the second style above. Output enclose multi-word font names in quotes

More about font-family 15 p { font-family: Garamond, "Times New Roman", serif; } This paragraph uses the above style. Output can specify multiple fonts from highest to lowest priority generic font names: serif, sans-serif, cursive, fantasy, monospace if the first font is not found on the user's computer, the next is tried generally should specify similar fonts placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

font-size 16 p { font-size: 14pt; } This paragraph uses the style above. Output units: pixels (px) vs. point (pt) vs. m-size (em) 16px, 16pt, 1.16em units: pixels (px) vs. point (pt) vs. m-size (em) ―px specifies a number of pixels on the screen  Pixel is smallest dot on a computer screen ―pt specifies number of point, where a point is 1/72 of an inch onscreen ―em (m-size) is roughly the size of letter ‘m’ where 1 em is equal to the font's current size ―em is much larger than pt which is a bit larger than a px There are a number of pre-defined text values that can be used to designate absolute size of a font: X xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger They are vague font sizes and browsers map them to a unit size, such as 10pt for small Percentage font sizes are relative to the standard font size, e.g.: 90%, 120%

font-size 17 p { font-size: 14pt; } Relative length measurements: – px (pixels – size varies depending on screen resolution) – em (usually the height of a font’s uppercase M) – ex (usually the height of a font’s lowercase x) – Percentages (of the font’s default size) Absolute-length measurements (units that do not vary in size): – in (inches) – cm (centimeters) – mm (millimeters) – pt (points; 1 pt = 1/72 in) – pc (picas; 1 pc = 12 pt)

font-weightfont-weight, font-stylefont-style font-weightfont-weight, font-stylefont-style 18 p { font-weight: bold; font-style: italic; } This paragraph uses the style above. Output either of the above can be set to normal to turn them off (e.g. headings)

font 19 p { font: italic bold 14px “Comic Sans MS”, cursive; } This paragraph uses the style above. Output shortcut for setting all font properties  Don’t have to list a value for each property.  However, the order is important: Font style and weight must be the first (in either order) followed by font size and finally list of font names

Grouping styles 20 p, h1, h2 { color: green; } h2 { background-color: yellow; } Output a style can select multiple elements separated by commas the individual elements can also have their own styles (like h2 above)

CSS comments: /*... */ 21 /* This is a comment. It can span many lines in the CSS file. */ p { color: red; background-color: aqua; } CSS (like HTML) is usually not commented as much as code such as Java the // single-line comment style is NOT supported in CSS the HTML comment style is also NOT supported in CSS

W3C CSS Validator 22 <img src=" alt="Valid CSS!" /> jigsaw.w3.org/css-validator/ checks your CSS to make sure it meets the official CSS specifications more picky than the web browser, which may render malformed CSS correctly Output

CSS properties for text 23 propertydescription text-alignalignment of text within its element text-decorationdecorations such as underlining line-heightline-height, word-spacing, letter-spacing word-spacing letter-spacing gaps between the various portions of the text text-indentindents the first letter of each paragraph Complete list of text properties

text-align text-align can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width) 24 blockquote { text-align: justify; } h2 { text-align: center; } Output The Emperor's Quote [TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.

text-decoration 25 p { text-decoration: underline; } Output This paragraph uses the style above.

text-shadowtext-shadow (CSS3) text-shadowtext-shadow (CSS3) 26 p { font-weight: bold; text-shadow: -2px 5px gray; } Output shadow is specified as an X-offset, a Y-offset, and an optional color

line-heightline-height, word-spacing, letter-spacingword-spacingletter-spacing line-heightline-height, word-spacing, letter-spacingword-spacingletter-spacing 27 p { letter-spacing: o.25; line-height: 1.5em; word-spacing:3em } letter-spacing : Horizontal gap between letters line-height: vertical size of each line word-spacing : horizontal gap between words Their value is a size (px, pt, %, em)

The list-style-type propertylist-style-type The list-style-type propertylist-style-type 28 ol { list-style-type: lower-roman; } Possible values:  none : No marker  disc (default, filled circle), circle (hollow circle), square ( filled square)  decimal (default for an ol ) : 1, 2, 3, etc.  decimal-leading-zero : 01, 02, 03, etc.  lower-roman : i, ii, iii, iv, v, etc.  upper-roman : I, II, III, IV, V, etc.  lower-alpha : a, b, c, d, e, etc.  upper-alpha : A, B, C, D, E, etc.  lower-greek : alpha, beta, gamma, etc.  others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha You use images as bullets by using list-style-image property : list-style-image : url(imageBullet.gif);

CSS properties for backgroundsproperties for backgrounds CSS properties for backgroundsproperties for backgrounds 29 propertydescription background-colorcolor to fill background background-imageimage to place in background background-positionplacement of bg image within element background-repeat whether/how bg image should be repeated background-attachmentwhether bg image scrolls with page background shorthand to set all background properties CSS can control the backgrounds of block-level elements by adding colors and images

background-image 30 body { background-image: url("images/draft.jpg"); } background image/color fills the element's content area Output CSS Property background-image specifies the URL of the image Use the format url( fileLocation )

background-repeatbackground-repeat: controls the tiling of the background image background-repeatbackground-repeat: controls the tiling of the background image 31 body { background-image: url("images/draft.jpg"); background-repeat: repeat-x; } can be repeat (default), repeat-x, repeat-y, or no- repeat Output CSS

background-positionbackground-position: places the image on the page background-positionbackground-position: places the image on the page 32 body { background-image: url("images/draft.jpg"); background-repeat: no-repeat; background-position: 370px 20px; } value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.  You can position by specifying horizontal then vertical distances from the top- left corner of the screen value can be negative to shift left/up by a given amount Output CSS

Body styles 33 body { font-size: 16px; } to apply a style to the entire body of your page, write a selector for the body element saves you from manually applying a style to each element

34 Styles that conflict body { color: green; } p, h1, h2 { color: blue; font-style: italic; } h2 { color: red; background-color: yellow; } when two styles set conflicting values for the same property, the latter style takes precedence later we will learn about more specific styles that can override more general styles Output