View
225
Download
0
Category
Preview:
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.
Citation preview
5th ed: Chapter 44th 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 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.
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.
Exercise #1: Write an external stylesheet styles.css that makes every h1 element centered; apply the stylesheet to
starter.html
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.
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.
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.
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.
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.
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
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.
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.7 CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)http://jigsaw.w3.org/css-validator
‘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?
• 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
• You can also ‘create’ visual • HTML objects like menus,
sidebars, and more.
<span>
• Allows you to separate your content into smaller in-line sections
• Control styling for smaller parts of your page, such as text.
<span>
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>
Recommended