Exercise #6: CSS Research

1. Exercise #6: CSS Research

2. NikoVictorino What is CSS and how does it work? CSS is short for cascading style sheet. There are two forms of style sheets internal and external. CSS works by selecting identification divides in order to add different visual aspects (presentation). CSS provides backgrounds, colours, formatting and structure.

3. Through examples, explain how the CSS syntax works? There are many forms of CSS Syntax. For example this is a form of CSS syntax: H1{ color: blue; background-color: red;}.CSS syntax starts with selecting a tag, ID or class. To select tag there is no pre text, while for ID’s and Classes there is pre-text. The selector is followed by curvy brackets ( { ).ExamplesTag: H1 {ID: #example {Class: .example {The body within CSS syntax is very similar to older version of HTML using codes like color or background, these codes are followed by a colon and a specific tag than a semi colon. Finally the syntax is closed with a curvy bracket ( } )Example: #example { Color:blue;}

4. Brandon Lamson • Through examples, explain how to build a css navigation bar1.) A navigation bar is basically a list of links to other pages on your site. We use the <li> code for link, which makes sense. The format for this:<ul><li><a href="default.asp">Home</a></li><li><a href="news.asp">Page01</a></li><li><a href="contact.asp">Page02</a></li><li><a href="about.asp">Page03</a></li></ul> I prefer a horizontal nav bar, so in my external CSS I use:li{display:inline; }

5. Candice Ferreira • Through examples, explain how to build a css navigation barA navigation bar is a list of links, with a standard HTML base.Because of this <ul> and <li> is used. Ex: <ul><li><a href="default.asp">Home</a></li><li><a href="news.asp">News</a></li><li><a href="contact.asp">Contact</a></li><li><a href="about.asp">About</a></li></ul>A Navigation bar doesn’t need list markers.list-style-type:none - Removes the bullets and the margins and padding from the list by setting margins and padding to 0. this will remove the Browser default setting. Ex:(using both vertical & horizontal Navigation Bars) ul{list-style-type:none;margin:0;padding:0;}Vertical Navigation Baronly need to style the <a> elements in addition to the example above.display:block makes the whole link area clickable (not just the text) displaying the links as block elements. specify a 60px width so the block element takes up the full width available by default. ex:a{display:block;width:60px;} Continued 

6. Floating List Itemsin the examples above the links had different widths. Foat the <li> elements and specify a width for the <a> elements so all the links have and equal width. use float to get block elements to slide next to each other (float:left)ex:li {float:left;}a{display:block;width:60px;}

7. Milton Sukabut • How to align elementsA block element is an element that takes up the full width available, and has a line break before and after it.Examples of block elements:• <h1>• <p>• <div>There are many ways to align elements:One method of aligning elements is to use absolute positioning:Example.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}Another method of aligning elements is to use the float property:Example.right{float:right;width:300px;background-color:#b0e0e6;}These are two of many examples for right or left (depending which side you align on) when aligning a block element horizontally.

8. What is the difference between ID and Class?-The id selector is used to style for a specific single and unique element.-The id selector is defined with”#".-The style rule below will be applied to the element with id="para1":Example#para1{text-align:center;color:red;}-The class selector is used to style for a specific group of elements. The class selector is most often used on several elements when id selector is not.-This allows for particular styles for many HTML elements with the same class.-The class is defined with a "."-In the example below, all HTML elements with class="center" will be center-aligned:Example.center {text-align:center;}

9. Luke Diamantopoulos • - Through examples, explain CSS grouping/nestingGrouping SelectorsIn style sheets there are often elements with the same style. h1{color:green;}h2{color:green;}p{color:green;}Separate each selector with a comma to minimize the amount of text This is what it looks like when commas are used.h1,h2,p{color:green;}Nesting SelectorsIt is possible to apply a style for a selector within a selector. In the example below, one style is specified for all p elements, one style is specified for all elements with class="marked", and a third style is specified only for p elements within elements with class="marked":p{color:blue;text-align:center;}.marked{background-color:red;}.marked p{color:white;

10. Océane Buchere • Through examples, explain the difference between external style sheet, internal style sheet and inline style, when is it better to use one over the other? • External style sheet is when the actual CSS coding is hosted somewhere else, but the specific page links to it. Therefore, all the coding’s attributes will show up on that page. It is ideal when the style is applied to many pages. You are also able to change the coding, and the changes will be applied to all the pages since they all link to the same code.The code would look like this:<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>“mystyle.css” is the link to the code. Internal Style sheet is when the CSS code is written in the document. • It is ideal when that particular page has a unique style. <head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>Inline style is when the code is written in the specific area it is supposed to have an effect on.

11. Michelle Philpott Through examples, explain the box model • Everything on the page that begins with <tag> and ends with </tag> , is a box. So a <p> tag is a box, which is maybe inside of a <div> box, inside of a <body> box, inside of a <html> box. And with CSS, what you’re really doing is manipulating the size, shape, color, decoration and so forth of that box and its contents.So the box model is a set of standards for how web browsers will display the content on the page. When styling your website using CSS it is important to know a couple properties when dealing with the box model: border, background, padding, width and margin. • Border: This is the box. When you’re starting out, it helps to think of the border as the outline of a real box. It can have different thicknesses (widths) and colors, but its basically just a rigid structure you put things into. Of course, you can also have a border of zero, but it still helps to think of the border as the outermost part of your box, even if it isn’t there. • Background: If you apply a background to something, it stretches from one side of the border to the other, covering the entire inside of your box. Also, if you apply both a background color and a background image, the image will sit on top of the color. • Padding: Think of padding as the bubble wrap or packing peanuts you’d add to a box before shipping it somewhere. Padding lies between your border and your content. This is the sanest property of the lot.  • Width: This is the width of your content inside your box. This can be somewhat counter-intuitive at first, because it is not the width of your border. It’s the width of the stuff inside your border, and inside your padding. So if you set a width of 400 pixels, with 20 pixels of padding on both sides, and a 5-pixel border, your actual “box” would be 400+20+20+5+ 5 (otherwise known as 450) pixels wide. • Margin: Margins exist outside of our hypothetical box, around your border. Think of it as space outside your box that you’re deliberately leaving empty, as if the stuff inside the box were volatile, dangerous, stinky, or otherwise something you’d want to give a wide berth. So if you took our box from the width example and gave it a 10 pixel margin on every side, we’d now have a 450 pixel wide “box” taking up 470 pixels of space.

12. Through examples, explain what floating and position does. What is the difference? • Floating is a CSS property that allows you to alter the positioning of your web page exactly how you want. Ie. Right {float: right;} You can only float “block- level” elements left or right that take up a block of space on the page like images, paragraphs, divisions and lists. It will float as far as the container will allow. Turning Off the Float - Once you know how to get an element to float, it's important to know how to turn off the float. You turn off the float with the CSS clear property. You can clear left floats, right floats or both: clear: left; clear: right; clear: both; • Positioning is used to determine what you want to use for the container or box. The most useful values are: • Position: absolute; Positions an element at an arbitrary location in the page • Position: relative; Positions an element relative to its usual position in the page • Absolute positioning allows us to remove a container from the context of the other elements around it and position it wherever we want on the page. We tell the browser exactly where we want the container to appear using the top, left, right, and/or bottom properties. The top property defines how far from the top of the page we want the top of our container to appear. If we use a positive value, then our container is moved down from the top of the page, whereas a negative value would move our container up from the top of the page. The left property defines how far from the left edge of the page we want the left edge of our container to appear. The right property defines how far from the right edge of the page we want the right edge of our container to appear. The bottom property defines how far from the bottom edge of the page we want the bottom edge of our container to appear. In all cases, if we don't want to offset the container in a particular direction, we can just leave the property out of our style sheet.

13. THE END • http://www.youtube.com/watch?v=gBzJGckMYO4