Chapter 6 Cascading Style Sheets CIS 275Web Application

Chapter 6: Cascading Style Sheets CIS 275—Web Application Development for Business I

CSS Introduction n n 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 n n 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 n n n 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”} n This is more _____: p { text-align: center; color: red; font-family: “sans serif” } 3

CSS Syntax II n For _____ selectors, use grouping as follows: h 1, h 2, h 3, h 4, h 5, h 6 { color: green } n The class attribute: n In the CSS file, p. right {text-align: right} n In the HTML file, This paragraph will be right-aligned. n You can use. right {text-align: right} and apply it to several different tags, such as , <h 1>, <td>, etc. 4

CSS Syntax III n The id attribute is similar to the _______ attribute n In the CSS file, #intro {font-size: 110%; font-weight: bold; color: #0000 ff; backgroundcolor: transparent } n In the HTML file, This paragraph uses the “intro” style. n Also in the CSS file, p#intro {font-size: 110%; font-weight: bold; color: #0000 ff; background-color: transparent } will apply ONLY to tags with the id=“intro” attribute n n A CSS ____ format: /* This is a comment */ A CSS validator: http: //jigsaw. w 3. org/css-validator/ 5

CSS: How to Apply n External style sheet (applies to ____ pages) <head> <link rel="stylesheet" type="text/css" href="mystyle. css" /> </head> n Internal style sheet (for a _______ page) <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20 px} body {backgroundimage: url("images/back 40. gif")} </style> </head> n Inline styles (for a unique element, _____ if possible) This is a paragraph 6

