chapter 6: cascading style sheets
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
Chapter 6: Cascading Style Sheets
CIS 275—Web Application Development for Business I
2
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
3
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”}
4
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.
5
CSS Syntax III The id attribute is similar to the _______ attribute
In the CSS file, #intro {font-size:110%; font-weight:bold; color:#0000ff;
background-color: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/
6
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 {background-image: 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>
7
Backgroundbody {background-color: yellow}h1 {background-color: #00ff00}h2 {background-color: transparent}p {background-color:
rgb(250,0,255)}
<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>
8
Various Background Effects
Background imagebody {background-image: url("../images/bgdesert.jpg")}
__________ a background imagebody { background-image:
url("../images/bgdesert.jpg");background-repeat: 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}
9
Text Setting text _____
h1 {color: #00ff00} Letter ________
(IE only)h1 {letter-spacing: -
3px}h4 {letter-spacing:
0.5cm} ________ text
h1 {text-align: center} __________ text
p {text-indent: 1cm}
_________ texth1 {text-decoration: overline}h2 {text-decoration: line-
through}h3 {text-decoration: underline}a {text-decoration: none}
______ control use <p class = “uppercase”>…</p>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
10
Font Set the font _________
h3 {font-family: times}p {font-family: arial,
sans-serif}p.sansserif {font-family:
sans-serif} Use <p class=“sans-
serif”>…</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}
11
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)}
12
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}
13
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 declarationul {list-style: square inside url("../images/arrow.gif")}
14
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 linesp.increase {line-height: 1cm}
15
Classification I The display property
div {display: none} Contents of <div></div> are invisiblep {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 _________ locationh1.x {position:absolute; left:100; top:150}
Making an element __________h1.two {visibility:hidden}
16
Changing the Cursor I<span style="cursor:auto">Auto</span>
<span style="cursor:crosshair">
Crosshair</span>
<span style="cursor:default">
Default</span>
<span style="cursor:hand">Hand</span>
<span style="cursor:move">
Move</span>
<span style="cursor:e-resize">
e-resize</span>
<span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nw-resize">
nw-resize</span>
17
Changing the Cursor II<span style="cursor:n-
resize">n-resize</span>
<span style="cursor:se-resize">
se-resize</span>
<span style="cursor:sw-resize">sw-resize</span>
<span style="cursor:s-resize">
s-resize</span>
<span style="cursor:w-resize">w-resize</span>
<span style="cursor:text">text</span>
<span style="cursor:wait">wait</span>
<span style="cursor:help">help</span>
18
Positioning I Positioning HTML __________ on the screen:
h1 {position: absolute; top: 100px; left: 100px}p {position: absolute; bottom: 80px; right: 40px}
Controlling the display if _______ exceeds space: 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>
elements
content
19
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.
20
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} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */
An interesting effect (see other examples):a.two:link {color: #ff0000}a.two:visited {color: #0000ff}a.two:hover {font-size: 150%}
21
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)}
22
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>
23
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>
24
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; font-size: 14px} } @media print { p.test {font-family: times,serif; font-
size: 10px} }@media screen, print { p.test {font-weight: bold} }