5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS

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 formatting when more than one style applies. Ex( if all tables should have red borders except for one particular table, you can single out that one table)

Why use CSS? You can apply the same styling to several HTML elements without rewriting code over and over again. You can apply the same styling to several HTML pages without rewriting code over and over again.

declared.html (1 of 2) Cascading Style Sheets (CSS) example

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?

Three Locations for Style 1.Inline … 2.Embedded style sheet (in ) … p { font-size: 20pt} 3.External style sheet styles.css content: p { font-size: 20pt} In HTML5 document: … I.

CSS Selectors: automatically applied 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; } II.

Exercise #1: Write an external stylesheet styles.css that makes every h1 element centered; apply the stylesheet to starter.html

CSS Selectors: manually applied … a.nodec { text-decoration: none }.crazy { font-size: 40pt; color: red } #fineprint { font-size:8pt } … II.

Organizing multiple selectors with the same tag What if you had several s that you want to style individually? 1. Give a unique ID to each tag! Ideal for styling individual selectorsIdeal for styling individual selectors Define each id in your.css like this: Notice the # sign! 2. Give a unique class name to each tag! Ideal for applying same styling to multiple elementsIdeal for applying same styling to multiple elements Define each class in your.css like this: Notice the ‘. ’ II.

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.

Color “color: yellow” black, white, red, blue, … “color: rgb(255, 255, 0)” “color: #FFFF00” “Web-safe colors”? Only use hex values: III.

Exercise #2: Write an embedded stylesheet that will… 1.Make every and 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

Exercise #3: Write an external stylesheet that will… 1.Using some relative size, make all text twice as large as 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}

W3C CSS Validation Service Fig. 6.7CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)

‘Div’ide and conquer -One of the most useful structure tags is the 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 tag doesn’t render to the browser It’s used for structural organization and use with CSS

You can also ‘create’ visual HTML objects like menus, sidebars, and more.

Allows you to separate your content into smaller in-line sections Control styling for smaller parts of your page, such as text.

Centering Secrets Stylesheet:.tcenter {text-align: center}.dcenter {margin-left: auto; margin-right: auto; text-align: center} Usage: … …