Css class-02


Published on

Published in: Technology, Design
  • 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

No notes for slide

Css class-02

  1. 1. Md. Ali Hosssain Email:Students.gai@gmail.com Phone:01731402303
  2. 2. 1. Types of selectors (1) universal selector (CSS2)   1. element type selector   1. applies to: all elements in a page e.g.: * { color: red } applies to: all elements of that type from a page (standard tags) e.g.: h2 { color: red } class selector   applies to: elements defined with that class e.g.: .sitetitle { color: red } HTML: <div class=“sitetitle”>…
  3. 3. Types of selectors (2) 4. ID selector   applies to: the single element with that id from the page e.g.: #content { color: red } HTML: <div id=“content”>… 4. pseudo-element selector (CSS2)   4. applies to: the first letter, line or child of the nominated element e.g.: p:first-letter { color: red } pseudo-class selector (CSS2)     applies to: the nominated element in certain conditions e.g.: a:hover { color: red } applies to: all element in a certain language e.g.: :lang(ro) { text-decoration: underline } HTML: <p xmlns="http://www.w3.org/1999/xhtml" xml:lang="ro">…
  4. 4. Types of selectors (3) 7. descendant selector  applies to: an element that is a child of another element  e.g.: p strong { color: red } HTML: <p>This <strong>paragraph</strong> is long… 7. parent-child selector (CSS2)  applies to: an element that is a strict child of another element  e.g.: body > p { color: red }
  5. 5. 9. Types of selectors (4) adjacent selector (CSS2)  applies to: an element that appears in the code right after another  e.g.: p + span { color: red } HTML: <p>This is a paragraph.</p> <span>this one will be red</span> <span>this one not</span> 9. attribute selector (CSS2)  applies to: elements that have a property specified or specified with a certain value  e.g.: input[type=“text”] { color: red }
  6. 6. CSS Id and Class The id and class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". Example #para1 { text-align:center; color:red; } 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. Example .center {text-align:center;}
  7. 7. The <span> and <div> Tags  These tags are provided to allow arbitrary chunks of HTML to be treated as elements. This is usually done in order to apply style attributes to them, as in the preceding example.  A <span> ... </span> element defines an “inline” structure, i.e. it simply defines a stretch of text. Thus it can be used within a paragraph or table element without affecting the flow of the text.  A <div> ... </div> element defines a “block” structure. Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself.
  8. 8. Pseudo-classes These are like style classes, but an element acquires a pseudo-class by user action or by a relationship other than decadency. In the style sheet, a pseudo-class name is preceded by a colon. In the HTML, the pseudo-class name is NOT used with the affected tag, because it is implied.
  9. 9. Pseudo-classes Link-related pseudo-classes a:link { color : red } Applies when the link has not yet been visited. a:visited { color : green } Applies when the link has been visited. a:hover { color: yellow } Applies when the mouse is over the link.
  10. 10. Cascading Rule If two equally specific rules can apply to the same element, the one that comes last in the style sheet is used. Thus, in the example below, a:hover must follow a:link and a:visited in order to have effect, since a link can be both visited (or not) and hovering. The order of the first two doesn’t matter since they are mutually exclusive. a:link { color : red } a:visited { color : green } a:hover { color : yellow }
  11. 11. Pseudo-elements Closely related to pseudo-classes, in that they are defined by relationships, not by explicit declarations. A pseudo-element refers to a virtual element that is part of an actual element, rather than a special case of a whole element.  :first-line is a pseudo-element that consists of the first line of text in a block-level element.  :first-letter is a pseudo-element that consists of the first letter of the text in an element.
  12. 12. Pseudo-elements p p.initial p.initial:first-line uppercase } p.initial:first-letter { text-indent: 1em } { text-indent: 0 } { text-transform: { font-size: 24pt } This indents all normal paragraphs. A paragraph that is declared with class="initial" is not indented, and its first line appears in all capital letters, with an extra-large first letter.
  13. 13. The box model top margin (transparent) border padding left Content bottom right
  14. 14. Where does it apply  Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent  Border - A border that goes around the padding and content. The border is affected by the background color of the box  Padding - Clears an area around the content. The padding is affected by the background color of the box  Content - The content of the box, where text and images appear width:250px; padding:10px; border:5px solid gray; margin:10px; Let's do the math: 250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) = 300px
  15. 15. The margin property can have from one to four values. margin:25px 50px 75px 100px; top margin is 25px margin:25px 50px; right margin is 50px top and bottom margins are 25px bottom margin is 75px right and left margins are 50px left margin is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px; all four margins are 25px
  16. 16. Example: Defining an unordered list style: And writing the HTML code:
  17. 17. Results in:
  18. 18. The display property Most used values for specifying the display type of an element: block – shows a separate block  e.g. default style for h1, p, form, div inline – displays inside a text fragment  e.g. default style for span, em, code list-item – used for lists  e.g. default style for li none  can be applied to any element  doesn’t show the element or the space it would take if shown
  19. 19. Positioning (1) CSS2 provides four types of positioning schemes: normal default positioning:  block boxes flow vertically  inline boxes flow horizontally
  20. 20. Positioning (2) relative done by browsers in two steps:  first, the normal flow is followed  the box is moved according to its offset properties (top, right, left, bottom) Text text text text text text text text text text text text… Text text text text text text text text text text text text… paragraph with relative positioning, with positive top and left values Notes:  use z-index style property to specify their order  a specific width property might cause an offset to be ignored
  21. 21. Positioning (3) absolute the normal flow does not apply and the element is positioned according to its offset values (top, right, bottom, left) special case: fixed positioning – the containing block is the viewport of the browser window browser window fixed position for this element the rest of the content in the page that must be scrolled
  22. 22. Scaling There are two types of lengths units for fonts: relative  em: computed value of the ‘font-size’  ex: ‘x-height’  px: pixels, relative to the viewing device absolute  in: inches  cm: centimeters  pt: points  pc: picas
  23. 23. Positioning float specify elements to shift either to the left or right surrounding content flows around the opposite side a width should be specified for a floating box Text text text text Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text Box floating to the right
  24. 24. Positioning Note: floating boxes take no space on the vertical side if a floating box is taller than the first surrounding block, it will float around the next block, too solution: clear the floating Text text text text text text text text text text Text text text text text text text text text text text Text text text text text text text text text text Text text text text text text text text text text clear: right style for this element