Css2

Front 1

css comment

Back 1

/* */

Front 2

id Selector

Back 2

#para1
{
text-align:center;
color:red;
}

Front 3

class Selector

Back 3

.center {text-align:center;}

Front 4

external style sheet

Front 5

internal style sheet

Front 6

inline styles

Back 6

This is a paragraph.

Front 7

Cascading order

Back 7

1)Browser default
2)External style sheet
3)Internal style sheet (in the head section)
4)Inline style (inside an HTML element)

Front 8

Background Color

Back 8

body {background-color:#b0c4de;}

Front 9

Background Image

Back 9

body {background-image:url('paper.gif');}

Front 10

repeat image horizontaly

Back 10

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Front 11

background image no repeat

Back 11

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Front 12

background image position

Back 12

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Front 13

CSS background-attachment

Back 13

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

Front 14

Text Color

Back 14

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Front 15

Text Alignment

Back 15

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Front 16

Text Decoration

Back 16

a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Front 17

Text Transformation

Back 17

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Front 18

Text Indentation

Back 18

p {text-indent:50px;}

Front 19

CSS direction Property

Back 19

div
{
direction:rtl;
}

Front 20

CSS letter-spacing Property

Back 20

h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}

Front 21

CSS line-height Property

Back 21

p.small {line-height:90%}
p.big {line-height:200%}

Front 22

CSS text-align Property

Back 22

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

Front 23

CSS white-space Property

Back 23

p
{
white-space:nowrap;
}

Front 24

CSS vertical-align Property

Back 24

img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}

Front 25

CSS word-spacing Property

Back 25

p
{
word-spacing:30px;
}

Front 26

Font Family

Back 26

p{font-family:"Times New Roman", Times, serif;}

Front 27

Font Style

Back 27

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)

Front 28

Font Size

Back 28

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

Front 29

CSS font-weight Property

Back 29

p.normal {font-weight:normal}
p.thick {font-weight:bold}
p.thicker {font-weight:900}

Front 30

The four links states are:

Back 30

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 */

Front 31

When setting the style for several link states, there are some order rules:

Back 31

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Front 32

Text Decoration for link

Back 32

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Front 33

Background hover

Back 33

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Front 34

Different List Item Markers

Back 34

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;}

Front 35

An Image as The List Item Marker

Back 35

ul
{
list-style-image: url('sqpurple.gif');
}

Front 36

Crossbrowser Solution for image bullets

Back 36

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; }

Front 37

CSS list-style-position Property

Back 37

ul
{
list-style-position:inside;
}

Front 38

The CSS Box Model

Back 38

+----------------------+
| Margin |
| +------------------+ |
| | Border | |
| | +--------------+ | |
| | | Padding | | |
| | | +----------+ | | |
| | | | Content | | | |
| | | | | | | |
| | | +----------+ | | |
| | +--------------+ | |
| +------------------+ |
+----------------------+

Front 39

CSS Box Mode Browsers Compatibility Issue

Back 39

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">

Front 40

border-style values

Back 40

dotted
dashed
solid
double
groove
ridge
inset
outset

Front 41

Border Width

Back 41

p.one {
border-style:solid;
border-width:5px;
}
p.two {
border-style:solid;
border-width:medium;
}

Front 42

Border Color

Back 42

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Front 43

Border - Individual sides

Back 43

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

Front 44

IE8 and outline

Back 44

IE8 supports the outline properties only if a !DOCTYPE is
specified

Front 45

CSS Outline Properties

Back 45

outline-color
outline-style
outline-width

Front 46

Margin

Back 46

p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}

Front 47

CSS Padding

Back 47

p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}

Front 48

Grouping Selectors

Back 48

h1,h2,p
{
color:green;
}

Front 49

Dimensions height

Back 49

img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}

Front 50

dimensions weight

Back 50

p
{
max-width:20%;
background-color:yellow;
}

Front 51

CSS Display inline

Back 51

li{display:inline;}

* HTML
* CSS
* JavaScript
* XML

HTML CSS JavaScript XML

Front 52

CSS Display span
displays span elements as block elements:

Back 52

span
{
display:block;
}

Front 53

Fixed Positioning

Back 53

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.

Front 54

Relative Positioning

Back 54

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Front 55

absolute Positioning

Back 55

h2
{
position:absolute;
left:100px;
top:150px;
}

Front 56

Overlapping Elements

Back 56

z-index property specifies the stack order of an element


img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

