Lecture 3
HTML/CSS – Part 2
Examples via: http://www.w3schools.com/css/css_syntax.asp
p {
color:red;
text-align:center;
}
CSS
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attri...
There are three types of CSS styles:
inline styles
Inline styles are styles that are written directly in the tag on the do...
CSS – Display Property
http://www.w3schools.com/Css/tryit.asp?filename=trycss_display
A block element is an element that t...
CSS – Position Property
The CSS positioning properties allow you to position an element. It can also place an element
behi...
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 fl...
CSS – Clear Property
The clear property specifies which sides of an element where other floating elements
are not allowed.
Position: relative;
Position: absolute;
Lesson 3 - HTML & CSS Part 2
Upcoming SlideShare
Loading in …5
×

Lesson 3 - HTML & CSS Part 2

802 views

Published on

Published in: Technology, Education
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
802
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
11
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Lesson 3 - HTML & CSS Part 2

  1. 1. Lecture 3 HTML/CSS – Part 2
  2. 2. Examples via: http://www.w3schools.com/css/css_syntax.asp p { color:red; text-align:center; } CSS
  3. 3. 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>
  4. 4. 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" />
  5. 5. 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.
  6. 6. 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
  7. 7. 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
  8. 8. CSS – Clear Property The clear property specifies which sides of an element where other floating elements are not allowed.
  9. 9. Position: relative; Position: absolute;

×