5 th ed: chapter 4 4 th ed: chapter 5 sy306 web and databases for cyber operations slide set #4: css
DESCRIPTION
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.TRANSCRIPT
![Page 1: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/1.jpg)
5th ed: Chapter 44th ed: Chapter 5
SY306 Web and Databases for Cyber Operations
Slide Set #4: CSS
![Page 2: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/2.jpg)
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)
![Page 3: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/3.jpg)
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.
![Page 4: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/4.jpg)
declared.html(1 of 2)
Cascading Style Sheets (CSS) example
![Page 5: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/5.jpg)
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?
![Page 6: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/6.jpg)
Three Locations for Style1. 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.
![Page 7: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/7.jpg)
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.
![Page 8: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/8.jpg)
Exercise #1: Write an external stylesheet styles.css that makes every h1 element centered; apply the stylesheet to
starter.html
![Page 9: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/9.jpg)
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.
![Page 10: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/10.jpg)
Organizing multiple selectors with the same tag
• What if you had several <p>s that you want to style individually?
• 1. Give a unique ID to each tag! <p id=“unique”>• Ideal for styling individual selectors• Define each id in your .css like this: • Notice the # sign!
• 2 . Give a unique class name to each tag! <p class=“one”>• Ideal for applying same styling to multiple elements• Define each class in your .css like this: • Notice the ‘.’
II.
![Page 11: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/11.jpg)
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• positionMany more…
III.
![Page 12: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/12.jpg)
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])10px12pt = 1 pc23in17cm92mm
III.
![Page 13: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/13.jpg)
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.
![Page 14: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/14.jpg)
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 them3. Define a generic selector called “cat" that will
italicize text
![Page 15: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/15.jpg)
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.
![Page 16: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/16.jpg)
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}
![Page 17: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/17.jpg)
W3C CSS Validation Service
Fig. 6.7 CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)http://jigsaw.w3.org/css-validator
![Page 18: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/18.jpg)
‘Div’ide and conquer
• -One of the most useful structure tags is the <div></div> tag.
• -Allows you to divide your page into separate block-level sections
• -Why is this useful?
![Page 19: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/19.jpg)
• Organize my page according to block-level content (cats and dogs)
• The <div> tag doesn’t render to the browser
• It’s used for structural organization and use with CSS
![Page 20: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/20.jpg)
• You can also ‘create’ visual • HTML objects like menus,
sidebars, and more.
![Page 21: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/21.jpg)
<span>
• Allows you to separate your content into smaller in-line sections
• Control styling for smaller parts of your page, such as text.
![Page 22: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/22.jpg)
<span>
![Page 23: 5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations Slide Set #4: CSS](https://reader030.vdocuments.us/reader030/viewer/2022012914/5a4d1aef7f8b9ab05997d1f7/html5/thumbnails/23.jpg)
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>