Front 57

clip Property

Back 57

Clip an image

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Front 58

cursor Property

Back 58

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

Front 59

left Property

Back 59

Set the left edge of the image 5px to the right of the left edge of its containing element:

img
{
position:absolute;
left:5px;
}

Front 60

CSS overflow Property

Set the overflow property to scroll

Back 60

div
{
width:150px;
height:150px;
overflow:scroll;
}

visible
hidden
scroll
auto
inherit

Front 61

CSS position Property value

Back 61

static
absolute
fixed
relative
inherit

Front 62

CSS right Property

Back 62

img
{
position:absolute;
right:5px;
}

Front 63

CSS top Property

Back 63

img
{
position:absolute;
top:5px;
}

Front 64

CSS Float

Back 64

img
{
float:right;
}

Front 65

Floating Elements Next to Each Other

Back 65

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Front 66

Turning off Float - Using Clear

Back 66

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;
}

Front 67

CSS float Property values

Back 67

left
right
none
inherit

Front 68

Center Aligning Using the margin Property

Back 68

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Front 69

Left and Right Aligning Using the position Property

Back 69

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Front 70

Left and Right Aligning Using the float Property

Back 70

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Front 71

CSS Pseudo-classes syntax

Back 71

selector:pseudo-class {property:value;}

Front 72

CSS classes can also be used with pseudo-classes:

Back 72

selector.class:pseudo-class {property:value;}

Front 73

Pseudo-classes and CSS Classes

Back 73

