Cross browser Compatibility Issues
When aligning elements like this, it is always a good idea to pre-define margin and padding for the <body> element. This is 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
body{
margin:0;
padding:o;
}
.container
{
position :relative;
width :100%;
}
.right
{
position :absolute;
right:
width :800px;
background-color:#b0e0e6;
}
Left and Right Aligning Using the float Property
One method of aligning elements is use the float property:
Example
.right
{
float:right;
width : 300px;
background –color:#b0e0e6;
Cross Browser Compatibility Issues
When aligning element like this, it is always a good idea to pre-define margin and padding for the <body> element. This is to avoid visual differences in different browsers.
There is a problem with IE 8 and earlier when using the float property .If the !DOC TYPE declaration is missing IE8 and earlier version will add a 17px margin on the right side. This seems to be space reserved for a scroll bar. Always set the! DOC TYPE declaration when using the float property:
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:
selector:pseudo-class {property:value;}
CSS classes can also be used with pseudo-classes:
selector.class : pseudo-class {property:value}
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-Supporting browser:
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*/
Note:
a:hover MUST come after a :link and a:visited in the CSS defintionin 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.
Pseudo Classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
a:red:visited{color:#FF0000;}
<a class=”red”href=”css_syntax .asp”>CSS syntax</a>
If the link in the example above has been visited ,it will be displayed in red.
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 <!DOC TYPE> 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
<html>
<head>
<style type=”text/css”>
p:first-child
{
color:blue;
</style>
</head>
<body>
<p>Iam 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
<html>
<head>
<style type=”text/css”>
<p>:first-child
{
font-weight:bold;
}
</style>
</head>
<body>
<p>I am a <i> strong</i> man. I am a <i> strong</i> man.
<p>I am a <i> strong</i> man. I am a <i> strong</i> man.
</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
<html>
<head>
<style type=”text/csss”>
p:first –childi
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i> strong</i> man. I am a <i> strong</i> man.
<p>I am a <i> strong</i> man. I am a <i> strong</i> man.
</body>
</html>
CSS-The :lang Pseudo –class
The: lang pseudo –class allows you to define special rules for different languages.
Note:
IE 8 supports the :lang pseudo –class only if a <!DOC TYPE> is specified .
In the example below,the :lag class defines the quotation marks for q elements with lang=”no”:
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>
CSS Pseudo-elemets
CSS pseudo-elements are used to add special effects to some selectors.
Syntax
The syntax of pseudo-elements:
selector:pseudo-element{property:value;}
Syntax
The syntax of pseudo-elements:
selector:pseudo-elements{property:value;}
CSS classes can also be used with pseudo-elements:
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
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
- 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 to the first letter of a text.
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 :
p.article:first-letter{color:#ff0000;}
<p class=”article”> A paragraph in an article</p>
The example above will display the first letter of all paragraphs with class=”article”, in red.
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of paragraph will be red, in an xx-large. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be default size and color.
Example
p:first-letter
{
color:#ff0000;
font-size:XX-large;
}
p:first-line
{
color:#000000;
font-variant:small-caps;
CSS-The:before Pseudo-elements
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<hl> element:
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 :
h1:after
content:url(smiley.gif);
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> element 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” |