Background body { background-color: yellow } h 1 { background-color: #00 ff 00 } h 2 { background-color: transparent } p { background-color: rgb(250, 0, 255) } <html> <head> <link rel="stylesheet" type="text/css" href=“mystyle. css" /> </head> <body> <h 1>This is header 1</h 1> <h 2>This is header 2</h 2> This is a paragraph </body> </html> 7

$Various Background Effects n Background image body {background-image: url(". . /images/bgdesert. jpg")} n _____$

Various Background Effects n Background image body {background-image: url(". . /images/bgdesert. jpg")} n _____ a background image body { background-image: url(". . /images/bgdesert. jpg"); backgroundrepeat: repeat-y} n ______ a background image (IE only) body { background-image: url(". . /images/smiley. gif"); background-repeat: no-repeat; background-position: center} n ______ a background image (IE only) body {background-image: url(". . /images/smiley. gif"); background-repeat: no-repeat; background-attachment: fixed} n One ______ body { background: #00 ff 00 url(". . /images/smiley. gif") no-repeat fixed center} 8

$Text n Setting text _____ h 1 {color: #00 ff 00} n n n$

Text n Setting text _____ h 1 {color: #00 ff 00} n n n Letter ____ (IE only) n _____ text h 1 {text-decoration: overline} h 2 {text-decoration: line-through} h 3 {text-decoration: underline} a {text-decoration: none} h 1 {letter-spacing: -3 px} n ______ control h 4 {letter-spacing: n use … 0. 5 cm} p. uppercase {text-transform: ____ text uppercase} h 1 {text-align: center} p. lowercase {text-transform: _____ text lowercase} p {text-indent: 1 cm} p. capitalize {text-transform: capitalize} 9

$Font n Set the font _____ h 3 {font-family: times} p {font-family: arial, sansserif}$

Font n Set the font _____ h 3 {font-family: times} p {font-family: arial, sansserif} p. sansserif {font-family: sans-serif} n Use … in HTML document n Set the font _______ h 1 {font-size: 150%} p {font-size: 14 pt} n Set the font _______ h 1 {font-style: italic} h 2 {font-style: normal} p {font-style: oblique} n Set the font _____ p. thick {font-weight: bold} n One declaration p { font: italic small-caps 900 12 px arial } 10

$Border n Border _______ p. dotted {border-style: dotted} n _____ borders p. soliddouble {border-style:$

Border n Border _______ p. dotted {border-style: dotted} n _____ borders p. soliddouble {border-style: solid double} n Border ____ p. one {border-style: solid; border-color: #0000 ff} n Border ____ p {border-style: solid; border-bottom-width: 15 px} n One declaration p {border: medium double rgb(250, 0, 255)} 11

Margin and Padding n Left margin p. margin {margin-left: 2 cm} n One declaration (top, right, bottom, left) p. margin {margin: 2 cm 4 cm 3 cm 4 cm} n Padding in a table cell (between cell edge and content) td {padding-top: 2 cm} n One declaration (top-bottom and left-right) td. twovalues {padding: 0. 5 cm 2. 5 cm} 12

List n Unordered list style type ul. disc {list-style-type: disc} n Ordered list style type ol. lroman {list-style-type: lower-roman} n Using images ul {list-style-image: url(". . /images/arrow. gif")} n List item placement ul. inside {list-style-position: inside} n Nested elements (applies to a list within another list) ul ul {text-decoration: underline; margin-left: . 5 cm} n One declaration ul {list-style: square inside url(". . /images/arrow. gif")} 13

$Dimension Properties n Controlling the dimensions of ____ img. normal {height: auto; width: auto}$

Dimension Properties n Controlling the dimensions of ____ img. normal {height: auto; width: auto} img. big {height: 80 px; width: 100 px} img. small {height: 30 px; width: 50 px} n Controlling the _______ between lines p. increase {line-height: 1 cm} 14

Classification I n The display property div {display: none} Contents of <div></div> are invisible p {display: inline} Contents of display continuously n Images may “____” next to text img {float: left} Image will float to the left of text. n Positioning text _____ to normal h 1. shift {position: relative; left: 20} + 20 pixels to left position n Positioning text at _____ location h 1. x {position: absolute; left: 100; top: 150} n Making an element _____ h 1. two {visibility: hidden} 15

Changing the Cursor I Auto Move Crosshair e-resize Default Hand ne-resize nw-resize 16

Changing the Cursor II n-resize w-resize se-resize text sw-resize wait s-resize help 17

$Positioning I n elements Positioning HTML _____ on the screen: h 1 {position: absolute;$

Positioning I n elements Positioning HTML _____ on the screen: h 1 {position: absolute; top: 100 px; left: 100 px} p {position: absolute; bottom: 80 px; right: 40 px} n content Controlling the display if _______ exceeds space: n In the style sheet: div {background-color: #00 FFFF; width: 150 px; height: 150 px; overflow: scroll} n In the HTML document: <div>You can use the overflow property when you want to have better control of the layout. 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 n Aligning images vertically within _____: n In the style sheet: img. top {vertical-align: text-top} n In the HTML doc: This is an <img class="top“ border="0" src=". . /images/alert_red_bg. gif“> image inside a paragraph. n z-index is used to _____ HTML elements. n 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} n Elements with larger z-index values display on top of those with smaller z-index values. 19

Pseudo-classes n n A pseudo-class is designed to add effects to some _____. The syntax is: selector: pseudo-class {property: value} n ____ pseudo-classes (MUST occur in this order): a: link {color: #FF 0000} /* unvisited link */ a: visited {color: #00 FF 00} /* visited link */ a: hover {color: #FF 00 FF} /* mouse over link */ a: active {color: #0000 FF} /* selected link */ n An interesting effect (see other examples): a. two: link {color: #ff 0000} a. two: visited {color: #0000 ff} a. two: hover {font-size: 150%} 20

Pseudo-elements n n A pseudo-element is similar to a pseudo-class. The first line will display special formatting: p {font-size: 12 pt} p: first-line {color: #0000 FF font-variant: small-caps} n The indicated effect will occur before/after an occurrence of an element: h 1: before {content: url(beep. wav)} h 1: after {content: url(beep. wav)} 21

The : first-child Pseudo-class I n n The indicated effect applies only to the first-child element of the specified element: In style sheet: div: first-child p { text-indent: 25 px } n In HTML doc: <div> First paragraph in div. This paragraph will be indented. Second paragraph in div. This paragraph will not be indented. </div> <h 1>Header</h 1> The first paragraph inside the div. This paragraph will not be indented. </div> 22

The : first-child Pseudo-class II n n The following applies to an <a> that is the first-child of any element: In the style sheet: a: first-child { text-decoration: none } n In the HTML doc (only the first <a> is affected): Visit <a href="http: //www. w 3 schools. com"> W 3 Schools </a> and learn CSS! Visit <a href="http: //www. w 3 schools. com"> W 3 Schools </a> and learn HTML! 23

Media Types n n 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: 14 px} } @media print { p. test {font-family: times, serif; font-size: 10 px} } @media screen, print { p. test {font-weight: bold} } 24