This document summarizes key concepts in HTML/CSS including: - CSS syntax using selectors like p, id, and class to style elements - The three types of CSS styles: inline, embedded and external - CSS properties like display, position, float, and clear that control element positioning and flow

1. Lecture 3
HTML/CSS – Part 2

2. Examples via: http://www.w3schools.com/css/css_syntax.asp
p {
color:red;
text-align:center;
}
CSS

4. The id Selector
The 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 Selector
The 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>

5. There are three types of CSS styles:
inline styles
Inline 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 styles
Embedded 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 styles
External 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" />

6. 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.

7. CSS – Position Property
The 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.
relative
A relative
positioned
element is
positioned
relative to its
normal position.
absolute
The 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

8. 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 Clear
Elements 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

9. CSS – Clear Property
The clear property specifies which sides of an element where other floating elements
are not allowed.

10. Position: relative;
Position: absolute;