cascading style sheets - css ● separate the content from the style! –more flexible (changing one...
Post on 22-Dec-2015
224 Views
Preview:
TRANSCRIPT
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
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 (www.w3c.org), 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.
Type of style rules
● Inline 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)
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 (;).
4
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”
5
Inline style (in body)
<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>
<tag style=“attribute1:value1; attribute2:value2 …”>
This is H3, Arial, italic and green
This is simply H3
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.
7
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.
8
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>
9
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).
10
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. <spanstyle="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>
11
Embedded style sheet (in header)
<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>
<style> selector {attribute1:value1; attribute2:value2 …}</style>
This is H3, Arial, italic and green
And so is this
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”>
<style>@import
url(“mystyle.css”)</style>
mystyle.css @import or multiple
LINK tags allow you to use more than one style sheet in the same document
OR
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.
External Style Examples
● http://www.w3schools.com/css/showit.asp?filename=ex1
● http://www.w3schools.com/css/showit.asp?filename=ex2
Setting fonts and attributes
● SAFE Font-families:
Times New Roman, text
Arial, Helvetica, headings
Courier New text
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.
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)
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)
Aligning Test
● text-align:alignment– 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;}
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.
Combining styles
● The @import tag must be the first element within the STYLE tag
● Embedded style declarations should come after the @import commands
● If two style sheets define competing style, the innermost style sheet wins
Style precedence:
inline > global > external > browser
Style declarations for list elements (applicable to <ul>, <ol> and <li> tags).
list-style-type : typedisc, circle, square, none (<ol> or <ul>)decimal (“decimal-leading-zero” is not a valid value)lower-roman, upper-romanlower-alpha, upper-alpha
In IE, specify an image for use as a label (<ol> or <ul>) list-style-image: url(image)
warnings: 1. does not work in Netscape 4.02. 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)
CSS control of Lists
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%)}
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)
25
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
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)
Tables and CSS
● 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
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
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>
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
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}
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
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.
Formatting block-level elements
● 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
padding
border
margin
Block-level element
Formatting block-level elements
CSS Box Model Examples
top related