1 / 34

Basics CSS

Basics CSS. Chapter 3. http://jigsaw.w3.org/css-validator/. The bad way to produce styles. Desired output. HTML without CSS. <p> <font face="Arial"> Welcome to Greasy Joe's . </font> You will <b> never </b> , < i > ever </ i > , <u> EVER </u> beat

lucy-fulton
Download Presentation

Basics CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basics CSS Chapter 3 http://jigsaw.w3.org/css-validator/

  2. The bad way to produce styles • Desired output HTML without CSS <p> <font face="Arial">Welcome to Greasy Joe's.</font> You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat <font size="+4" color="red">OUR</font>prices! </p> • 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.

  3. 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 .cssfile • Embedded inlinewith an individual element • Embedded in the page’s head section • Can be placed in separate .CSS file (preferred) • Inline style • declare a style for an individual element by using the styleattribute 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

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

  5. Embedded Style Sheets • Styles are placed in a styleelement • styleelement 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 (;) • styleelement attribute typespecifies the MIME type (the specific encoding format) of the style sheet. Style sheets use text/css

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

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

  8. External Style sheets: rules placed into separate .css file • 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 <head> ... <link href="style.css" type="text/css" rel="stylesheet" /> ... </head>

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

  10. External Style sheets: resume.html <html> <head> <title>Marty Stepp's Resume</title> <link href="resume.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Marty Stepp's Resume</h1> <p> <imgsrc="marty.jpg" alt="the gangsta" /> </p> <h2>Objective</h2> <p>To get out of teaching and become a waiter! I can't take it any more. Please hire me! I am desperate.</p> <p>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 pleaseplease.</p> <h2>Education</h2> <ul> <li>Arizona, 1999-2001 (BS)</li> <li>Arizona, 2001-2003 (MS)</li> </ul> <p> <a href="http://validator.w3.org/check/referer"> <imgsrc="http://www.w3.org/Icons/valid-xhtml11" alt="Validate" /> </a> </p> </body> </html>

  11. CSS properties for colors CSS p{ color: red; background-color: yellow; } Output This paragraph uses the style above.

  12. Specifying colors CSS p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; } Output • color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow • 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)

  13. CSS properties for fonts

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

  15. More about font-family p { font-family: Garamond, "Times New Roman", serif; } Output This paragraph uses the above style. • 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

  16. font-size p { font-size: 14pt; } Output This paragraph uses the style above. • units: pixels (px) vs. point (pt) vs. m-size (em)16px, 16pt, 1.16em • pxspecifies 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: • Xxx-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 • Percentagefont sizesare relative to the standard font size, e.g.: 90%, 120%

  17. font-size 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)

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

  19. font p { font: italic bold 14px “Comic Sans MS”, cursive; } Output This paragraph uses the style above. • 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

  20. Grouping styles 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)

  21. CSS comments: /* ... */ /* 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

  22. W3C CSS Validator <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <imgsrc="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a> </p> Output • 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

  23. CSS properties for text

  24. text-align 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-align can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

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

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

  27. line-height, word-spacing, letter-spacing 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)

  28. The list-style-type property 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);

  29. CSS properties for backgrounds • CSS can control the backgrounds of block-level elements by adding colors and images

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

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

  32. background-position: places the image on the page CSS body { background-image: url("images/draft.jpg"); background-repeat: no-repeat; background-position: 370px 20px; } Output • 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

  33. Body styles 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; } Output • 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

More Related