lecture-03-CSS.pdf

Introducing Cascading Style Sheets  Cascading Style Sheets(CSS) a style sheet language used on the Web There are many style sheet languages But CSS is by far the most common on the web CSS specifications are maintained by the World Wide Web Consortium (W3C) Several versi...

Introducing Cascading Style Sheets  Cascading Style Sheets(CSS) a style sheet language used on the Web There are many style sheet languages But CSS is by far the most common on the web CSS specifications are maintained by the World Wide Web Consortium (W3C) Several versions of CSS exist with varying levels of browser support: CSS1, CSS2, CSS 2.1, and CSS3 Cont. CSS1 introduced in 1996, and made styles for the following document features: Fonts set font size, type, and other properties Text alignment, underlining, italics, etc. Color specifying background and foreground colors Backgrounds: set background image for elements Block-level Elements setting margins and borders of block level elements Positioning placing elements at specific locations on the page Visual Formatting clipping and hiding element content Media Types Interfaces control appearance of scroll bars and mouse cursors Applying a Style Sheet There are three ways to apply a style to an HTML or XHTML document: 1) Inline Styles 2) Embedded Style Sheet 3) External Style Sheet Each approach has advantages and disadvantages, which we will explore Inline Styles They are easy to use and interpret because they are applied directly to the elements they affect Syntax: where style1, style2, style3, and so forth, are the names of the style properties, and value1, value2, value3, and so on, are the values associated with each property Example: center an h1 tag and display it in a red font: Sunny Acres Advantages of Inline Styles: Easy to understand and interpret Since they are applied directly to elements they affect Disadvantages of Inline Styles: Hard to update or change the styles if we have too many pages  Embedded Styles One way to do this is to collect all styles together and place them in the head section Syntax: style declarations Each style declaration has the syntax: selector {style1: value1; style2: value2: … } where selector identifies an element (or elements) within the document and the ‘style: value’ is a pairing of a style and its respective value Embedded Styles Example: Make all h1 headings, in a document, as centered red text Embed the following in the document header: h1 {text-align: center; color: red} h3 {text-align: center; color: green} External Style Sheet Place all of your styles in an external file File-name.css What we This file simply contains all style declarations Looks just like a list of embedded styles use Except that the style declarations are not enclosed within the opening and closing tags Then, you simply link to this file from any of the pages on your website This allows the same styles to be applied all pages that link to the style sheet You can now change the styles for an entire web site by modifying one style sheet Cont. Linking to an External Style Sheet From a web page, you can link to an external style sheet by using the link element Syntax: where url is the URL of the external style sheet Link elements for style sheets must be placed in the head section of the web page document Note on URL: Interpreted the same way as URLs for linked web pages With respect to file locations (in folders) If no folder is listed, the css file is assumed to be in same folder  Cascading Order Which style has precedence? Example: Consider a web site, whose pages link to an external stylesheet that sets all h1 elements in a bold, green font. At the same time, the author uses some inline fonts that set some of the h1 tags to a bold, purple font that is centered. Additionally, browsers, by default, render h1 elements in a regular black font that is not centered. So, you effectively have three styles for one h1 element. Which style is used? Which takes precedence? Style Precedence The General Rule: In the case of conflict, the more specific style has precedence over the more general style External style sheets 59 These have precedence over browser’s built-in styles Embedded style sheets in head These have precedence over external style sheets Inline styles applied to specific elements in some element These have precedence over embedded style sheets User styles Users can specify their own styles (ex: for accessibility). These styles take precedence over everything else Cont. o  Conflicting styles on same level: If two styles, on the same level, have a conflict, the one that was declared last does has the same precedence. Example: h1 {color: orange; text-align: center} h1 {color: blue} How are h1 headings displayed with this style? Centered, blue text text is blue because blue is the last color declaration, but it is centered because there is only one text-align attribute  Concept of Inheritance When there are no conflicts, styles are passed down from the more general levels to the more specific ones This is called Style Inheritance So, if a style is not specified for an element, that element will take on (inherit) the style of its parent element Example: If an external style sheet sets h1 headings to display as blue, this color is assumed for ALL h1 headings unless a different color, in a more specific style level, is specified  Cont. To override style inheritance, you simply specify an alternate style for one of the descendant elements of the parent Example: body {color: blue} p {color: red} Here, the text color of all elements will be blue However, paragraphs, and any elements inside paragraphs, will display in a red font Any changes to a style sheet automatically pass down to all levels Applying a Style to a Specific ID What if you want to apply a style to a specific id value meaning, to an “id” that you specified in the code Example: Given the following h2 element A Fun Family Farm Now, you can make the following declaration in the HTML code, as an inline style or embedded css, or within an external style sheet: #main {color: red} So all elements, marked as “main”, will display as red text Just “plugging” a concept: Developers can couple this, with the use of and elements to make fully customized web pages  HTML identifies a color in one of two ways: By the color value By the color name To have more control and more choices, specify colors using color values A color value is a numerical expression that precisely describes a color Any color can be thought of as a combination of three primary colors: red, green, and blue (RGB) Cyan, magenta, yellow, and black (known as CMYK) can be formed by a combination of the aforementioned three colors By varying the intensity of each primary color, you can create almost any color and any shade of color  Software programs, such as your Web browser, define color mathematically The intensity of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity) In this way, 2553, or more than 16.7 million, distinct colors can be defined CSS represents these intensities by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue components Examples: Rgb (255,255,0) Yellow Rgb (0,0,0) black Hexadecimal coloring  Cont. Style to define the background color: background-color: color where color is either a color value or a color name Example: h2, h3 headings with white text and a color background h2, h3 {color: white; background-color: rgb(0, 154, 0)} Working with Fonts and Text Styles By default, browsers display text in a single font usually Times New Roman You can specify a different font using the style font-family: fonts Where fonts is a comma-separated list of fonts that the browser can use in any element Font names can be of two types: Specific fonts These fonts are actually installed on the user’s computer Examples are Times New Roman, Arial, Garamond, etc. Generic fonts: a name for a grouping of fonts that share similar appearance Browsers support five generic font groups as follows: five generic font groups if the browser doesn’t find specific fonts on the system, the generic fonts will be used genit ysiae sit farton  Cont. Example: font-family: Arial, Helvetica, ‘Trebuchet MS’, sans-serif This style tells the browser to first look for Arial; if Arial is not available, try Helvetica and then Trebuchet MS. Not that font names containing one or more spaces must be enclosed in single or double quotation marks Finally, if none of those fonts are found, use a generic sans-serif font  Font Size the font size of text within an element is: font-size: length where length is a length of measure Lengths can be specified in four different ways: 1. with a unit of measurement 15PX 2. with a keyword description 3. as a percentage of the size of the containing element 4. With a keyword, expressing the size relative to the size of the containing element zem Font Size Specifying Lengths using measurement units I You can use Absolute units p These units are FIXED in size, regardless of the device rendering the Web page Absolute units specify a font size using one of five standard units of measurement: Millimeters (mm) Centimeters (cm) Inches (in) Points (pt) What is a point? There are 72 pts in an inch. Picas (pc) There are 6 picas in an inch (and 12 points in a pica) Iiii inch  Cont. Example: Say you wanted your text to be ½ inch in size Any of the following styles would work: font-size: 0.5in font-size: 36pt font-size: 3pc When to use absolute units? If you know the exact physical specs of the output device (monitor) and want to fix the text size accordingly. That rarely happens, as Web pages can be displayed on a variety of devices  You can also use Relative units Relative units are expressed relative to the size of other objects on the Web page Many developers prefer relative units, as it allows the page to be scalable text can be rendered the same way no matter what font size is used by the browser Common Relative units: em unit Percentages Relative keywords Example em unit expresses the size relative to the font size of the parent element Example: for an h1 heading, the parent element would be the page’s body So the style, h1 {font-size: 2em} sets the font size of h1 headings to twice the font size of the body text So if the browser is configured to display body text in 12 pt font, the h1 heading would be displayed in 24 pt font Percentages are based on the font size of the parent element same as em Keywords You can use seven keywords to express font sizes xx-small, x-small, small, medium, large, x-large, or xx-large Spacing and Indentation Kerning is the amount of space between characters letter-spacing: value Tracking is the amount of space between words and phrases word-spacing: value Leading is the space between lines of text line-height: length Indentation: text-indent: value Applying Font Features font-style: type where type is one of normal, italic, or oblique font-weight: weight where weight is one of normal, bold, bolder, light, lighter, or a font weight value text-decoration: type where type is of none (for no decoration), underline, overline, line-through, or blink You can apply several decorative features together Example: text-decoration: underline overline  text-transform: type 4401251 where type is capitalize, uppercase, lowercase, or none (to make no changes to the case) So to make the text fully capitalized: text-transform: capitalize font-variant: type where type is normal (the default) or small caps (small capital letters)  You can combine most of them into a single declaration, using the style font: font-style font-variant font-weight font-size/line-height font-family Note: properties must be inserted in the ORDER shown