Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheet (CSS)
2
Cascading Style Sheets (CSS)
a style defines the appearance of a document element. E.g., font size, font color etc… a style sheet: collection of styles for a Web page or Website style sheets use common language and syntax main style sheet standard: Cascading Style Sheets (CSS)
3
CSS history developed by WWW Consortium ( the same organization that develops standards for HTML designed to augment HTML, not replace it a whole new way of formatting Web pages provides several tools not available with standard HTML different versions CSS1 released in 1996 (fonts, text, color, background) CSS2 released in 1998 (positioning, visual formatting) CSS3, latest standard being developed
4
Benefits of style sheets
a design tool makes website design more flexible easier to maintain and modify more aesthetically interesting consistent look
6
Applying a Style Sheet Three ways to apply a style to an HTML document: Inline Styles Embedded Style Sheet External Style Sheet
7
Style types Inline styles
styles are added to each tag within the HTML file style only affects that particular tag
8
Using inline styles format a single section, better use inline style
syntax <tag style=“style declarations”> tag is the name of an HTML element (h1, h2, p, etc) style declarations the styles defined for the particular tag must be enclosed within double quotation marks use semi-colon separate multiple attributes <tag style=“attribute1:value1; attribute:value2”> e.g. <h1 style="text-align: center; color: red">
9
But what if there are same tags appearing multiple times in the webpage and you want to format all of them uniformly
10
Style types (contd.) Inline styles Embedded or global styles
styles are added to each tag within the HTML file style only affects that particular tag Embedded or global styles applied to an entire HTML file allowing the Web designer to modify the appearance of any tag in the document
11
Creating an embedded style
embedded style, a style applied to various sections within a Web page use <style> tag within the <head> … </head> section within <style> tag, enclose style declarations syntax <head> <style type=“text/css”> style declarations </style> </head>
12
Embedded Style example syntax for style declaration: selector
selector{attribute1:value1; attribute2:value2; ...} collection of attributes and values selector identifies an element in your document, e.g., a heading identifies attributes and values within the braces for that element example <style type="text/css"> h1 {text-align: center; color: red} </style>
13
Embedded Style (contd.)
Simple Practice exercise: Using Embedded styles, convert “course description” and “reference texts” in main.html to blue
14
Grouping selectors What if there are many tags or blocks which follows the same style throughout the page? apply the same declaration to a group of selectors by including all of the selector names separated by commas <style type=“text/css”> h1, h2, h3, h4, h5, h6 {text-align: center; color: red} </style>
15
Now the next level! Just the way we changed the styles uniformly in a single webpage, how about applying that across multiple webpages, i.e., your website We now need an external style sheet
16
Style types (contd.) Inline styles Embedded or global styles
styles are added to each tag within the HTML file style only affects that particular tag Embedded or global styles applied to an entire HTML file allowing the Web designer to modify the appearance of any tag in the document Linked or external style sheets placed in an external file, linked with Web pages allowing Web designer to modify the appearance of tags in several documents across the website
17
Creating an external style sheet
Crate a new text file Save it using the extension “.css”, Place your styles here Within a style sheet, <style> tag is NOT needed, only need style declarations
18
Creating an external style sheet
Create a text file containing style declarations /* Author: author name */ h1, h2, h3, h4, h5, h6 {text-align: center; color: red} Name the file: mystylesheet.css Remember: Only external stylesheet creation not sufficient Need to link the stylesheet and the html pages where you need the styles
19
Linking to style sheets with <link>
Example: link to a style sheet named “mystylesheet.css,” <link rel="stylesheet" href="mystylesheet.css" type="text/css" /> Placement within <head> … </head> of the webpage where you need the styles
20
Style Conflict What is the result?
Apply external, embedded and inline all three types of styling with h1 tag External: Text-align: center and color: red Embedded: Text-align: center and color: blue Inline: Text-align: center and color: green What is the result?
21
Style precedence in case of styles conflict, precedence is determined in the following order: an inline style overrides any embedded style or external style sheet an embedded style overrides an external style sheet an external style sheet overrides the internal style rules set by the Web browser
22
Understanding Cascading Order
23
Style Inheritance If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance body {color: green} p {color: red} In the above example, the body element is the parent element
24
Practice exercise All the elements in my unordered (bulleted) list must be red throughout the website All the elements in my ordered (numbered) list must be blue throughout the website
25
CSS Part 2
26
What we will cover today…
Managing Font-size Letter and word spacing Text appearance and attributes Hyperlinks appearance and attributes
27
Managing font size in CSS, use font-size attribute to manage font sizes body {font-size: some value} font sizes can be expressed in 4 ways as a unit of length Absolute unit Relative unit as a descriptive keywords with a keyword expressing the size relative to the font size of parent element as a percentage of the parent element
28
1. Unit of length: Absolute units
use unit of length, absolute units or relative units absolute units define the font size based on one of the following standard units of measurement: mm (millimeter), cm (centimeter), in (inch), pt (point; 1pt=1/72in) pc (pica; 1pc=12pt)
29
1. Unit of length: Relative units
relative unit expresses the font size relative to a size of a standard character em unit is equal to the width of capital letter “M” in browser’s default font size ex unit is equal to the height of a small “x” in default font size
30
1. Unit of length: Pixels a pixel is the smallest element recognized by the monitor text that is 10 pixels high may be perfectly readable at a low-resolution (e.g., 640 x 480) monitor, but it can become unreadable at high-resolution (e.g., 1024 x 768) monitor
31
2. Descriptive keywords seven descriptive keywords for font size
xx-small x-small small medium large x-large xx-large Example body {font-size: medium}
32
3. Keywords: smaller, larger
Size relative to parent element using keywords “larger” and “smaller,” makes the font one size larger or smaller than the size of parent element example: to make <p> paragraph text one size larger than the body text: body {font-size: medium} p {font-size: larger}
33
4. Font size as percentage of parent tag
The font size of bold content (defined by <b> tag) is 150% of the size of surronding text (where the font size is defined by <body> tag)
34
Text Appearance and Styling
35
Specifying letter, word spacing
set the space between individual letters i n d i v i d u a l l e t t e r s letter-spacing attribute letter-spacing: size change the spacing between individual words individual words word-spacing attribute word-spacing: size size can be any number expressed in the same measuring units used to describe font size (inches, millimeters, centimeters, em units, etc.)
36
Special text attributes
CSS provides three attributes for special text effects: text-decoration text-transform font-variant
37
text-decoration attribute
attribute name: text-decoration values none (basically default; no change) underline overline line-through examples
38
text-transform attribute
attribute name: text-transform attribute value: capitalize capitalize the first letter of each word in a paragraph
39
text-transform attribute
attribute name: text-transform attribute value: uppercase display the text in all capital letters
40
text-transform attribute
attribute name: text-transform attribute value: lowercase display the text in all lowercase letters
41
text-transform attribute, example
42
font-variant attribute
font-variant attribute create small caps small caps are capital letters that are the same size as lowercase letters syntax font-variant: small-caps
43
font-variant attribute, example
44
Contextual Selector
45
Working with style inheritance
Web pages invariably have elements (e.g., tags) placed within other elements sample tree structure of Web elements
46
Parent and descendant elements
an element that lies within another element is called a descendant or descendant element e.g., in previous slide, <b> tag is a descendant of <p> tag an element that contains another element is called the parent or parent element. e.g., <body> tag is the parent of all other tags used to format the Web contents using the principle of inheritance, styles defined for a parent tag are transferred to its descendants tags
47
Contextual selectors use tree structure to better control styles
apply a style only to direct descendant of a parent element, use syntax: e1 e2 e1 and e2 are the names of HTML elements (i.e. tags) and e2 is directly below e1 in the tree structure of elements example: li b {color:blue} only changes the color of the boldface text residing within a <li> tag to blue not all browsers support contextual selectors
48
Hyperlink appearance and attributes
Hyperlink styling What is the tag for hyperlinks? Introduce the tag for hyperlink as a selector in CSS All the attributes discussed so far would work when applied in CSS
49
Hyperlink appearance change
By default, hyperlinks are blue and have underline Change them to red hyperlinks and no underline (default for my website) Change them to red hyperlinks, small caps with lines both above and below the links
50
Hyperlink Special Selector
a is the general selector Link: used for un-visited link a:link Visited: used for visited link. a:visited Active: used for the link when it is clicked. a:active Hover: used for the link when the mouse hovers over it a:hover
51
Practice exercise Write a CSS file with all the Styles as defined below for the hyperlinks: The hyperlinks must be color green with underline text-decoration. While hovering over the hyperlink with mouse, the hyperlinks must turn UPPERCASE TEXT, color blue and without any underline. The visited hyperlinks must turn into strike through line.
Similar presentations
