Download presentation
Presentation is loading. Please wait.
1
Cascading style sheets - CSS
Separate the content from the style! More flexible (changing one style definition in the style sheet will change the entire site) Consistent design Less work for larger sites (more overhead) CSS1-’96 supported by IE 4, Netscape 4 CSS2-’98 supported by IE 5, Netscape 6
2
Cascading Style Sheets (CSS)
Like HTML, style sheets must use a common language and follow common rules. This language is known as Cascading Style Sheets, or more simply, CSS. CSS has been developed by the WWW Consortium ( the same organization that develops standards for HTML. CSS is designed to augment HTML, not replace it. CSS is a whole new way of formatting Web pages. CSS provides several tools not available with standard HTML.
3
Type of style rules Inline style: Embedded or global style:
adds styles to each individual tag within the HTML file (single section) Embedded or global style: a style is applied to the entire HTML file. The style declarations are in the header (web page) Linked or external style: links the HTML file to a text file containing the style declaration. Gives a consistent look across pages (web site) INLINE: almost defeats the purpose!
4
Components of a CSS Style
The three parts to a CSS style: selector, property, and value. The selector is the HTML tag you are formatting (e.g. H1), The property is the attribute you want to change (e.g. font, color). Each property is set to a value. Every property (i.e. attribute) and its value are separated by a colon (:). Recall that we previously assigned attribute/value pairs by using the equals sign. However this syntax is not correct (does not work) in CSS. If you include multiple groups of property/value pairs, each group must be separated by semicolons (;).
5
Property / Value Pairs Example of property / value pairs separated by semicolons: font-family:Arial; font-style:italic; font-weight:bold; color : blue Compare how you set a style with HTML syntax v.s. CSS syntax: HTML syntax: color=“blue” deprecated CSS syntax: style=“color:blue”
6
Inline style (in body) <tag style=“attribute1:value1; attribute2:value2 …”> <body> <h3 style=“font-family:Arial, Times; font-style:italic; color:green”> This is H3, Arial, italic and green </h3> <h3>This is simply H3</h3> </body> This is H3, Arial, italic and green This is simply H3
7
Inline Style Examples The style <body style="color:blue"> body is the selector, color is the property, and blue is the value. In the style <body style="background-color:silver"> body is the selector, background-color is the property, and silver is the value. These tags have their usual </body> closing tags.
8
Inline Style Examples In the style <p style="font-family:Arial; font-weight:bold"> p is the selector, font-family and font-weight are the properties, and Arial and bold are the values. In the style <p style="font-size:300%; color:red"> p is the selector, font-size and color are the properties, and 300% and red are the values. These tags have their usual </p> closing tags.
9
span, div, and p Tags The previous styles show you how to change the default style of a tag. What if you want to apply a style to just a section of text (one word, a few words, a sentence, a paragraph)? You can use the span or div or p tags, and then apply a style(s): <span style="font-style:italic"> Hey! </span> <div style="color:blue"> Good night… </div>
10
Differences between span, div, p
span tags are usually used to format a small amount of text, such as a single word or sentence. p tags are typically used to format individual paragraphs div tags are usually used to format even largers segments of a web page, such as a table of contents. Since div tags specify a division or section of the web page, the tag includes additional formatting, namely, a line break before and after the <div> and </div>. (This is similar to the additional line breaks automatically placed after <h> tags).
11
Example of the Span tag <body> This sentence has one word in <span style="color:#0000FF;"> blue </span> and the rest in standard text color. <span style="color:#00DD45;">This sentence is in green.</span> <p style="font-style:italic; font-size:200%">Note how unlike tags such as ‘h’ ‘p’ or ‘div’, the ‘span’ tag doesn’t apply extra formatting such as new lines. </p> </body>
12
Embedded style sheet (in header)
<style> selector {attribute1:value1; attribute2:value2 …} </style> <head> <style> h3 {font-family:Arial; font-style:italic; color:green} </style> </head><body> <h3>This is H3, Arial, italic and green</h3> <h3>And so is this H3</h3> </body> This is H3, Arial, italic and green And so is this
13
External style sheet (in header)
Create a text file containing all style declarations: File should have extension “.css” such as: mystyle.css Link, or import that file to the HTML file using special tags in the header. <link href=“URL” rel=“stylesheet” type=“text/css”> mystyle.css OR The LINK tag’s attributes tell the browser to find an external style sheet, that the style sheet is a CSS file, and that the name of that file is mystyle.css ( DON’T FORGET THE RELATIVE PATH!) USER DEFINED STYLES: Tools>Internet Options>Accessibility>Check user style sheet, and provide name @import or multiple LINK tags allow you to use more than one style sheet in the same document <style> @import url(“mystyle.css”) </style>
14
Using CSS Style Types If you need to format a single section in a Web page, you’d probably use an inline style. An embedded style is applied to various sections within a Web page Create styles that apply to an entire Web site by creating a text file containing style declarations. Most style sheets have the extension “.css”, though this is not a requirement. Within a style sheet, you don’t need <style> tags, just the style declarations.
15
External Style Examples
16
Setting fonts and attributes
SAFE Font-families: Times New Roman, text Arial, Helvetica, headings Courier New text
17
Using Font Families To choose a font-family, use
font-family: font1, font2,…. Examples: body{font-family: Times New Roman, serif} p{font-family: Arial, Helvetica, San-serif} A browser will display the body text using the first font available in the list above. Helpful to use a generic family name as the last option.
18
Font-size style definition font-size: size
h1{font-family: Arial, sans-serif; font-size: 28pt} Size can be expressed as Absolute units: cm, mm, pt, in. Relative units: px, em, ex. A percentage (of font-size of parental element) Keywords (absolute): xx-small, x-small,small, medium, large, x-large, xx-large Keywords (relative): smaller, larger (relative to the font-size of the parental element)
19
Font styles and weights
font-style: style_type style_type normal, italic or oblique font-weight: weight weight can be a value from 100(lightest) to 900 (boldest) in intervals of 100. normal or bold lighter or bolder (relative to the parental element)
20
Aligning Test text-align:alignment Examples:
Alignment left, center, right or justify (like in MS words) Examples: h1,h2,h3,h4,h5,h6{ font-family: Arial,sans-serif; text-align:center; font-weight:700; } p{font-family: Times new roman,serif; text-align:justify;}
21
Combining styles A linked style sheet can help you maintain a consistent look and feel throughout your Web site If you want a certain page to have additional styles, you can include styles in the head of that particular HTML document If you want just one section of a page to look different, you might use the inline styles with a <div> or <span> tag.
22
Combining styles tag must be the first element within the STYLE tag Embedded style declarations should come after commands If two style sheets define competing style, the innermost style sheet wins Style precedence: inline > global > external > browser
23
CSS control of Lists Style declarations for list elements
(applicable to <ul>, <ol> and <li> tags). list-style-type : type disc, circle, square, none (<ol> or <ul>) decimal (“decimal-leading-zero” is not a valid value) lower-roman, upper-roman lower-alpha, upper-alpha In IE, specify an image for use as a label (<ol> or <ul>) list-style-image: url(image) warnings: does not work in Netscape 4.0 nested lists will automatically inherit this image unless you set the list-style-image attribute to “none” Change the position of the labels (semi works in IE) list-style-position: inside (“outside” is the default)
24
Defining colors in CSS Color names (names supported by HTML are also supported by CSS): body {color: teal} Hexadecimal form: body {color: #008080} RGB color values: body {color: rgb(0,128,128)} RGB color percentages: body {color: rgb(0%,50%,50%)}
25
Colors on the Web Colors on the web are represented by 3 numbers, called an RGB triplet based on their Red, Green, and Blue components. So you can “mix” any color you like. Each component has 8 bits, so there are 24 bits in all. The intensity of each component is expressed as a value ranging between (0-255) in decimal base. RED = (255, 0, 0)
26
Background color Background colors can be applied to almost any element in a Web page not just the page itself. H1 {background-color: rgb(204,102,255)} This is an H1 headers with a purple background
27
More background styles
Background-image : url (file.jpg) Background-attachment: scroll | fixed (to allow the image to scroll with the element or not) Background-repeat: repeat | repeat_x | repeat_y | no-repeat (controls how the image is tiled)
29
Tables and CSS Other Table Attributes? Examples:
Recall that the Height and Width attribute for <table> tag have been depricated. We can use the “style” attribute for CSS instead. Examples: <table style="width:50%; height:20%"> <table style="width:100%"> <table style="width:500px; height:700px"> <table style="width:50%; height:200px"> Similarly for table cells: <td style="width:value; height:value"> Other Table Attributes? Examples from W3Schools
30
Using class and ID as selectors
An HTML tag can be a selector but sometimes you want to be more specific. For example you have a huge table and you want to format the rows in 4 different ways. Using TR as a selector will allow you only one style definition Instead you can define a class and then attach it to any HTML tag, without limiting the tag itself to a particular style
31
Using classes as selectors
Define a class (in the header) by giving it a name preceded by a period adding the standard style definitions inside {} <style type=“txt/css”> .bright {font-weight:bold; color:red} </style> Apply the class to any HTML tag <strong class=“bright”> text </strong> <h1 class=“bright”> text </h1>
32
More on classes Define a class for a specific tag by
Attaching to the tag selector a dot and the class name Adding the standard style definition within {} This particular class can only be applied to the tag used in its definition <style type=“txt/css”> h1.bright {font-weight:bold; color:red} </style> “bright” can be used only for h1
33
Hyperlink pseudo-class
a: link {style for never visited links} a: visited {style for visited links} a: active {style for link that is currently being clicked} a: hover {style when the mouse cursor is hovering over the link} – rollover effect. a:hover {color=red; text-transform:uppercase; font-weight=bold}
34
The <div> tag This HTML tag does not format content
It creates a container for block-level elements You can assign a CLASS (or ID) to the container <ul> <div class=“bright”> <li> First item <li> Second item </div> <li>Third element </ul> The <span> tag is used to mark inline elements like letters, words or phrases
35
Block-level element boxes
HTML tags that can be treated as block-level elements: <h1>-<h6>, <p>, <hr> <blockquote> <ul>,<ol>, <li> <div> (Use this as a block container) <body> <img> You can move them around the page, apply borders and background colors to them etc.
36
Formatting block-level elements
padding margin border The size of margins, border and padding are set with the margin, padding, and border properties respectively The padding area uses the same background as the element itself Margins are always transparent
37
Formatting block-level elements
CSS Box Model Examples
Similar presentations
