07. session 07 adv css properties

07. session 07 adv css properties

• 1.
  AdvancedCSS Properties Session 7
• 2.
  Objectives Positioning inCSS Pseudo Classes and Elements Table and List User Interface Properties
• 3.
  Positioning in CSS - Concepts The position property in CSS specifies the position of content There are three types of positioning: normal, absolute, relative By default, the value of position property is static, the content is displayed the normal flow. The contents of a Web page are placed in the sequence that is specified by the HTML source Absolute positioning: changes position of element’s content based on the specified co-ordinates. It removes the content from the original flow of content and does not affect the other element in a flow. Relative positioning: places the content within an element by considering the normal flow. It moves the content with respect to its original flow.
• 4.
  Positioning in CSS - Size and Position Properties Size: Set dimensions for contents within an element. There are two size properties in CSS: height, width Position: Specify the position of the element’s content along the x and y axis . The content can be placed along the left, right, top, bottom side Measurement values: cm, mm, in, em, ex, px
• 5.
  Positioning in CSS - Visibility Properties Visibility properties specify the way the content appears in an element. Visibility properties: clip, z-index, visibility, display.
• 6.
  Positioning in CSS- Visibility Properties The “clip” property specifies the shape of the element’s content that is displayed on the Web page. It is widely used when the content is too large to fit in the specified space.
• 7.
  Positioning in CSS - Visibility Properties The “z-index” property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute/relative/ fixed).
• 8.
  Positioning in CSS- Visibility Properties The “visibility” property specifies whether or not an element is visible. The element’s content take up the space on the Web page.
• 9.
  Positioning in CSS- Visibility Properties The “display” property specifies the way the content is displayed. It specifies whether the content would contain the line-break or not. Display vs. Visibility
• 10.
  Pseudo Classes andElements - Pseudo Classes Pseudo classes allow apply different styles to elements such as button, hyperlinks and so on. The syntax of pseudo classes: Where: Selector: is an element name Pseudo-class: is one of the states of element: active, hover, link, visited. Property: in any CSS property such as color, border, font, …
• 11.
  Pseudo Classes andElements - Pseudo Elements CSS pseudo elements are used to add special effects to some selectors. The syntax of pseudo elements: similar to pseudo classes. The “first-line” pseudo element is used to add a special style to first line of a paragraph. The “first-letter” pseudo element is used to add a special style to first letter of a paragraph
• 12.
  Table and List - Table Properties Table properties specify the structure and presentation of a table
• 13.
  Table and List - List Properties List properties allow set the type of the list-item marker, apply image to the marker and position the marker
• 14.
  User Interface Properties- Scrollbar Properties Scroll bars allow the browser window to display continuous text. CSS allows customize the appearance of the scrollbar by using different scrollbar properties. The scrollbar properties are not part of the CSS 2.0 specification but these are supported by IE 5.5 or higher versions.
• 15.
  User Interface Properties - Screen Properties The cursor property: specifies the type of cursor to be displayed when the mouse pointer is placed over the content Values of the cursor property:
• 16.
  User Interface Properties - Screen Properties The zoom property: is used to enlarge the contents displayed on the Web page
• 17.
  Summary Explain thepositioning concept in CSS. Describe the size, position, visibility properties. Explain the pseudo classes and elements. Explain the table and list properties. Explain the scrollbar and screen properties.