Embed Size (px)
Citation preview
1
http://www.w3schools.com/css/default.asp
SY306 Web and Databases for Cyber Operations
Slide Set #3: CSS
Style!
2
ClickJacking Attack!
• By loading Adobe Flash plugin settings page into an invisible iframe,
an attacker could trick a user into altering the security settings of
Flash, giving permission for any Flash animation to utilize the
computer's microphone and camera.
• Twitter worm. This clickjacking attack convinced users to click on a
button which caused them to re-tweet the location of the malicious
page, and propagated massively.
• Attackers can trick logged-in Facebook users to arbitrarily like fan
pages, links, groups, etc
Past Clickjacking attacks
3
Cascading Style Sheets (CSS)
• Language:
• Style sheet:
• Cascading:
• Syntax:
p {color: blue; font-size:20px}
declared.html
(1 of 2)
Cascading Style Sheets (CSS) example
4
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 specify specific style values?
IV. Cascading – how does it work?
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>
3. External style sheetstyles.css content:
p { font-size: 20pt}
In HTML5 document:<head> … <link rel="stylesheet" type="text/css" href="styles.css" />
I.
5
CSS Selectors: automatically applied
<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>
II.
Exercise #1: Write an external stylesheet styles.css that makes
every h1 element centered; apply the stylesheet to starter.html
6
CSS Selectors: manually applied
<head> …<style type = "text/css">
a.nodec { text-decoration: none }
.crazy { font-size: 40pt; color: red }
#fineprint { font-size:8pt }
</style> </head>
<body> …
<a class="nodec" href="links.html"> …
<h1 class="crazy"> …
<div id="fineprint"> …
II.
Organizing multiple selectors with the same
tag
What if you had several <p>s that you want to style? Options?
• 1. Give a unique ID to each tag! <p id=“unique”>
• 2 . Give a unique class name to each tag! <p class=“one”>
II.
7
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
• 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)
3ex (3*height of x in current font [rarely used])
10px
12pt = 1 pc
23in
17cm
92mm
III.
8
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
III.
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
9
Exercise #3: Write an external stylesheet that will…
1. Using some relative size, make all <h3> text
twice as large as <h4> text
2. Make normal paragraphs that are nested inside a
table appear in bold.
Exercise #4: Where’s the bug?
/* styles.css */
td {background-color: green; color: white}
th {background-color: green; color: red}
a {font-weight: bold; text-decoration: none}
table {margin-left: 5em, border-style: groove,
border-width: thick}
div {border-style: inset; border-width: thick}
.crazy {color: yellow; font-weight:700}
.mild {color: gray; text-decoration: underline}
10
W3C CSS Validation Service
Fig. 6.7 CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)http://jigsaw.w3.org/css-validator
Cascading 101
Put the cascade in Cascading Style Sheets.<head>
…
<style type = “text/css”>
p { color:green }
</style>
<link rel="stylesheet" type = “text/css” href=“blue-styles.css" />
</head>
<body>
<p style=“color:red”>What color am I?</p>
</body>
IV.
11
Cascading 101
• If two of the same tags
– Choose the last one to be declared
• If different tags, choose the more specific
– p
– td p
– p.header
– p:hover
Cascading 101
• What if no style is given?
– Cascade (inherit) from a parent!
p { font-size: 12pt }
div.topbox { color:green }
<div class=“topbox”>
<p>I will be the div.topbox color!</p>
</div>
12
Exercise #5
• What attributes does the <p> get assigned?
<style type = “text/css”>
body { font-weight: bold }
td { font-size: 14pt; font-color: green }
.cool { font-color: red }
p { font-size: 12pt }
td p { text-decoration: underline; font-color: yellow }
</style>
<table><tr>
<td><p class=“cool”>Let’s get it started</p></td>
</tr></table>
The Box Model
• Subtitle: “how to jazz up your webpage”
13
The Box Model
Examples
• h1 { margin: 20px }
• p { border: 3px solid black; padding: 10px }
Fine-Grained
• h1 { margin-right: 20px; margin-bottom: 10px }
• h1 { margin: 20px 10px 20px 0 }
My text with 10px padding! My text with 3px padding!
Exercise #6
• Write HTML5 code to simulate this with only h3
and p tags and inline CSS:
I like being far from that h3.
Does this look nicer?
Give me
some
room.
This is an h3.
14
Positioning with CSS
• Float
– Make your element float on the left or the right
– <p><img src=“….” style=“float:right”>some text here</p>
• Clear
Positioning with CSS
• Getting fancy: float all over the place
• What happens with this code?
<img src=“…” style=“float:left” />
<img src=“…” style=“float:left” />
<img src=“…” style=“float:left” />
15
Positioning with CSS
• Relative
– Relative to its normal position
– Does not affect other elements
• Absolute
– Put an element in an exact pixel location in relation to its
containing block-level element that has a non-static position.
.bgimg { position: absolute;
top: 0px;
left: 0px; }
<body> … <div><img class=“bgimg” … /></div> </body>
…<div style = “position:relative”><img class=“bgimg” … /></div>…
The <div> Tag - ‘Div’ide and conquer
• Divider: <div>
– Just a wrapper, similar to <body>
– Divides up your page in object-oriented-like sections
– Styles can easily be applied to each divider
– Can be your best friend
<div class=“header”> …. </div>
<div class=“leftpanel”> … </div>
<div class=“content”>…</div>
<div class=“footer”> …</div>
16
• You can also ‘create’ visual
HTML objects like menus,
sidebars, and more.
<body>
<div style = “width:100px; height:300px; background-color:red”></div>
<div style = “width:100px; height:100px; background-color:blue”></div>
<div style = “width:100px; height:100px; background-color:green”></div>
<div style = “width:400px; height:100px; background-color:yallow”></div>
</body>
The <span> Tag
• Allows you to separate your content into
smaller in-line sections
• Control styling for smaller parts of your page,
such as text.
17
<span>
<body>
<p>
My favorite font is <span style = “font-family:IMPACT”>Impact!</span>
</p>
</body>
Exercise #7: Div tag
<head>
<style type=“text/css”>
.pane { float:right; width:20%; height:600px; border:1px solid black }
.header { width:75%; height:100px; border:1px solid black }
.main { width:75%; height:500px; border:1px solid black }
</style>
</head>
<body>
<div class=“pane”> some content </div>
<div class=“header”> the header </div>
<div class=“main”> the main body </div>
</body>
Draw this output.
18
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>
