Controlling Layout with Style Sheets An introduction Introduction

Controlling Layout with Style Sheets An introduction

Introduction With style sheets, you can precisely position text, images, and other elements on your pages. Style sheets let you place content at set coordinates within your layout. You can control spacing around your page elements, wrap text around images and tables, and overlap content

Box Model • Where each element on a page exists in its own rectangular box. • Control the dimensions of the box using height and width attributes. • Control where the box is placed on the web page • Control how the box aligns or overlaps with other boxes on the page.

HTML Block Tags Block-level tags place new lines before and after the content they enclose. What are these HTML tags? <p>, <h 1>, <table> What about <div>? The div tag is a type of generic block-level tag commonly placed around other tags to organize content when using style sheets to determine layout.

Offsetting Content Can offset content on your web page from its normal position using top, left, right, and bottom style sheet properties. You can place content in a precise position within the browser window. You can overlap content in the browser window by placing an element at the same window coordinates as another element.

Positioning Content �What property would be used for positioning? �Position: �What is relative positioning? �It places content on the page relative to the normal flow of the other content on the page. � Example: top 25 px; left: 25 px �What is absolute positioning? �It places content at absolute points on the page. � Example: top: 500 px; left: 300 px �What is fixed positioning? �It places content relative to the browser window and keeps it fixed as a user scrolls (it stays in the browser window). � Example: position: fixed; left: 20 px

Padding and Margins What would padding do? Control the space that surrounds content inside each box on your page. What would margins do? Control the space outside the edge of the area you are controlling

Floating Content The float property takes a box out of the normal flow of your page and moves it to the right or left side of the enclosing box. Content that follows then wraps around the floated content. What can you align using the float property? Images (most common use) Paragraphs (depends on the browser) Tables Other content within a “box”

Applying CSS Layouts

To Start: �Open your personal website in your browser. �On a piece of paper, visually determine how you want your page to “look” and draw out how you want your information to lay out. �When determining what you need, target items according to the blocks of information (p tags, h tags, etc). Consider the Block/Box Model for layout options. �Be sure you have space for your heading �Potentially a side bar �The body and how that lays out (pictures vs. content) �If you like, you can create a footer as well in your layout, but this is something that we will get into later.

Set Width and Height for an element (quick review) �What properties would you use? �Width: �Height: � What is the problem with height? �How would you state an absolute value? �Div. first {width: 500 px; height: 300 px; } �Using the above rule structure, how would you assign this to your element? �Use the class attribute �Example: <div class=“first”> �How would you state a relative value? �Div. first {width: 80%; height: 20%} � What is the problem with relative values?

Try it! �Choose one element that you would like to place in a “container. ” Choose one that has 2 consecutive paragraphs or other larger elements. �Create an internal style that targets that element and assign an absolute value to it (remember your layout strategy and keep in mind the visual area of your workspace in your browser). �Apply the style to the element �Check in your browser: alter if needed �Show me. �Now choose a different element and apply relative values. Check in your browser. �Which do you prefer? �You may change the one you do not prefer or leave them as is.

Positioning: Relative �What does relative positioning mean? �Position elements relative to other content on the page (directly near or within the same container) �What would the declaration consist of in positioning an element relative to other content? �P {position: relative; } �This alone will not position an element: why?

Positioning: Relative �Add additional instructions to the declaration. What would the properties be? �Top, bottom, left, right �Example: � P {position: relative; top: 5 px; left: 75 px; } �What will these instructions do to our paragraph? � Create space between the previous element and the element you are altering. Also it will add space left of the element you are altering �What is the problem with setting bottom and right values? � If creating right values, it can push the content off the left of the page � If creating bottom values, it can obscure content above the positioned element. �What elements can we alter? �Any and (almost)all! p, div, table, h 1, h 2…

Try it! �Choose an element to alter its positioning (preferably the second element after the one you set width to). �If there is not a style created for that particular element, you will want to do that now. If there is, you simply add the positioning and instructions to your declaration. You will want to add a width to the element when creating your style for this exercise. �Offset your element using relative positioning with enough px to notice the difference. �Be sure to check it in your browser. �Show me.

Positioning: Absolute �What does absolute positioning mean? �It places elements in exact coordinates on your page independent of elements that come before it. (Not relative to other elements. ) � What are the “coordinates? ” � Top, bottom, right, left �This allows you to precisely fit together boxes of text, images, and other content on the page, like a jigsaw puzzle. �Absolute positioning removes an object from the normal flow of page content. Its size and position has no effect on the position of the content that follows it.

