Cascading Style Sheets
88
Cascading Style Sheets http://www.w3.org/Style/CSS/
-
Upload
blaze-lindsey -
Category
Documents
-
view
221 -
download
2
Transcript of Cascading Style Sheets
Midterm 1
Avg = 83%,
Midterm exam
0
50
100
150
200
250
0 10 20 30 40
Series1
Matching• 1-J• 2-E• 3-F• 4-G• 5-H• 6-I• 7-C• 8-D• 9-A• 10-B
Multiple choices• 1. C• 2. b• 3. a• 4. b• 5. d• 6. c• 7. c• 8.c• 9. c• 10. *
SQL• 3.1:
• Team: TeamID (PK) ConferenceID(FK)
• Conference: ConferenceID (PK)
• One to many relationship
• Child:Team
• Parent:Conference
SQL• 3.2
Select teamID, teamName, RPI, ranking
From Team
Where conferenceID = 1;
SQL• 3.3
Select Team.TeamName, Team.RPI, Conference.ConferenceName
From Conference inner join team on Conference.ConferenceID = Team.TeamID
Where ranking <= 10;
• 3.4
Select Team.TeamName, Team.RPI, Team.Ranking
From Conference inner join team on Conference.ConferenceID = Team.TeamID
Where Conference.ConferenceName=“Big Ten”;
• 3.5
• TotalTeamConferenceID
2 1
1 2
2 3
1 5
3.6
3.7
3.8
Example of HTML<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>My first Web site</title> </head><body><!-- Site navigation menu --><ul> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a></ul>
<!-- Main content --><h1>My first styled page</h1>
<p>Welcome to my first page!
</body></html>
Result
Adding color<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN"><html><head> <title>My first web page</title>
<style type="text/css"> body { color: purple; background-color: #d8da3d } </style></head>……<body>
Result
Style sheet• Style sheets in CSS are made up of rules.
Each rule has three parts: • the selector (in the example: “body”), which
tells the browser which part of the document is affected by the rule;
• the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set;
• and the value ('purple' and '#d8da3d'), which gives the value for the style property.
Look at the example again
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
SELECTOR
property
value
Style sheets• Creating a style• Applying styles in HTML files
Style sheets• Creating a style• Applying styles in HTML files
Creating a Style rule• Step 1: Determine Selector (which identifies the
elements you wish to format). Put { next to itExample: h1{• Step 2: Determine property: value in which
property is the name of CSS property that applies this format and value is one of valid options for that property
Example: color:red• Step 3: Combine the results of step 1 and step 2
and put } at the end.If you have more than one property: value pairs, use
semicolon (;) to separate them.
Example: h1{color:red}
Creating a selector• The type or name of elements
For instance: body, paragraph
• The context in which the element is foundFor instance: paragraphs in the middle of the web page
• The class or id of an elementFor instance: the name of a paragraph in a web page.
Examples
• For the type or name of elements
h2 {color:red}
h1 {color: purple}
• The context in which the element is found
div#gaudi p {color:red}• The class or id of an element
div#gaudi {color:red}
DIV tag• The <div> tag: defines logical divisions in a Web
page. • determines the alignment of that section of the page.
• defines the style of whole sections of HTML.
• names certain sections of your documents so that you can affect them with style sheets or Dynamic HTML
• Syntax:
<div [align=“<left><center><right><justify>”]
[id =name]>
<!– this is a body of the div tag </div>
Example for DIV tag
<div id="gaudi" align="center">
<p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s incredible architecture. </p>
<p>Barcelona <a href="http://www.gaudi2002.bcn.es/english/flash/home/GO.htm">celebrates</a> the 150th anniversary of Gaud’'s birth in 2002.</p>
</div>
Example for DIV tagMany tourists are drawn to Barcelona to see Antoni Gaud’'s incredible
architecture.
Barcelona celebrates the 150th anniversary of Gaud’'s birth in 2002.
Style sheets• Creating a style• Applying styles in HTML files
1. Putting style sheet in HTML files2. Putting style sheet in a separate file
Putting style sheet in HTML files
<style type="text/css">
<!– This is where you put Style sheet information
</style>
Example<html> <head>
<title>Antoni Gaud’ - Introduction</title><style>
h1 {color: purple}</style></head>
<body><h1>Antoni Gaud’</h1>
<div id="gaudi" align="justify"><p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s incredible architecture. </p></div>
</body></html>
Style sheet in HTML file
Style affects this h1 tag
Result
Putting the style sheet in a separate file • Step 1: Open a new text file
• Step 2: Cut and paste the content inside <style> </style> tags (except the tag)
• Step 3: Save in the same folder with HTML file with the extension *.css (e.g mystyle.css)
• Step 4:Replace <style> and </style> tag with:
<link rel="stylesheet“ href="mystyle.css">
Example<html> <head>
<title>Antoni Gaud’ - Introduction</title><link rel="stylesheet" type="text/css" media="screen" href="descendant.css" />
</head><body>
<h1>Antoni Gaud’</h1>
<div id="gaudi" align="justify"><p>Many tourists are drawn to Barcelona to see Antoni Gaud’'s incredible architecture. </p></div>
</body></html>
Example of descendant.css• h1 {color:purple}
Adding fonts
body {
font-family: Georgia, Times New Roman,
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
Adding fonts
More about fonts
Font family:
font-family: Georgia, Times New Roman, Times, serif;
Font size:
font-size:20px
Font type: bold, italic
font-style: italic
Font color:
color:#cc00ff
Example for font styles• Choosing Font Family
• Choosing Italic
• Choosing Text color
Practice1. Cut and paste (or type) the following code
<html> <head>
<title> Styled Page </title>
<link rel="stylesheet" type="text/css" media="screen" href=“style.css" />
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
Practice2. Open a new file in TextPad and create style sheet
rules:
- text color: purple for the entire web page
- background color: #d8da3d for entire web page
- color red, font Times New Roman, size=20px and bold style for H1 tag
- font Arial, size 12px for normal paragraph
Save this file as style.css (in the same directory where you save your html file
Practice
Insert the HTML code so that it creates the following web page
The text doesn’t have to be the same but you should at least have a title and two paragraphs
Style.css
body {
color: purple;
background-color: #d8da3d}
h1 {
color: red; font-family: Times New Roman; font-size: 20px; font-style: bold}
p {
font-family: Arial; font-size: 12px}
Style.html<html><head> <title>My first web page</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
</head>
<body>
<center> <h1> Antoni Gaudí </h1> </center><p> Gaudí's non-conformity, already visible in his teenage years,
coupled with his quiet but firm devotion to the church, made a unique foundation for his thoughts and ideas. ………
</body></html>
Elements in HTML file• Are like labels that identify and structure
different parts of a Web page
Example: header, paragraph, division, table
• Elements can contain other elements
Layout with style• Block vs. Inline
• Box model
• Positioning a box
• Changing padding, border, margin, size, alignment and color
Block vs Inline• An element of a web site can be block or
inline:• If it is a block level, it will always be displayed
on a new line
Example:
<p> This element is at block level </p>
• If it is an inline level, it will always be displayed in the current line
<p>……………
This is a <em> inline element </em>
</p>
Box model• A web site can be treated as if every element is
contained in an invisible box:• Content area• Space surrounding that area (padding)• Border• Margin
• Four basic ways to position element box:• Static: leave the box in the flow• Absolute: specify its exact coordinates with respect to
its parent (which is the element contains the current element)
• Fixed: specify its exact coordinates with respect to the browser windows
• Relative: move the box with respect to its default position in the flow
Changing from inline to block and vice versa• Rule:<selector> {display:block}
Example: #navigation a {display:block}
Results:
• Rule:<selector> {display:inline}
Positioning Elements Absolutely• Rule:
<selector> {position:absolute; top:<value>; left: <value>; bottom:<value>; right:<value>}
<value> is the offset between this element and its parent element
Example:
Affixing an element to the Browser Window• Rule:
<selector> {position:fixed; top:<value>; left: <value>; bottom:<value>; right:<value>}
<value> is the distance between this element and the edge of the browser windows
Example:
Note: IE 6 does not support this
Changing the Background• Rule:<selector> {background-color:<color
value or color name>}
Or
<selector> {background-color: transparent}
Example:
Changing the Foreground• Rule:<selector> {color:<color value or
color name>}
Or
<selector> {background-color: transparent}
Example:
Changing the Border• Rule: <selector> {
border-style:<type>;Border-width: <n>;Border-color: <color>;Border-top: <value>;Border-right:<value>;Border-left: <value>;Border-bottom: <value> }
type: none, dotted, dashed, solid, double…n: desired width (E.g 4px)value: width (e.g 2px)Example:
Changing the Margin• Rule:<selector> {
margin: x }
X: desired space to be added expressed as a length, or a percentage of the width of the parent element or “auto”
Example:
Adding Padding around element• Rule:<selector> {
padding: x }
X: desired space to be added expressed as a length, or a percentage of the width of the parent element
Example:
Example of HTML again<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <title>My first Web site</title> </head><body><!-- Site navigation menu --><ul> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a></ul>
<!-- Main content --><h1>My first styled page</h1>
<p>Welcome to my first page!
</body></html>
Result
Adding style for navigation bar (navigation.css)
body { color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }Em: equals to the element’s font size. 2em: equals to “twice the font size”
Adding style for navigation bar (navigation.css) ul.navbar li {
background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }
ul.navbar a { text-decoration: none; font-family:Arial; font-size:18px}
a:link { color: blue }
a:visited { color: purple }
Using navigation bar<html> <head> <title>My first Web site</title>
<link rel="stylesheet" type="text/css" media="screen" href="navigation.css"/>
</head><body><!-- Site navigation menu --><ul class =“navbar”> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a></ul><!-- Main content --><center> <h1>My first styled page</h1> </center></body></html>
Results
Practice1. Cut and paste (or type) the following code
<html> <head>
<title> Styled Page </title>
<link rel="stylesheet" type="text/css" media="screen" href=“style.css" />
</head>
<body>
<!– Please insert your HTML code here -->
</body>
</html>
Practice2. Open a new file in TextPad and create style sheet rules
for:- text color: purple for the entire web page and background color: #d8da3d for entire web page- unorderlist: navbar with top:2em, left:4em, width:25em
- for items in unorderlist:navbar with white background, border-right: 1em solid black; display: inline- for links in navigation bar navbar: font: Arial, size: 18px, no text decoration- color of a link in this web page: blue- color of a visited link: purple- h1 heading: position:absolute and left alignment with top margin: 2em
Save this file as style.css (in the same directory where you save your html file
(Look at the css code that we have learned)
Practice
Insert the HTML code so that it creates the following web page
CSS file (navigation.css)body { color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 4em; width: 25em }
CSS file (navigation.css)ul.navbar li {
background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black; display: inline }
ul.navbar a { text-decoration: none; font-family:Arial; font-size:18px; }
a:link { color: blue}
a:visited { color: purple}
h1 {position:absolute;text-align:left; margin-top:2em;}
HTML code<html> <head> <title>My first Web site</title><link rel="stylesheet" type="text/css" media="screen"
href="navigation.css"/></head><body><!-- Site navigation menu -->
<ul class="navbar"> <li><a href="index.html">Home </a> <li><a href="hobby.html">Resume</a> <li><a href="hobby.html">Hobby</a> <li><a href="links.html">Links</a></ul><!-- Main content -->
<h1>Welcome to my personal web page</h1></body></html>
Images• Creating Web images
Adobe Photoshop
Photoshop Elements
Paint Shop Pro
Images on the Web• Format
• Color
• Size and Resolution
• Speed
• Transparency
• Animation
Format• The format of an image on the Web should be
recognizable by Macs, Unix, Windows based OS• GIF (Graphic Interchange Format):
widely supported image-storage format promoted by CompuServe. Resolution is limited to 8-bits, or 256 colors.
• JPEG (Joint Photographic Experts Group )• 24 bits. the compression scheme sacrifices some image
quality in exchange for a reduction in the file's size.
• PNG (Portable Network Graphics). • A compressed image file format similar to JPEG
Color• 24 bits
• 16 bits
• 8 bits
• Browsers can mix two colors to produce the missing color or can shift the missing color to the one in the current set
Other factors• Size and resolution:
• Images will be displayed depending on each monitor’s resolution
• Recommend to keep a page < 600 pixels• More pixels always translate to a bigger size
image
• Speed
Keep the size of an image smaller
Compress the image
Getting image• Using search engines to find images
• Buy images on CD
• Buy a digital camera
Using images• Inserting images on a page
• <img src=“file name or URL” width=“x” height=“y” />
Example:
<center>
<h1> Welcome to My Web site</h1>
<img src="autumn.jpg" width ="500" height="400" />
<p> Autumn in Wisconsin </p> </center>
Result
Alternate Text• If the images does not appear for some
reasons, the text will appear
• Example:
<img src="autumn.jpg" width ="500" height="400" alt =“Picture of Foliage in Wisconsin”/>
Result
Specifying size for Speedier Viewing• Find the size of an image:
• Right click the image• Choose Properties or Get Image Info
• Link a thumbnail to a larger image
<A HREF="autumn.jpg">
<img src="autumn_little.jpg" alt ="Picture of Foliage in Wisconsin" /> </a>
<p> Autumn in Wisconsin </p> </center>
Result
Result
Making Images Float<img src="Castle.jpg" align="left" alt="Edinburgh Castle in Scotland"
width="500" height="480" />
<p> Edinburgh Castle in Scotland. Edinburgh Castle dominates the city of Edinburgh like no other castle in Scotland , and Edinburgh Castle is unequalled in the whole of the British Isles . Over one thousand years of history sit on top of the famous Edinburgh rock and it is easy to see why over a million visitors a year visit Edinburgh Castle .
When you come and visit Edinburgh Castle you will see why the early inhabitants of the area we now call Edinburgh , made their first settlements here, in what is now the city of Edinburgh . People have always sought a safe refuge, and the volcanic rock that forms the base of Edinburgh Castle , has always afforded the ultimate safe and defensive position in Edinburgh
</p>
Making Images Float
Adding Space around an Image
<img src="Castle.jpg" align="left" alt="Edinburgh Castle in Scotland" width="500" height="480“
vspace=“32” hspace="20" />
Adding Space around an Image
Adding Horizontal Rules
<hr size="10" width="80%" align="center" noshade="noshade" />
Adding Horizontal Rules
Practice
Practice1. Open TextPad, cut and paste (or type) the
following code<html> <head>
<title> Image page /title>
</head><body><!– Please insert your HTML code here -->
</body> </html>
And save it as image.html
Practice
2. Use Google (or any search engine that supports image searching) at www.google.com. Click on images. Type in the keywords of the image that you are looking for.
3. Modify the image.html file by adding html code to display that picture and the description of the picture.
