Lecture 3HTML/CSS – Part 2

Examples via: http://www.w3schools.com/css/css_syntax.asp

p {color:red;text-align:center;}

CSS

The id SelectorThe id selector is used to specify a style for a single, unique element.The id selector uses the id attribute of the HTML element, and is defined with a "#".

#example{color: #f4f4f6;font-weight:bold;}

<div id=“example”>Lorem ipsum dolor sit amet.</div>

The class SelectorThe class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "."

.example{color: #f4f4f6;font-weight:bold;}

<div class=“example”>Lorem ipsum dolor sit amet.</div>

<div class=“example”>Lorem ipsum dolor sit amet.</div>

There are three types of CSS styles:

inline stylesInline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.<a href="" style="text-decoration: none;">

embedded stylesEmbedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.<style type="text/css">p { color: #00f; }</style>

external stylesExternal styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to.<link rel="stylesheet" type="text/css" href="styles.css" />

CSS – Display Property

http://www.w3schools.com/Css/tryit.asp?filename=trycss_display

A block element is an element that takes up the full width available, and has a line break before and after it.

An inline element only takes up as much width as necessary, and does not force line breaks.

CSS – Position PropertyThe CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

relativeA relative positioned element is positioned relative to its normal position.

absoluteThe value absolute generates an absolutely positioned box that’s positioned relative to its containing block. The position can be specified using one or more of the properties top, right, bottom, and left. Absolutely positioned boxes are removed from the flow and have no effect on later siblings. Margins on absolutely positioned boxes never collapse with margins on other boxes.

#example{position: absolute;top: 10px;left: 10px;}

Example via: http://reference.sitepoint.com/css/position

This property specifies whether or not a box should float and, if so, if it should float to the left or to the right. A floating box is shifted to the left or to the right as far as it can go, and non-floating content in the normal flow will flow around it on the opposite side. The float property is ignored for elements that are absolutely positioned. User agents are also allowed to ignore it when it’s applied to the root element.

CSS – Float Property

Turning off Float - Using ClearElements after the floating element will flow around it. To avoid this, use the clear property.The clear property specifies which sides of an element other floating elements are not allowed.

Text via: http://reference.sitepoint.com/css/float & http://www.w3schools.com/css/css_float.asp

leftleft rightright

CSS – Clear Property

The clear property specifies which sides of an element where other floating elements are not allowed.

Position: relative;

Position: absolute;