Positioning: Absolute What would the declaration look like for absolute positioning? P {position: absolute; } What else do we need? Add additional instructions for placement. What additional properties and values would be added to the declaration? P {position: absolute: left: 600 px; top: 300 px; } What will these instructions do to our paragraph? Position the paragraph to 300 px from the top of the page and 600 px left of the left side of the webpage.

Try it! �Alter the element following the one you positioned as relative. �If there is not a style created for that particular element, you will want to do that now. If there is, you simply add the positioning and instructions to your declaration. You will want to add a width to the element when creating your style for this exercise. �Offset your element using absolute positioning with enough px to notice the difference. �Be sure to check it in your browser. �Show me. Which do you prefer? Did you see a difference in the two different positions? �Now remove the relative positioning from the first element. Check it in your browser. What happened?

Text Wrapping and Floating Elements We have worked with text wrapping before using HTML; however, this is a little different. What does text wrapping mean? Text that wraps around another element (eg. Images) What is the property that we will use? Float: What do you think will be the values used? Right, left, or none

Text Wrapping and Floating Elements �If I set an image to float right, where will the image be in relation to the text? �It will set to the right of the text �What will the style rule look like to float an image to the right? �Img {float: right; } �The image on the webpage floats. What is the style rule for this? �Img {float: left; }

Float Elements Continued This is one of the easiest methods of creating multicolumn layouts. You must set a width (if you have not already done so) to the element you want to float Generally, you will want to set widths to the elements you want to float next to as well (if not looking to text wrap but make a column without tables). It is especially helpful if you set content areas in which you are working in div’s.

Try it! Locate an image within your html document to place with text. If you do not have one, save one to your file (be sure to “save it for web”). Create a div around the image and text (you might want the image before your text tag). Create a style that targets your image to float to one side of the text. Be sure to check it in your browser. Show me

Vertical Alignment (Review) You can align your elements within your div. What will be the property assigned? Vertical-align: What will be the value? Top, bottom, middle, or baseline There is more; however, there are others that we will not be using these at this time (sub, super) This property controls how the elements appear relative to the text or other content that comes before and after it.

Something a Little Different Positioning Content

Control the Overlap of Elements �You can overlap the elements on your pages by positioning them at similar coordinates. �With overlapping, you need to use a “z-index” to specify the overlapping order of elements. �An element with greater stacking order will set in front of an element with a lower stacking order.

Control the Overlap of Elements Z-index only works on positioned elements Positioned relative, absolute, or fixed. What would the property be? Z-index: You can assign values to either element as long as you state the z-index for the other.

Control the Overlap of Elements �If you want to assign the z-index to the overlapping element only, then you need to add a positive number �Overlapping: img. top {position: absolute; left 200 px, top 400 px; z-index: 1} �If you want to assign the z-index to the underlying element only, then you need to assign a negative number �Underlying: img. bottom {position: absolute; left: 100 px; top: 300 px; z-index: -1} �You can also assign a z-index to both elements using positive numbers; however, you need to assign the overlapping element a larger number.

Try it! Look for an image that will compliment an image already on your website. Be sure to “save for web. ” Place this image in line with your other image within your document. Create a style that will overlap these images to your liking. Be sure to check your page in your browser. Show me

Spacing Margins and Padding

Set Margins You can control the margins of your web page elements using margin properties. Where would these margins be noticeable? From the outside of a page elements border (whether a border is visible or not). What would these properties be? Margin: (used for all sides) Margin-left: (right, top, bottom) What would the values be? Your value measurement: pt, px, mm, cm, in, pc, ex, em

Try it! Target your paragraphs with an internal style. If you already have a style for your paragraphs, then simply include your instructions for creating margins. Create a margin for all sides that is large enough to be noticeable. Check in your browser and adjust accordingly Show me What happened when you created a top and bottom margin?

Create Padding Use the padding property to add space around web page content. Adding padding makes elements easier to read and separates content when needed. Where would we notice this spacing? (Hint: think in terms of tables) Inside an elements border (visible or not) Remember, to set space on the outside of

Create Padding �What would the property be to create padding around an element? �Padding: �What would the values be to create that space? �Pt, px, mm, cm, in, pc, ex, em �HOWEVER…you can add padding to only one side. What would you do to the declaration? �Padding-left: (right, top, bottom)

Try it! Place a border around at least one paragraph Target your paragraphs and create an internal style that creates padding on at least 2 sides that is noticeable Be sure to check in your browser and adjust accordingly. Show me