a.red:visited {color:#FF0000;}

CSS Syntax

Front 74

CSS - The :first-child Pseudo-class definition

Back 74

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.

Front 75

CSS - The :first-child Pseudo-class example

Back 75

I am a strong man.

I am a strong man.

Front 76

Match the first element in all

elements

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

Back 76

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Front 77

Match all elements in all first child

elements

Back 77

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Front 78

CSS - The :lang Pseudo-class

Back 78

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.

Front 79

All CSS Pseudo Classes/Elements

Back 79

: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
:first-line --- p:first-line --- Selects the first line of every

element
:first-child --- p:first-child --- Selects every

elements that is the first child of its parent
:before --- p:before --- Insert content before every

element
:after --- p:after --- Insert content after every

element
:lang(language) --- p:lang(it) --- Selects every

element with a lang attribute value starting with "it"

Front 80

CSS Pseudo-elements definition

Back 80

CSS pseudo-elements are used to add special effects to some selectors.

Front 81

CSS Pseudo-classes syntax

Back 81

selector:pseudo-class {property:value;}

Front 82

CSS classes can also be used with pseudo-classes:

Back 82

selector.class:pseudo-class {property:value;}

Front 83

Pseudo-classes and CSS Classes

Back 83

a.red:visited {color:#FF0000;}

CSS Syntax

Front 84

CSS - The :first-child Pseudo-class definition

Back 84

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.

Front 85

CSS - The :first-child Pseudo-class example

Back 85

I am a strong man.

I am a strong man.

Front 86

Match the first element in all

elements

Note: For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.

Back 86

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Front 87

Match all elements in all first child

elements

Back 87

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Front 88

CSS - The :lang Pseudo-class

Back 88

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.

Front 89

All CSS Pseudo Classes/Elements

Back 89

: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
:first-line --- p:first-line --- Selects the first line of every

element
:first-child --- p:first-child --- Selects every

elements that is the first child of its parent
:before --- p:before --- Insert content before every

element
:after --- p:after --- Insert content after every

element
:lang(language) --- p:lang(it) --- Selects every

element with a lang attribute value starting with "it"

Front 90

CSS Pseudo-elements definition

Back 90

CSS pseudo-elements are used to add special effects to some selectors.

Front 91

syntax of pseudo-elements:

Back 91

selector:pseudo-element {property:value;}

CSS classes can also be used with pseudo-elements:

selector.class:pseudo-element {property:value;}

Front 92

The :first-line Pseudo-element

Back 92

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Front 93

the following properties apply to the "first-line" pseudo-element

Back 93

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Front 94

The :first-letter Pseudo-element

Back 94

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Front 95

The following properties apply to the "first-letter" pseudo- element

Back 95

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

Front 96

Pseudo-elements and CSS Classes

Back 96

p.article:first-letter {color:#ff0000;}

A paragraph in an article

Front 97

Multiple Pseudo-elements

Back 97

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

Front 98

CSS - The :before Pseudo-element

Back 98

":before" pseudo-element can be used to insert some content before the content of an element.

h1:before {
content:url(smiley.gif);
}

Front 99

CSS - The :after Pseudo-element

Back 99

":after" pseudo-element can be used to insert some content after the content of an element

h1:after {
content:url(smiley.gif);
}

Front 100

Navigation Bar = List of Links

Back 100

* Home
* News
* Contact
* About

Front 101

CSS Navigation Bar

Back 101

--------CSS

---------HTML
* Home
* News
* Contact
* About

Front 102

Image Transparency mouse rollover

Back 102

----CSS

Front 103

Creating a Transparent Image

Back 103

style="opacity:0.4;filter:alpha(opacity=40)" />

Front 104

Text in Transparent Box

Back 104

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;
}

Front 105

Image Sprites definition

Back 105

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.

Front 106

Image Sprites example

Back 106

-----css

---html

Front 107

Image Sprites - Create a Navigation List

Back 107

*
*
*

Front 108

Image Sprites - Hover Effect

Back 108

*
*
*

Front 109

Style HTML Elements With Specific Attributes

Back 109

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.

Front 110

Attribute Selector

Back 110

Will apply to:
test
W3Schools

Will not apply to:

Hello!

Front 111

Attribute and Value Selector - Multiple Values

Back 111

Will apply to:
Hello world

Hello CSS students!

Will not apply to:

Hi CSS students!

Front 112

Styling Forms

Back 112

Firstname:
Lastname:

Front 113

border radius

Back 113

#example1 {
border-radius: 15px;
}

Front 114

border radius firefox fix

Back 114

#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}

Front 115

border tags

Back 115

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radiu

Front 116

child selector

Back 116

ul li { margin: 0 0 5px 0; }

Front 117

decendant selector

Back 117

ul > li { margin: 0 0 5px 0; }

will select any list items that are anywhere underneath an unordered list in the markup structure

Front 118

css web fonts

Back 118

@font-face {
font-family: "Fell";
src: url(idibod.otf);
}

Front 119

how to affect all tags in html file using css

Back 119

* { color:blue; }

Front 120

everything that is not class bucky will be colored red negation pseudo classes

Back 120

:not(.bucky) { color: red; }
---------------------------------
* { color:blue; }
:not(.bu) {color: red;}
---------------------------------

this will be blue

this will be red

this will be blue

Front 121

use of > in css

Back 121

div > p {color:green;}

all children of a div element will be green

Front 122

use of + in css

Back 122

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

Front 123

use of ~ in css

Back 123

affect the second element when any of its parent are like the first on
---------------------------------------
p.bu ~ p {color:blue;}
---------------------------------------

not blue

blue
not blue

blue cause of the ~

not blue

Front 124

css font sequence of parameters
(list)

Back 124

font: bold 20px Tahoma;

Front 125

how to affect all tags using css

Back 125

* {
margin: 0px;
padding: 0px;
}

Front 126

recommended css style to handle the different ways browsers handle padding and margin

Back 126

* {
margin: 0px;
padding: 0px;
}

Front 127

affect all

in a

Back 127

article p {
.....
}

Front 128

How to select an element that is the first or last child of its parent.

Back 128

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;}

Front 129

The id Selector (def)

Back 129

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.

Front 130

The class Selector (def)

Back 130

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;}

Front 131

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:

Back 131

p.center {text-align:center;}

Front 132

Three Ways to Insert CSS

Back 132

There are three ways of inserting a style sheet:

•External style sheet
•Internal style sheet
•Inline style

Front 133

CSS style sheet cascading order

Back 133

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!

Front 134

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.

Back 134

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

Front 135

Set Font Size With Em

Back 135

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 */

Front 136

Table Borders (code)

Back 136

table, th, td {
border: 1px solid black; }

Front 137

Collapse Borders

Back 137

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.

Front 138

Table Width and Height

Back 138

table {
width:100%; }
th {
height:50px; }

Front 139

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:

Back 139

td {
text-align:right; }

Front 140

Table Text Alignment

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Back 140

td {
height:50px;
vertical-align:bottom; }

Front 141

Table Padding

To control the space between the border and content in a table, use the padding property on td and th elements:

Back 141

td
{
padding:15px;
}

Front 142

Table Color

The example below specifies the color of the borders, and the text and background color of th elements:

Back 142

table, td, th {
border:1px solid green;
}
th {
background-color:green;
color:white; }

Front 143

