Document
advertisement
Chapter 6: Cascading Style
Sheets
CIS 275—Web Application
Development for Business I
CSS Introduction
CSS stands for ____________ style sheets because
multiple style definitions will cascade into one.
CSS is a technology for __________ HTML elements.
Styles were added to HTML ____ to separate
structure from presentation in web page.
Style sheets can be
External (stored in a one or more separate ______ files)
Internal (using the ________ tag in the <head> element)
Inline (using the ________ attribute)
Styles take effect in order of specificity such as,
inline, internal, external, ________ default
2
CSS Syntax I
The general CSS syntax is selector {property: value}
For example, body {color: black}
For multiple properties, use semi-colons
p {text-align: center; color: red; font-family: “sans serif”}
This is more _________:
p
{
text-align: center;
color: red;
font-family: “sans serif”
}
3
CSS Syntax II
For _________ selectors, use grouping as follows:
h1, h2, h3, h4, h5, h6
{
color: green
}
The class attribute:
In the CSS file,
p.right {text-align: right}
In the HTML file,
<p class="right"> This paragraph will be right-aligned. </p>
You can use .right {text-align: right} and apply it to several
different tags, such as <p>, <h1>, <td>, etc.
4
CSS Syntax III
The id attribute is similar to the _______ attribute
In the CSS file,
#intro {font-size:110%; font-weight:bold; color:#0000ff; backgroundcolor:transparent }
In the HTML file,
<p id=“intro"> This paragraph uses the “intro” style. </p>
Also in the CSS file,
p#intro {font-size:110%; font-weight:bold; color:#0000ff;
background-color:transparent } will apply ONLY to <p> tags with
the id=“intro” attribute
A CSS ________ format: /* This is a comment */
A CSS validator: http://jigsaw.w3.org/css-validator/
5
CSS: How to Apply
External style sheet (applies to ________ pages)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Internal style sheet (for a _______ page)
<head>
<style type="text/css">
hr {color: sienna} p {margin-left: 20px} body {backgroundimage: url("images/back40.gif")}
</style>
</head>
Inline styles (for a unique element, _____ if possible)
<p style="color: sienna; margin-left: 20px"> This is a
paragraph </p>
6
Background
body
{
background-color:
}
h1
{
background-color:
}
h2
{
background-color:
}
p
{
background-color:
}
yellow
#00ff00
transparent
<html>
<head>
<link rel="stylesheet" type="text/css"
href=“mystyle.css" />
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
rgb(250,0,255)
7
Various Background Effects
Background image
body {background-image: url("../images/bgdesert.jpg")}
__________ a background image
body { background-image: url("../images/bgdesert.jpg");backgroundrepeat: repeat-y}
____________ a background image (IE only)
body { background-image: url("../images/smiley.gif"); background-repeat:
no-repeat; background-position: center center}
___________ a background image (IE only)
body {background-image: url("../images/smiley.gif"); background-repeat:
no-repeat; background-attachment: fixed}
One ____________
body { background: #00ff00 url("../images/smiley.gif") no-repeat fixed
center center}
8
Text
Setting text _____
h1 {color: #00ff00}
Letter ________
(IE only)
_________ text
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
h1 {letter-spacing: -3px}
______ control
h4 {letter-spacing:
use <p class = “uppercase”>…</p>
0.5cm}
p.uppercase {text-transform:
________ text
uppercase}
h1 {text-align: center}
p.lowercase {text-transform:
__________ text
lowercase}
p {text-indent: 1cm}
p.capitalize {text-transform:
capitalize}
9
Font
Set the font _________
h3 {font-family: times}
p {font-family: arial, sansserif}
p.sansserif {font-family:
sans-serif}
Use <p class=“sansserif”>…</p> in HTML
document
Set the font _______
h1 {font-size: 150%}
p {font-size: 14pt}
Set the font _______
h1 {font-style: italic}
h2 {font-style: normal}
p {font-style: oblique}
Set the font _________
p.thick {font-weight: bold}
One declaration
p
{
font: italic small-caps 900
12px arial
}
10
Border
Border _______
p.dotted {border-style: dotted}
__________ borders
p.soliddouble {border-style: solid double}
Border ________
p.one {border-style: solid; border-color: #0000ff}
Border ________
p {border-style: solid; border-bottom-width: 15px}
One declaration
p {border: medium double rgb(250,0,255)}
11
Margin and Padding
Left margin
p.margin {margin-left: 2cm}
One declaration (top, right, bottom, left)
p.margin {margin: 2cm 4cm 3cm 4cm}
Padding in a table cell (between cell edge and
content)
td {padding-top: 2cm}
One declaration (top-bottom and left-right)
td.twovalues {padding: 0.5cm 2.5cm}
12
List
Unordered list style type
ul.disc {list-style-type: disc}
Ordered list style type
ol.lroman {list-style-type: lower-roman}
Using images
ul {list-style-image: url("../images/arrow.gif")}
List item placement
ul.inside {list-style-position: inside}
Nested elements (applies to a list within another list)
ul ul {text-decoration: underline; margin-left: .5cm}
One declaration
ul {list-style: square inside url("../images/arrow.gif")}
13
Dimension Properties
Controlling the dimensions of ________
img.normal {height: auto; width: auto}
img.big {height: 80px; width: 100px}
img.small {height: 30px; width: 50px}
Controlling the _______ between lines
p.increase {line-height: 1cm}
14
Classification I
The display property
div {display: none} Contents of <div></div> are invisible
p {display: inline} Contents of <p></p> display continuously
Images may “________” next to text
img {float: left} Image will float to the left of text.
Positioning text _________ to normal
h1.shift {position:relative; left:20} + 20 pixels to left position
Positioning text at _________ location
h1.x {position:absolute; left:100; top:150}
Making an element __________
h1.two {visibility:hidden}
15
Changing the Cursor I
<span style="cursor:auto">
Auto</span>
<span style="cursor:move">
Move</span>
<span
style="cursor:crosshair">
Crosshair</span>
<span style="cursor:e-resize">
e-resize</span>
<span style="cursor:default">
Default</span>
<span style="cursor:hand">
Hand</span>
<span style="cursor:neresize">ne-resize</span>
<span style="cursor:nwresize">
nw-resize</span>
16
Changing the Cursor II
<span style="cursor:n-resize">
n-resize</span>
<span style="cursor:wresize">w-resize</span>
<span style="cursor:se-resize">
se-resize</span>
<span style="cursor:text">
text</span>
<span style="cursor:swresize">sw-resize</span>
<span style="cursor:wait">
wait</span>
<span style="cursor:s-resize">
s-resize</span>
<span style="cursor:help">
help</span>
17
Positioning I
Positioning HTML __________
elements on the screen:
h1 {position: absolute; top: 100px; left: 100px}
p {position: absolute; bottom: 80px; right: 40px}
content exceeds space:
Controlling the display if _______
In the style sheet:
div {background-color:#00FFFF; width:150px; height:150px;
overflow: scroll}
In the HTML document:
<div>You can use the overflow property when you want to have
better control of the layout.<br><br>Try to change the overflow
property to: visible, hidden, auto, or inherit and see what happens.
The default value is visible.</div>
18
Positioning II
Aligning images vertically within _____:
In the style sheet:
img.top {vertical-align:text-top}
In the HTML doc:
<p>This is an <img class="top“ border="0"
src="../images/alert_red_bg.gif“> image inside a paragraph.</p>
z-index is used to _________ HTML elements.
This code positions an image in the upper left corner AND
allows text to display over it.
img.x {position:absolute; left:0; top:0; z-index:-1}
Elements with larger z-index values display on top of those
with smaller z-index values.
19
Pseudo-classes
A pseudo-class is designed to add effects to some
__________.
The syntax is:
selector:pseudo-class {property: value}
________ pseudo-classes (MUST occur in this order):
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
/* unvisited link */
/* visited link */
/* mouse over link */
/* selected link */
An interesting effect (see other examples):
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
20
Pseudo-elements
A pseudo-element is similar to a pseudo-class.
The first line will display special formatting:
p {font-size: 12pt}
p:first-line {color: #0000FF font-variant: small-caps}
The indicated effect will occur before/after an
occurrence of an element:
h1:before {content: url(beep.wav)}
h1:after {content: url(beep.wav)}
21
The :first-child Pseudo-class I
The indicated effect applies only to the first-child
element of the specified element:
In style sheet:
div:first-child p { text-indent: 25px }
In HTML doc:
<div>
<p> First paragraph in div. This paragraph will be indented.
</p>
<p> Second paragraph in div. This paragraph will not be
indented. </p> </div>
<div> <h1>Header</h1> <p> The first paragraph inside
the div. This paragraph will not be indented. </p> </div>
22
The :first-child Pseudo-class II
The following applies to an <a> that is the first-child
of any element:
In the style sheet:
a:first-child { text-decoration: none }
In the HTML doc (only the first <a> is affected):
<p>
Visit <a href="http://www.w3schools.com"> W3Schools
</a> and learn CSS!
Visit <a href="http://www.w3schools.com"> W3Schools
</a> and learn HTML!
</p>
23
Media Types
Media Types allow you to specify how documents will
be presented in different media.
In the style sheet:
@media screen { p.test {font-family: verdana,sans-serif; fontsize: 14px} }
@media print { p.test {font-family: times,serif; font-size:
10px} }
@media screen, print { p.test {font-weight: bold} }
24
