Css advanced – session 5

CSS Advanced – Session 4 Ramkumar Lakshminarayanan ramkumar [at] rajaramsystems [dot] com

CSS Align Aligning Block Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <div>

Center Aligning Using the margin Property Block elements can be aligned by setting the left and right margins to "auto". Note: Using margin:auto will not work in IE8 and earlier, unless a !DOCTYPE is declared. Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:

Tip: Aligning has no effect if the width is 100%. Example Source Example .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }

Left and Right Aligning Using the position Property One method of aligning elements is to use absolute positioning: Note: Absolute positioned elements are removed from the normal flow, and can overlap elements. Example Source Example .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }

Crossbrowser Compatibility Issues When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers. There is a problem with IE8 and earlier, when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property

Example Source Example body { margin:0; padding:0; } .container { position:relative; width:100%; } .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }

Left and Right Aligning Using the float Property One method of aligning elements is to use the float property: Example Source Example .right { float:right; width:300px; background-color:#b0e0e6; }

Crossbrowser Compatibility Issues When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers. There is a problem with IE8 and earlier when using the float property. If the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the float property:

Example Source Example body { margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6; }

CSS Pseudo-classes CSS pseudo-classes are used to add special effects to some selectors. Syntax The syntax of pseudo-classes: CSS classes can also be used with pseudo-classes: selector:pseudo-class {property:value;} selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes Links can be displayed in different ways in a CSS-supporting browser: Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! Note: a:active MUST come after a:hover in the CSS definition in order to be effective!! Note: Pseudo-class names are not case-sensitive. Example Source Example a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

Pseudo-classes and CSS Classes Pseudo-classes can be combined with CSS classes: If the link in the example above has been visited, it will be displayed in red. a.red:visited {color:#FF0000;} <a class="red" href="css_syntax.asp">CSS Syntax</a>

CSS - The :first-child Pseudo-class The :first-child pseudo-class matches a specified element that is the first child of another element. Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.

Match the first <p> element In the following example, the selector matches any <p> element that is the first child of any element:

Example Source Example <html> <head> <style type="text/css"> p:first-child { color:blue; } </style> </head> <body> <p>I am a strong man.</p> <p>I am a strong man.</p> </body> </html>

Match the first <i> element in all <p> elements In the following example, the selector matches the first <i> element in all <p> elements: Example Source Example <html> <head> <style type="text/css"> p > i:first-child { font-weight:bold; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>

Match all <i> elements in all first child <p> elements In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element: Example Source Example <html> <head> <style type="text/css"> p:first-child i { color:blue; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>

CSS - The :lang Pseudo-class The :lang pseudo-class allows you to define special rules for different languages. Note: IE8 supports the :lang pseudo-class only if a <!DOCTYPE> is specified. In the example below, the :lang class defines the quotation marks for q elements with lang="no":

Example Source Example <html> <head> <style type="text/css"> q:lang(no) {quotes: "~" "~";} </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html>

All CSS Pseudo Classes/Elements Selector Example Example description :link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over :focus input:focus Selects the input element which has focus :first-letter p:first-letter Selects the first letter of every <p> element :first-line p:first-line Selects the first line of every <p> element :first-child p:first-child Selects every <p> elements that is the first child of its parent :before p:before Insert content before every <p> element :after p:after Insert content after every <p> element :lang( language ) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"

CSS Pseudo-elements CSS pseudo-elements are used to add special effects to some selectors. Syntax The syntax of pseudo-elements: CSS classes can also be used with pseudo-elements: selector:pseudo-element {property:value;} selector.class:pseudo-element {property:value;}

The :first-line Pseudo-element The "first-line" pseudo-element is used to add a special style to the first line of a text. In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window): Example Source Example p:first-line { color:#ff0000; font-variant:small-caps; }

Note: The "first-line" pseudo-element can only be used with block-level elements. Note: The following properties apply to the "first-line" pseudo-element: font properties color properties background properties word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear

The :first-letter Pseudo-element The "first-letter" pseudo-element is used to add a special style to the first letter of a text: Example Source Example p:first-letter { color:#ff0000; font-size:xx-large; }

Note: The "first-letter" pseudo-element can only be used with block-level elements. Note: The following properties apply to the "first-letter" pseudo- element: font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if "float" is "none") text-transform line-height float clear

Pseudo-elements and CSS Classes Pseudo-elements can be combined with CSS classes: The example above will display the first letter of all paragraphs with class="article", in red. p.article:first-letter {color:#ff0000;} <p class="article">A paragraph in an article</p>

Multiple Pseudo-elements Several pseudo-elements can also be combined. In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example Source Example p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }

CSS - The :before Pseudo-element The ":before" pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before each <h1> element: Example Source Example h1:before { content:url(smiley.gif); }

CSS - The :after Pseudo-element The ":after" pseudo-element can be used to insert some content after the content of an element. The following example inserts an image after each <h1> element: Example Source Example h1:after { content:url(smiley.gif); }

Css advanced – session 5

More Related Content

What's hot

Viewers also liked

Similar to Css advanced – session 5

More from Dr. Ramkumar Lakshminarayanan

Css advanced – session 5