Your SlideShare is downloading. ×
  • Like
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply


Published in Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Lecture 2HTML/CSS – Part 2
  • 2. LISTS <ul> UL – Unordered List OL – Ordered List LI – List Item <ol>Examples via:
  • 3. p{ color:red; text-align:center; }Examples via:
  • 4. 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{ <div id=“example”> color: #f4f4f6; Lorem ipsum dolor sit amet. font-weight:bold; </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{ <div class=“example”> <div class=“example”> color: #f4f4f6; Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. font-weight:bold; </div> </div> }
  • 5. 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. PositionThe CSS positioning properties allow you to position an element. It can also place an elementbehind another, and specify what should happen when an elements content is too big. relative A relative positioned element is positioned Example via: relative to its normal position.absoluteThe value absolute generates an absolutely positioned box that’s #example{positioned relative to its containing block. The position can be specified position: absolute;using one or more of the properties top, right, bottom, and left. top: 10px;Absolutely positioned boxes are removed from the flow and have no left: 10px;effect on later siblings. Margins on absolutely positioned boxes never }collapse with margins on other boxes.
  • 7. Float 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. 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. left rightText via: &
  • 8. ClearThe clear property specifies which sides of an element where other floating elementsare not allowed.