Chapter 6 - Cascading Style Sheets* (CSS)
advertisement
SY306 Web and Databases for Cyber Operations
Slide Set #4: CSS
5th ed: Chapter 4
4th ed: Chapter 5
Cascading Style Sheets
• Language used to describe appearance and formatting of HTML
• Style sheet: file that describes how HTML should look
• Cascading: Sheets can apply different styles to repeat elements. Ex(
if all tables should have red borders except for one particular table,
you can single out that one table)
DEFINES the “style” attribute
Why use CSS?
• You can apply the same styling to several HTML
elements and pages without defining the “style”
attribute over and over again
BEFORE:
<p style = "font-size: 20pt; color:red;margin-left:10px" > … </p>
<p style = "font-size: 20pt; color:red;margin-left:10px" > … </p>
<p style = "font-size: 20pt; color:red;margin-left:10px" > … </p>
AFTER:
<p> … </p>
<p> … </p>
<p> … </p>
<head>
<style type="text/css" >
p { font-size: 20pt;
color: red;
margin-left:10px}
</style>
</head>
Key Questions
I.
Where can we specify style?
II.
How to “select” what parts of a page the style
applies to?
III. How can we define style values?
I.
Three Locations for Style
1.
Inline
<p style = "font-size: 20pt" > … </p>
2.
Embedded style sheet (in <head>)
<head>
<style type="text/css" >
p { font-size: 20pt}
</style>
</head>
1.
External style sheet
In a separate document (styles.css):
<head><link rel="stylesheet" type="text/css" href="styles.css“>< /head>
styles.css content:
p
{ font-size: 20pt}
II.
How to “select” what parts of a page the style applies to?
<style type = "text/css">
p
{ font-size: 20pt;
text-align: right}
h1, h2
{ font-size: 30pt}
li em
{ color: red;
font-weight: bold }
a:hover
{ text-decoration: underline;
color: red; }
</style>
Exercise #1: Write an external stylesheet styles.css that makes
every h1 element centered; apply the stylesheet to starter.html
II.
CSS Selectors: manually applied
•
What if you had several <p>s that you want to style individually?
•
•
•
Give a unique ID to each tag! <p id=“unique”>
Ideal for styling individual selectors
Define each id in your css like this:
•
Notice the # sign!
OR…
•
•
•
•
2 . Give a unique class name to each tag! <p class=“one”>
Ideal for applying same styling to multiple elements
Define each class like this:
.
Notice the ‘ ’
II.
CSS Selectors: manually applied
<head> …<style type = "text/css">
a.nodec
{ text-decoration: underline }
.crazy
{ font-size: 40pt; color: red }
#top { font-size:8pt }
</style> </head>
<body>
<a class="nodec" href="links.html"> …
<h1 class="crazy"> …
<div id=“top"> …
</body>
III.
What styles can I apply?
• font-family, font-size, font-style, font-weight
• text-decoration (line-through, overline, underline,
none)
• list-style-type (disc, square, circle, url)
• color, background-color
• text-align (left, center, right, justify)
• float (left, right, none)
• border-style, border-width, margin, padding
– margin-left, margin-right, etc.
• background-image
• Opacity (great for click-jacking attack!)
• width, height
• position
Many more…
III.
Examples of property values/units
Predefined – xx-small, x-small, small,
smaller, medium, large, x-large,
xx-large
40% (of current size or screen size)
2em (2*size of of current font current style)
10px
12pt 23in
17cm
92mm
III.
Color
“color: yellow”
black, white, red, blue, …
“color: rgb(255, 255, 0)”
“color: #FFFF00”
Web-safe colors? Only use hex values:
http://www.w3schools.com/tags/ref_colorpicker.asp
Exercise #2: Write an embedded stylesheet that will…
1. Make every <h1> and <h2> section have 20pt
size text
2. Put lines above all links instead of under them
3. Define a generic selector called “cat" that will
italicize text
W3C CSS Validation Service
Link on
course
homepage
Fig. 6.7
CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)
http://jigsaw.w3.org/css-validator
‘Div’ide and conquer
• One of the most useful structure tags is the
<div></div> tag.
• Allows you to divide your page into separate
block-level sections
• Why is this useful?
• Organize my page according to
block-level content (cats and
dogs)
• The <div> tag doesn’t render to
the browser
• It’s used for structural
organization and use with CSS
<span>
• Allows you to separate your content into
smaller in-line sections
• Control styling for smaller parts of your page,
such as text.
<span>
Centering Secrets
• Stylesheet:
.tcenter {text-align: center}
.dcenter {margin-left: auto;
margin-right: auto;
text-align: center}
• Usage:
<h1 class=“tcenter”>
<table class=“dcenter”> …</table>
<div class=“dcenter”>
<img> … </img>
</div>
https://www.w3.org/Style/Examples/007/center.html