Margin (def)

Back 143

Clears an area around the border. The margin does not have a background color, it is completely transparent

Front 144

The total width of an element should be calculated like this:
?
The total height of an element should be calculated like this:
?

Back 144

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

Front 145

Browsers Compatibility Issue

Back 145

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">

Front 146

border-style:dotted solid double dashed;

Back 146

◦top border is dotted
◦right border is solid
◦bottom border is double
◦left border is dashed

Front 147

border-style:dotted solid double;

Back 147

◦top border is dotted
◦right and left borders are solid
◦bottom border is double

Front 148

border-style:dotted solid;

Back 148

◦top and bottom borders are dotted
◦right and left borders are solid

Front 149

padding:25px 50px 75px 100px;

Back 149

◦top padding is 25px
◦right padding is 50px
◦bottom padding is 75px
◦left padding is 100px

Front 150

padding:25px 50px 75px;

Back 150

◦top padding is 25px
◦right and left paddings are 50px
◦bottom padding is 75px

Front 151

padding:25px 50px;

Back 151

◦top and bottom paddings are 25px
◦right and left paddings are 50px

Front 152

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":

Back 152

p {
color:blue;
text-align:center; }
.marked {
background-color:red; }
.marked p {
color:white; }

Front 153

CSS max-height Property

The max-height property sets the maximum height of an element.

Back 153

p
{
max-height:50px;
}

Front 154

CSS max-width Property

The max-width property sets the maximum width of an element.

Back 154

p
{
max-width:100px;
}

Front 155

CSS min-height Property

The min-height property sets the minimum height of an element

Back 155

p
{
min-height:100px;
}

Front 156

CSS min-width Property

The min-width property sets the minimum width of an element.

Back 156

p
{
min-width:1000px;
}

Front 157

CSS min-width Property

The min-width property sets the minimum width of an element.

Back 157

p
{
min-width:1000px;
}

Front 158

CSS Display def

Back 158

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

Front 159

Hiding an element can be done by setting the

Back 159

display property to "none"
or the
visibility property to "hidden"

h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

Front 160

CSS Display - Block

Back 160

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:

•
•

Front 161

The following example displays list items as inline elements:

Back 161

li {display:inline;}

Front 162

The following example displays span elements as block elements:

Back 162

span {display:block;}

Front 163

Positioning

Back 163

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.

Front 164

Static Positioning

Back 164

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.

Front 165

Fixed Positioning

Back 165

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.

Front 166

Relative Positioning

Back 166

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;
}

Front 167

Absolute Positioning

Back 167

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.

Front 168

Overlapping Elements

Back 168

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;
}

Front 169

Aligning Block Elements

Back 169

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:

•
•

•

Front 170

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:

Back 170

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Tip: Aligning has no effect if the width is 100%.

Front 171

Left and Right Aligning Using the position Property
One method of aligning elements is to use absolute positioning:

Back 171

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements

Front 172

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:

Back 172

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

Front 173

Left and Right Aligning Using the float Property
One method of aligning elements is to use the float property:

Back 173

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Front 174

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:

Back 174

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

Front 175

Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:

Back 175

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 */

Front 176

Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:

Back 176

a.red:visited {color:#FF0000;}

CSS Syntax

Front 177

In the following example, the selector matches any

element that is the first child of any element:

Back 177

p:first-child
{
color:blue;
}

Front 178

In the following example, the selector matches the first element in all

elements:

Back 178

p > i:first-child
{
color:blue;
}

Front 179

In the following example, the selector matches all elements in

elements that are the first child of another element:

Back 179

p:first-child i
{
color:blue;
}

Front 180

CSS - The :lang Pseudo-class

Back 180

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.

Front 181

Creating a Transparent Image

Back 181

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Front 182

Image Transparency - Hover Effect

Back 182

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 */
}

Front 183

Text in Transparent Box

Back 183

This is some text that is placed in the transparent box.

Front 184

method of central aligning a div to the whole page

Back 184

#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

Front 185

best method to center a div in a window

Back 185

#content {
margin: 0 auto;
width: 700px;
}

Front 186

center a container on a page using div and body

Back 186

body {
margin: 0auto;
background:#ccc; }
#container {
margin: 0 auto;
width: 600px;
border: 1px solid black; }
----------------------------------------

Front 187

can we use an external css styles that are not stored in file with extension that is not css

Back 187

Yes

<'link rel="stylesheet" type="text/css" href="styles.txt" />