5 th ed: Chapter 4 4 th ed: Chapter 5 SY306 Web and Databases for Cyber Operations SlideSet #5: Advanced CSS

Review: Locations for CSS 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: …

Cascading 101 Put the cascade in Cascading Style Sheets. … p { color:green } What color am I?

Cascading 101 If two of the same tags… –Choose the last one to be declared If different tags, choose the more specific selector –p –td p –p.header

Cascading 101 What if no style is given? –Cascade (inherit) from a parent tag! div.topbox { color:green } I will be the div.topbox color!

Exercise #1 What attributes does the get assigned? body { font-weight: bold } td { font-size: 14pt; font-color: green }.cool { font-color: red } p { font-size: 50pt } td p { text-decoration: underline; font-color: yellow; font-size: 12pt } Let’s get it started

HTML elements live here, surrounded by these edges Content is the actual "stuff" in the box. If we're talking about a element, the "stuff" is the text of the paragraph. Border is the edge of the element.. Padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content. Margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. HTML Box Model

The Box Model -defining values in CSS Examples h1 { margin: 20px } p { border: 3px solid black; padding: 10px } Fine-Grained h1 { margin-right: 20px; margin-bottom: 10px } h1 { margin: 20px 10px 20px 0px } [TOP, RIGHT, BOTTOM, LEFT] Padding and margin can be defined by position padding-left:, padding-right:, padding-top:, padding-bottom: margin-left:, margin-right:, margin-top:, margin-bottom: margin: 10px 20px 10px 10px ; (top is 10px, right is 20px, bottom is 10px, left is 10px) padding: 10px 20px 10px 10px ; (top is 10px, right is 20px, bottom is 10px, left is 10px)

My text with 10px padding! My text with 3px padding!

Exercise #2 Write HTML5 code to simulate this with only h3 and p tags and inline CSS: I like being far from that h3. Does this look nicer? Give me some room. This is an h3.

Positioning with CSS: Float and inline-block Elements are organized as boxes which take up the entire width of a page. That’s why elements naturally render from top to bottom…. The float value removes the element from the html box flow and affixes the element to the left or right of the page All other html elements still follow the natural box flow as if the float element wasn’t even there You can float:left and float:right (float.html instructor discussion)float.html Display: inline-block will also align elements left to right

Positioning with CSS Getting fancy: float all over the place What happens with this code?

Positioning with CSS All elements have a default position:static (follows normal flow of page) Fixed –Anchors the element to the browser window (glues element to the screen) Absolute –position: absolute removes the element from the html box flow. Then is affixes the element in a position defined by top, right, left –When one than one element are fixed the same position, use z-index: -1, 0, 1 to priority order of display (absolute.html instructor discussion)absolute.html -More html element positioning examples at W3CW3C

Exercise #3: Div tag.pane { float:right; width:20%; height:600px; border:1px solid black }.header { width:75%; height:100px; border:1px solid black }.main { width:75%; height:500px; border:1px solid black } some content the header the main body Draw this output.