Use LEFT and RIGHT arrow keys to navigate between flashcards;
Use UP and DOWN arrow keys to flip the card;
H to show hint;
A reads text to speech;
187 Cards in this Set
- Front
- Back
css comment
|
/* */
|
|
id Selector
|
#para1
{ text-align:center; color:red; } |
|
class Selector
|
.center {text-align:center;}
|
|
external style sheet
|
|
|
internal style sheet
|
|
|
inline styles
|
This is a paragraph. |
|
Cascading order
|
1)Browser default
2)External style sheet 3)Internal style sheet (in the head section) 4)Inline style (inside an HTML element) |
|
Background Color
|
body {background-color:#b0c4de;}
|
|
Background Image
|
body {background-image:url('paper.gif');}
|
|
repeat image horizontaly
|
body
{ background-image:url('gradient2.png'); background-repeat:repeat-x; } |
|
background image no repeat
|
body
{ background-image:url('img_tree.png'); background-repeat:no-repeat; } |
|
background image position
|
body
{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; } |
|
CSS background-attachment
|
body
{ background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } scroll - The background image scrolls with the rest of the page. This is default fixed - The background image is fixed inherit - Specifies that the setting of the background-attachment property should be inherited from the parent element |
|
Text Color
|
body {color:blue;}
h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} |
|
Text Alignment
|
h1 {text-align:center;}
p.date {text-align:right;} p.main {text-align:justify;} |
|
Text Decoration
|
a {text-decoration:none;}
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} |
|
Text Transformation
|
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} |
|
Text Indentation
|
p {text-indent:50px;}
|
|
CSS direction Property
|
div
{ direction:rtl; } |
|
CSS letter-spacing Property
|
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px} |
|
CSS line-height Property
|
p.small {line-height:90%}
p.big {line-height:200%} |
|
CSS text-align Property
|
h1 {text-align:center}
h2 {text-align:left} h3 {text-align:right} |
|
CSS white-space Property
|
p
{ white-space:nowrap; } |
|
CSS vertical-align Property
|
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;} |
|
CSS word-spacing Property
|
p
{ word-spacing:30px; } |
|
Font Family
|
p{font-family:"Times New Roman", Times, serif;}
|
|
Font Style
|
p.normal {font-style:normal;}
p.italic {font-style:italic;} p.oblique {font-style:oblique;} •oblique - The text is "leaning" (oblique is very similar to italic, but less supported) |
|
Font Size
|
h1 {font-size:40px;}
h2 {font-size:30px;} p {font-size:14px;} |
|
CSS font-weight Property
|
p.normal {font-weight:normal}
p.thick {font-weight:bold} p.thicker {font-weight:900} |
|
The four links states are:
|
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 */ |
|
When setting the style for several link states, there are some order rules:
|
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover |
|
Text Decoration for link
|
a:link {text-decoration:none;}
a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} |
|
Background hover
|
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;} |
|
Different List Item Markers
|
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;} |
|
An Image as The List Item Marker
|
ul
{ list-style-image: url('sqpurple.gif'); } |
|
Crossbrowser Solution for image bullets
|
ul {
list-style-type: none; padding: 0px; margin: 0px; } li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; } |
|
CSS list-style-position Property
|
ul
{ list-style-position:inside; } |
|
The CSS Box Model
|
+----------------------+
| Margin | | +------------------+ | | | Border | | | | +--------------+ | | | | | Padding | | | | | | +----------+ | | | | | | | Content | | | | | | | | | | | | | | | +----------+ | | | | | +--------------+ | | | +------------------+ | +----------------------+ |
|
CSS Box Mode Browsers Compatibility Issue
|
div.ex
{ width:220px; padding:10px; border:5px solid gray; margin:0px; } IE8 and earlier versions includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared. To fix this problem, just add a DOCTYPE to the code: br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
border-style values
|
dotted
dashed solid double groove ridge inset outset |
|
Border Width
|
p.one {
border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; } |
|
Border Color
|
p.one
{ border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; } |
|
Border - Individual sides
|
p
{ border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } |
|
IE8 and outline
|
IE8 supports the outline properties only if a !DOCTYPE is
specified |
|
CSS Outline Properties
|
outline-color
outline-style outline-width |
|
Margin
|
p.margin
{ margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } |
|
CSS Padding
|
p.padding
{ padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } |
|
Grouping Selectors
|
h1,h2,p
{ color:green; } |
|
Dimensions height
|
img.normal
{ height:auto; } img.big { height:120px; } p.ex { height:100px; width:100px; } |
|
dimensions weight
|
p
{ max-width:20%; background-color:yellow; } |
|
CSS Display inline
|
li{display:inline;}
* HTML * CSS * JavaScript * XML HTML CSS JavaScript XML |
|
CSS Display span
displays span elements as block elements: |
span
{ display:block; } |
|
Fixed Positioning
|
p.pos_fixed
{ position:fixed; top:30px; right:5px; } Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified. |
|
Relative Positioning
|
h2.pos_left
{ position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } |
|
absolute Positioning
|
h2
{ position:absolute; left:100px; top:150px; } |
|
Overlapping Elements
|
z-index property specifies the stack order of an element
img { position:absolute; left:0px; top:0px; z-index:-1 } |
|
clip Property
|
Clip an image
img { position:absolute; clip:rect(0px,60px,200px,0px); } |
|
cursor Property
|
auto
auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait |
|
left Property
|
Set the left edge of the image 5px to the right of the left edge of its containing element:
img { position:absolute; left:5px; } |
|
CSS overflow Property
Set the overflow property to scroll |
div
{ width:150px; height:150px; overflow:scroll; } visible hidden scroll auto inherit |
|
CSS position Property value
|
static
absolute fixed relative inherit |
|
CSS right Property
|
img
{ position:absolute; right:5px; } |
|
CSS top Property
|
img
{ position:absolute; top:5px; } |
|
CSS Float
|
img
{ float:right; } |
|
Floating Elements Next to Each Other
|
.thumbnail
{ float:left; width:110px; height:90px; margin:5px; } |
|
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. Add a text line into the image gallery, using the clear property: .text_line { clear:both; } |
|
CSS float Property values
|
left
right none inherit |
|
Center Aligning Using the margin Property
|
.center
{ margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } |
|
Left and Right Aligning Using the position Property
|
.right
{ position:absolute; right:0px; width:300px; background-color:#b0e0e6; } |
|
Left and Right Aligning Using the float Property
|
.right
{ float:right; width:300px; background-color:#b0e0e6; } |
|
CSS Pseudo-classes syntax
|
selector:pseudo-class {property:value;}
|
|
CSS classes can also be used with pseudo-classes:
|
selector.class:pseudo-class {property:value;}
|
|
Pseudo-classes and CSS Classes
|
a.red:visited {color:#FF0000;}
CSS Syntax |
|
CSS - The :first-child Pseudo-class definition
|
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 must be declared. |
|
CSS - The :first-child Pseudo-class example
|
I am a strong man. I am a strong man. |
|
Match the first element in all
elements |
I am a strong man. I am a strong man. I am a strong man. I am a strong man. |
|
Match all elements in all first child
elements |
I am a strong man. I am a strong man. I am a strong man. I am a strong man. |
|
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 is specified. |
|
All CSS Pseudo Classes/Elements
|
: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 element element elements that is the first child of its parent element element element with a lang attribute value starting with "it" |
|
CSS Pseudo-elements definition
|
CSS pseudo-elements are used to add special effects to some selectors.
|
|
CSS Pseudo-classes syntax
|
selector:pseudo-class {property:value;}
|
|
CSS classes can also be used with pseudo-classes:
|
selector.class:pseudo-class {property:value;}
|
|
Pseudo-classes and CSS Classes
|
a.red:visited {color:#FF0000;}
CSS Syntax |
|
CSS - The :first-child Pseudo-class definition
|
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 must be declared. |
|
CSS - The :first-child Pseudo-class example
|
I am a strong man. I am a strong man. |
|
Match the first element in all
elements |
I am a strong man. I am a strong man. I am a strong man. I am a strong man. |
|
Match all elements in all first child
elements |
I am a strong man. I am a strong man. I am a strong man. I am a strong man. |
|
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 is specified. |
|
All CSS Pseudo Classes/Elements
|
: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 element element elements that is the first child of its parent element element element with a lang attribute value starting with "it" |
|
CSS Pseudo-elements definition
|
CSS pseudo-elements are used to add special effects to some selectors.
|
|
syntax of pseudo-elements:
|
selector:pseudo-element {property:value;}
CSS classes can also be used with pseudo-elements: selector.class:pseudo-element {property:value;} |
|
The :first-line Pseudo-element
|
p:first-line
{ color:#ff0000; font-variant:small-caps; } |
|
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
|
p:first-letter
{ color:#ff0000; font-size:xx-large; } |
|
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
|
p.article:first-letter {color:#ff0000;}
A paragraph in an article |
|
Multiple Pseudo-elements
|
p:first-letter {
color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; } |
|
CSS - The :before Pseudo-element
|
":before" pseudo-element can be used to insert some content before the content of an element.
h1:before { content:url(smiley.gif); } |
|
CSS - The :after Pseudo-element
|
":after" pseudo-element can be used to insert some content after the content of an element
h1:after { content:url(smiley.gif); } |
|
Navigation Bar = List of Links
|
* Home
* News * Contact * About |
|
CSS Navigation Bar
|
--------CSS
---------HTML * Home * News * Contact * About |
|
Image Transparency mouse rollover
|
----CSS
|
|
Creating a Transparent Image
|
style="opacity:0.4;filter:alpha(opacity=40)" />
|
|
Text in Transparent Box
|
div.transbox
{ width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid black; /* for IE */ filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } |
|
Image Sprites definition
|
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. |
|
Image Sprites example
|
-----css
---html |
|
Image Sprites - Create a Navigation List
|
* * * |
|
Image Sprites - Hover Effect
|
* * * |
|
Style HTML Elements With Specific Attributes
|
It is possible to style HTML elements that have specific attributes, not just class and id.
Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower. |
|
Attribute Selector
|
Will apply to:
test W3Schools Will not apply to: Hello! |
|
Attribute and Value Selector - Multiple Values
|
Will apply to: Hello world Hello CSS students! Will not apply to: Hi CSS students! |
|
Styling Forms
|
Firstname: Lastname: |
|
border radius
|
#example1 {
border-radius: 15px; } |
|
border radius firefox fix
|
#example1 {
-moz-border-radius: 15px; border-radius: 15px; } |
|
border tags
|
border-radius
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radiu |
|
child selector
|
ul li { margin: 0 0 5px 0; }
|
|
decendant selector
|
ul > li { margin: 0 0 5px 0; }
will select any list items that are anywhere underneath an unordered list in the markup structure |
|
css web fonts
|
@font-face {
font-family: "Fell"; src: url(idibod.otf); } |
|
how to affect all tags in html file using css
|
* { color:blue; }
|
|
everything that is not class bucky will be colored red negation pseudo classes
|
:not(.bucky) { color: red; }
--------------------------------- * { color:blue; } :not(.bu) {color: red;} --------------------------------- this will be blue this will be red this will be blue |
|
use of > in css
|
div > p {color:green;}
all children of a div element will be green |
|
use of + in css
|
affect the second element when it immediately follows the first on
--------------------------------------- p.bu + p {color:blue;} --------------------------------------- when we have a paragraph that follows another paragraph with class bucky |
|
use of ~ in css
|
affect the second element when any of its parent are like the first on
--------------------------------------- p.bu ~ p {color:blue;} --------------------------------------- not blue blue blue cause of the ~ not blue |
|
css font sequence of parameters
(list) |
font: bold 20px Tahoma;
|
|
how to affect all tags using css
|
* {
margin: 0px; padding: 0px; } |
|
recommended css style to handle the different ways browsers handle padding and margin
|
* {
margin: 0px; padding: 0px; } |
|
affect all
in a |
article p {
..... } |
|
How to select an element that is the first or last child of its parent.
|
The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.
div#test p:first-child {text-decoration: underline;} div#test p:last-child {color: red;} |
|
The id Selector (def)
|
The 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 "#". The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; } Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. |
|
The class Selector (def)
|
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.
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 "." In the example below, all HTML elements with class="center" will be center-aligned: Example .center {text-align:center;} |
|
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned: |
p.center {text-align:center;}
|
|
Three Ways to Insert CSS
|
There are three ways of inserting a style sheet:
•External style sheet •Internal style sheet •Inline style |
|
CSS style sheet cascading order
|
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1.Browser default 2.External style sheet 3.Internal style sheet (in the head section) 4.Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML , the external style sheet will override the internal style sheet! |
|
Background - Shorthand property
To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property. |
body {background:#ffffff url('img_tree.png') no-repeat right top;}
When using the shorthand property the order of the property values is: •background-color •background-image •background-repeat •background-attachment •background-position |
|
Set Font Size With Em
|
To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels.
The em size unit is recommended by the W3C. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ |
|
Table Borders (code)
|
table, th, td {
border: 1px solid black; } |
|
Collapse Borders
|
The border-collapse property sets whether the table borders are collapsed into a single border or separated:
table { border-collapse:collapse; } table, td, th { border:1px solid black; } Note: If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions. |
|
Table Width and Height
|
table {
width:100%; } th { height:50px; } |
|
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center: |
td {
text-align:right; } |
|
Table Text Alignment
The vertical-align property sets the vertical alignment, like top, bottom, or middle: |
td {
height:50px; vertical-align:bottom; } |
|
Table Padding
To control the space between the border and content in a table, use the padding property on td and th elements: |
td
{ padding:15px; } |
|
Table Color
The example below specifies the color of the borders, and the text and background color of th elements: |
table, td, th {
border:1px solid green; } th { background-color:green; color:white; } |
|
Margin (def)
|
Clears an area around the border. The margin does not have a background color, it is completely transparent
|
|
The total width of an element should be calculated like this:
? The total height of an element should be calculated like this: ? |
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
------------------------------------------- Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin |
|
Browsers Compatibility Issue
|
IE8 and earlier versions includes padding and border in the width, if a DOCTYPE is NOT declared.
To fix this problem, just add a DOCTYPE to the HTML page: br />"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
border-style:dotted solid double dashed;
|
◦top border is dotted
◦right border is solid ◦bottom border is double ◦left border is dashed |
|
border-style:dotted solid double;
|
◦top border is dotted
◦right and left borders are solid ◦bottom border is double |
|
border-style:dotted solid;
|
◦top and bottom borders are dotted
◦right and left borders are solid |
|
padding:25px 50px 75px 100px;
|
◦top padding is 25px
◦right padding is 50px ◦bottom padding is 75px ◦left padding is 100px |
|
padding:25px 50px 75px;
|
◦top padding is 25px
◦right and left paddings are 50px ◦bottom padding is 75px |
|
padding:25px 50px;
|
◦top and bottom paddings are 25px
◦right and left paddings are 50px |
|
Nesting Selectors
It is possible to apply a style for a selector within a selector. In the example below, one style is specified for all p elements, one style is specified for all elements with class="marked", and a third style is specified only for p elements within elements with class="marked": |
p {
color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } |
|
CSS max-height Property
The max-height property sets the maximum height of an element. |
p
{ max-height:50px; } |
|
CSS max-width Property
The max-width property sets the maximum width of an element. |
p
{ max-width:100px; } |
|
CSS min-height Property
The min-height property sets the minimum height of an element |
p
{ min-height:100px; } |
|
CSS min-width Property
The min-width property sets the minimum width of an element. |
p
{ min-width:1000px; } |
|
CSS min-width Property
The min-width property sets the minimum width of an element. |
p
{ min-width:1000px; } |
|
CSS Display def
|
The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
|
|
Hiding an element can be done by setting the
|
display property to "none"
or the visibility property to "hidden" h1.hidden {visibility:hidden;} h1.hidden {display:none;} |
|
CSS Display - Block
|
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: • •
An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: • • |
|
The following example displays list items as inline elements:
|
li {display:inline;}
|
|
The following example displays span elements as block elements:
|
span {display:block;}
|
|
Positioning
|
The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods. |
|
Static Positioning
|
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties. |
|
Fixed Positioning
|
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled: Example p.pos_fixed { position:fixed; top:30px; right:5px; } Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified. |
|
Relative Positioning
|
A relative positioned element is positioned relative to its normal position.
h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } |
|
Absolute Positioning
|
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is :
Example h2 { position:absolute; left:100px; top:150px; } Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements. |
|
Overlapping Elements
|
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order: Example img { position:absolute; left:0px; top:0px; z-index:-1; } |
|
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: • •
|
|
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: |
.center
{ margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } Tip: Aligning has no effect if the width is 100%. |
|
Left and Right Aligning Using the position Property
One method of aligning elements is to use absolute positioning: |
.right
{ position:absolute; right:0px; width:300px; background-color:#b0e0e6; } Note: Absolute positioned elements are removed from the normal flow, and can overlap elements |
|
Crossbrowser Compatibility Issues
When aligning elements like this, it is always a good idea to predefine margin and padding for the 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 ) 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: |
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: |
.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 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: |
body
{ margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6; } |
|
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser: |
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: |
a.red:visited {color:#FF0000;}
CSS Syntax |
|
In the following example, the selector matches any
element that is the first child of any element: |
p:first-child
{ color:blue; } |
|
In the following example, the selector matches the first element in all
elements: |
p > i:first-child
{ color:blue; } |
|
In the following example, the selector matches all elements in
elements that are the first child of another element: |
p:first-child i
{ color:blue; } |
|
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 is specified. |
|
Creating a Transparent Image
|
img
{ opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } |
|
Image Transparency - Hover Effect
|
img {
opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } |
|
Text in Transparent Box
|
This is some text that is placed in the transparent box. |
|
method of central aligning a div to the whole page
|
#content {
position: absolute; left: 50%; margin-left: -350px; width: 700px; } 1)first set the left to 50% to 2)second set the margin-left to negative half of the width of the div |
|
best method to center a div in a window
|
#content {
margin: 0 auto; width: 700px; } |
|
center a container on a page using div and body
|
body {
margin: 0auto; background:#ccc; } #container { margin: 0 auto; width: 600px; border: 1px solid black; } ---------------------------------------- |
|
can we use an external css styles that are not stored in file with extension that is not css |
Yes <'link rel="stylesheet" type="text/css" href="styles.txt" /> |