1 lecture 12 web publishing ii: cascading style sheets introduction to information technology with...
TRANSCRIPT
1
Lecture 12
Web Publishing II: Cascading Style Sheets
Introduction to Information Technology
With thanks to Mr. Mark Clulow
Dr. Ken Tsang 曾镜涛Email: [email protected]://www.uic.edu.hk/~kentsang/IT/IT3.htmRoom E408 R9
2
Cascading What? So far, you have studied HTML and how
we can use it to present content on-line You may have also already used
Cascading Style Sheet (CSS) techniques without knowing it!
CSS saves Companies $billions world-wide!
CSS makes managing large web sites easy!
3
What Is CSS? CSS is used in three different ways:
1. In-line Style2. Embedded Style3. External Style Sheet
4
The Basics – HTML We start with our basic HTML file:
<html> <head>
<title>This is our page!</title> </head> <body>
<h1>Welcome!</h1> <p>Here is our page content … </p> <p><a href=“http://www.google.com.cn”>This is a link
to Google</a></p> </body> </html>
5
How Does This Look?
6
Decoding The HTML A quick reminder: html = Hyper-Text Mark-up Language hx – Heading # -
Heading 1 <h1> is the biggest Heading 6 is the smallest <h6>
p = paragraph a = anchor - a ‘link’ or a ‘bookmark’ http://www.W3Schools.com WILL help!
7
Looking At The HTML
8
The <html> Tag
9
The <head> Tag
10
The <title> Tag
11
The <body> Tag
12
The <h1> Tag
13
The First <p> Tag
14
The Second <p> Tag
15
The <a> Tag
16
So What Do We Know? We have a basic page, containing:
A header – a BIG header! <h1> Two paragraphs <p> A link to Google China <a> A page title <title> - found INSIDE the <head> tag
17
1. In-line Styles In-line styles are quite literally that Here’s an example:
<h1 style="color:red;">Welcome!</h1>
If we include this in our HTML file, what happens?
18
Explaining The Code The first part of the CSS is called the
‘property’, because it is a characteristic of the HTML element it refers to:
color : red ;
The second part is called the ‘attribute’ or ‘value’
19
Using In-Line CSS
20
Great! You’re probably thinking that you’re
ready to go now, but think about this:
What if you had ANOTHER <h1> tag in your page?
Here’s how it would look…
21
Adding Another <h1> Tag
22
Why Does This Matter? In the beginning, it’s good to keep many
of your colours the same
When you become more advanced, you will know how-best to use different colours effectively
Having separate styles for EVERY header makes future changes difficult!
23
2. Embedded Styles Embedded means: ‘to incorporate or contain as an essential
part or characteristic ’
Our embedded style appears in the <head> tag
The style appears inside its own <style></style> tags
24
Embedded Style Example<html>
<head><title>This is our page!</title><style type="text/css"><!-- h1 {
color: red;}--></style>
</head> <body>
<h1>Welcome!</h1> …
25
The New Code Here we are introduced to some new code: <style type=“text/css”> - ‘declaration’ <!-- - used to hide CSS from anything that doesn’t
understand it h1 – You know this one! { - used to ‘encapsulate’ our styling color:red; - same as the in-line style } – close our styling for tag <h1> --> - finish hiding code </style> - close the embedded style instructions
26
A Few Words About Colours In English, colour is spelt with a ‘u’, but in
American English it is not – ‘color’(Spelt is sometimes spelt ‘spelled’, but you’ll need to ask your English teacher for help with that!)
In HTML & CSS, ‘color’ is spelt the American way.
In HTML & CSS, centre is spelt the American way also – ‘center’.
This can get confusing sometimes!
27
Finally On Colour… Computers are different to each
other. Some are old, some are new. Some
have big screens (or ‘monitors’) some have small ones
Some are Apple Mac, some are PCs, some are Mobile Phones or PDAs!
This becomes a BIG consideration in web design!
28
Hex Colours If you state a colour by name, such as
‘red’, an old computer might show a completely different colour to the one you can see on your screen.
There is a set of codes created to make sure that the user sees the closest colour to the one YOU chose!
There are many colours to choose from!
29
Hex Colours
30
What Does This Mean? The Hex codes tell us a 6-digit number
we should use to describe a colour. For example, ‘red’ is ‘#FF0000’ We should change our CSS… h1 {
color: #FF0000;}
Advanced HTML editors make picking the Hex Codes easy!
31
Advanced HTML Editors
32
Back To The Code! So now that we have our Embedded
Style, we can delete the in-line style from our h1 tag:
<h1 style="color:red;“>Welcome!</h1>
…goes back to:
<h1>Welcome!</h1>
33
Hooray! Our Headers Match!
34
More Styles At A Glance Dreamweaver (an advanced HTML editor)
has a quick way to manage the basic CSS of a page
Pressing ‘ctrl + J’ opens the ‘Page Properties’ window
We can use this to quickly write the basic styles we want
We now have a short video for you to watch
35
Dreamweaver Page Properties Video
36
Growing Our Web Site This is all great for a single
page, but what happens when we add another page to our web site?
Now we will create a new page – contact.html – and link to it from our first page.
37
Oh No! No Style!
38
Can Anybody Tell Us Why?
39
Embed Again? We could simply copy the code from the
top of the first page into our contact page. If we then want to change our headers to
green, or our background colour to blue, we have to update each page.
Whilst our site is only little, some web sites have over 1,000 pages!
Ahhhhhhhhhhhh!
40
3. External Style Sheet It is good to use an external style sheet
EVERY TIME you develop web pages
It completely separates CONTENT from STYLE
We need to create a new file – we’ll call it style.css
We need a new line in our HTML too!
41
Copying the Code into style.css
We can use any web editor or text editor (even notepad!) to create a CSS file.
We just copy it from our first page!
This is how style.css looks…
42
File: style.css
43
Link To The Style Sheet Now we have copied the style from our
first page, we can delete it from the <head> tag
We then need to add a new line:
<link type="text/css" href="style.css" rel="stylesheet" />
…to BOTH files (our first page and our contact page)
44
Linking Our Pages Together To allow us to view both pages easily, we
will add a link to each one:
<a href=“index.html”>Home</a>
<a href=“contact.html”>Contact Us</a>
We can put these on both pages
Another Video shows us how…
45
New Main Menu Video
46
Now for the Magic! We will now change some information in
our 1 single style sheet and see what affect it has…
Let’s add the following to the <a> tag:
border-width: 1px;border-style: solid;border-color: #333333;padding: 4px;background: #EAEAEA;
47
With The New Style Applied:
48
And For My Next Trick…! Would you like to see the SAME HTML file,
but with a completely different CSS file?
Remember, the CONTENT or the INFORMATION is the SAME
…but the STYLE or DESIGN is different
49
Same HTML – Different CSS!
50
Same HTML – Different CSS!
51
Some of the most common styles Here is a list of the most common styles found
in day-to-day web publishing: background-color: #EAEAEA;
font-size: x-small;color: #333333;font-weight: bold;border-color: #333333;border-style: solid;border-width: 2px;
Remember the ; at the end of every line!
52
Find out more on-line! A quick web-search for some of these
terms will help you to find out more as and when you need help: CSS Reference W3Schools CSS CSS Guide CSS beginner CSS Examples
53
‘class’ and ‘id’ Identifiers CSS supports what are called ‘identifiers’ It is an easy-to-use and flexible way to let the
CSS identify different parts of the code.
There are 2 types of identifiers – ‘class’ and ‘id’.
Think of these like our class here today – the ‘class’ is everyone in this room, your Student ID is unique to you
If we want to apply a style to a large number of HTML elements, we can use the ‘class’ identifier
If it is a style that is unique to one element, we should use the ‘id’ identifier
54
Using ‘class’ and ‘id’ To apply a ‘class’ identifier on an HTML
element, we simply need to write ‘class=classname’
Replace classname with a sensible name that makes sense to you. This will help if ever you revisit this part of your code
<h1 class="main_header">Welcome!</h1> We then need to reference this new style
(list it) in our CSS file (file style.css)
55
Using ‘class’ and ‘id’ It makes sense to place this next to the other ‘h1’
styles, but you can put it anywhere! h1 {
color:#FF0000;}h1.main_header {
color:#000000;background:#FFFF00;font-weight:bold;
}h2 { … …
56
Using ‘class’ and ‘id’ To apply an ‘id’ identifier on an HTML
element, we simply need to write ‘id=idname’
Replace idname with a sensible name that makes sense to you. This will help if ever you revisit this part of your code
<p id="home_page_welcome">Here is our page content ...
We then need to reference this new style (list it) in our CSS file (file style.css)
57
Using ‘class’ and ‘id’ We can place this code at the bottom of our
CSS file:
p#home_page_welcome {background : #EAEAEA ;color : #000000 ;width : 80% ;padding : 5px ;border : 1px solid #000000 ;text-align : right ;
}
58
Using ‘class’ and ‘id’
59
Using ‘class’ and ‘id’ Looking at our CSS, can anybody tell us
how the two are referenced?
id : p#home_page_welcome
class : h1.main_header
Look for the HTML reference, the id or class-name and one other difference!
60
Using ‘class’ and ‘id’ If you use ‘class=’ in your HTML, it is referred
to in the CSS with a full-stop . If you use ‘id=’ in your HTML, it is referred to
in the CSS with the hash sign #
Let’s do some quick examples – shout out either ‘ID’ or ‘CLASS’
If we want to apply a style to more than one HTML element, we can even leave out the HTML – see if you can spot them!
61
ID or CLASS?
p.this_content
62
ID or CLASS?
p.this_content
CLASS!
63
ID or CLASS?
a#styled
64
ID or CLASS?
a#styled
ID!
65
ID or CLASS?
p#class
66
ID or CLASS?
p#class
ID!
67
ID or CLASS?
h1.big_heading
68
ID or CLASS?
h1.big_heading
CLASS!
69
ID or CLASS?
.many_elements
70
ID or CLASS?
.many_elements
CLASS!
71
ID or CLASS?
h3#info
72
ID or CLASS?
h3#info
ID!
73
The Basics covered… So we have now looked at the basics,
but what else can we use CSS for?
1. Applying images to our pages2. Changing the layout of our
pages
This is where it gets REALLY exciting!
74
Using <div> and <span> So far we have used the ‘hx’ tags for
headers, the ‘p’ tag for paragraphs and the ‘a’ tag for anchor links.
‘div’ and ‘span’ are tags that can be VERY useful!
They allow us to add extra style elements to our page, but keep our content clean and tidy
75
‘div’ versus ‘span’ ‘div’ acts like a paragraph ‘p’ tag in that it
creates a break – a new line ‘span’ – with no styling applied to it – does not
affect the formatting of the code at all ‘div’ is used to create sub-sections within our
content ‘span’ is used to apply styles to tiny elements
of our page
Usage: div – 90% vs. span - 10%
76
Adding <div> and <span>
77
Adding <div> and <span>
78
Adding <div> and <span>
79
Adding <div> and <span>
80
Adding <div> and <span>
81
Changes To The HTML Output
82
Changes To The HTML Output
83
Why Was There No Change?
Can anybody tell us why there was no change to the HTML file output… yet?
Here’s a clue… look in the CSS file!
84
Why Was There No Change? There was no change to the HTML file, because
we haven’t added any CSS to our new elements ‘div’ and ‘span’
We can add CSS code for ALL the ‘div’ elements on our page, or use the class identifiers to add style to each one in turn
We can add CSS code for ALL the ‘span’ elements on our page, or use the id identifier to add style to our one unique link to Google.
OR we can do ALL of these things!
85
CSS For The <a> Tag This is the CSS we added to the anchor
‘a’ tag: line-height : 24px ;
padding-left : 28px ;
background-image : url(images/link_arrow.png) ;
background-position : left ;
background-repeat : no-repeat ;
86
CSS For The <a> Tag
87
‘background-repeat’ Options
88
Mouse-Over Background Change
When we used Dreamweaver to create our initial Page Properties styles, it created a few different styles for ‘a’ links
This refers to the ‘state’ of the link, or an ‘event’ happening
The states are Link, Visited, Active and Hover
89
Mouse-Over Background Change
‘link’ – applies to all unvisited links
‘active’ – a link becomes ‘active’ when you click it
‘visited’ – if a link has already been clicked
‘hover’ – when the mouse is over the link
90
Mouse-Over Background Change The ‘link property’ is applied using a :
directly after the a. Here is our new CSS: a:hover {
text-decoration : underline ;
color : #003399 ; /* THIS CODE CHANGES THE GREEN ARROW TO A BLUE ONE! */
background-image : url(images/link_arrow_over.png) ;
}
91
Mouse-Over Background Change Did you notice the arrow change to blue
when the mouse was moved over it?
92
Heading Background Image By using the ‘background-image’ and
‘background-repeat’ properties, we can add a faded image to the background of the <h1> tag.
This is the image we will repeat: This is the CSS we will use:
padding : 5px ;background-image : url(images/header_1_fade.gif) ;background-repeat : repeat-x ;
93
Heading Background Image
94
Paragraph Background Image From this page view we can also see what
affect this CSS has on our page: p#home_page_welcome {
/* THIS STYLE WAS ALREADY HERE */
background: #EAEAEA;color:#000000;width:80%;padding:5px;border:1px solid #000000;text-align:right;/* LET'S ADD THE FADED BACKGROUND! */background-image : url(images/special_p_fade_top.gif) ;background-position : top ;background-repeat : repeat-x ;
}
95
Paragraph Background Image
96
Summary In this session we learnt:1. CSS stands for ‘Cascading Style Sheet’2. It lets us separate CONTENT from STYLE3. We could also say it lets us separate
INFORMATION from DESIGN4. There are many ways we can use CSS
to make our web sites look great!
97
Summary5. We can apply style to any HTML tag
INSIDE the <body> tag6. There are 3 types:
1. In-line Styles2. Embedded Styles3. External Style Sheet
7. In-line stlye happens with each element we wish to affect
8. Embedded Style appears in the <head> tag
98
Summary9. External style is held in a separate CSS
file that we link to from within the <head> tag
10. External Style sheets make site-wide changes quick and easy
11. We can apply style to any HTML element12. We can use the class and id identifiers
to style groups page items or individual items
99
Forum Questions Please log on to:
http://www.uic.edu.hk/bbs/
and answer the questions we have already posted on there!
There are some links you might find useful or interesting on there too!