Scribd
Upload
3 views

CSS NOTES UC (2)

Uploaded by

Desi Kalakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS NOTES UC (2)

Uploaded by

Desi Kalakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

CSS

NOTES
BY
UC
CSS ( C ascading S tyle S heets)
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files

CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by
curly brackets:

p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like this:

Example
p
{
color:red;
text-align:center;
}

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a
later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:
CSS Notes by underrated coder Page 2
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

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

The id Selector
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


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:

Example
p.center {text-align:center;}

CSS Notes by underrated coder Page 3


Do NOT start a class name with a number! This is only supported in Internet Explorer.

When a browser reads a style sheet, it will format the document according to it.

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

 External style sheet


 Internal style sheet
 Inline style

External Style Sheet


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

An external style sheet can be written in any text editor. The file should not contain any html tags.
Your style sheet should be saved with a .css extension. An example of a style sheet file is shown
below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of
"margin-left:20px") will work in IE, but not in Firefox or Opera.

Internal Style Sheet

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

CSS Notes by underrated coder Page 4


Inline Styles
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets


For example, an external style sheet has these properties for the h3 selector:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20pt;
}

If the page with the internal style sheet also links to the external style sheet the properties for h3
will be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.

Multiple Styles Will Cascade into One


Styles can be specified:

 inside an HTML element


 inside the head section of an HTML page
 in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

CSS Notes by underrated coder Page 5


Cascading order

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

Note: If the link to the external style sheet is placed after the internal style sheet in HTML
<head>, the external style sheet will override the internal style sheet!

CSS Background
CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

Background Color
The background-color property specifies the background color of an element.

The background color of a page is defined in the body selector:

Example
body {background-color:#b0c4de;}

With CSS, a color is most often specified by:

 a HEX value - like "#ff0000"


 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"

Look at CSS Color Values for a complete list of possible color values.

In the example below, the h1, p, and div elements have different background colors:

Example

CSS Notes by underrated coder Page 6


h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

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

Below is an example of a bad combination of text and background image. The text is almost not
readable:

Example
body {background-image:url('bgdesert.jpg');}

Background Image - Repeat Horizontally or Vertically


By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

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

If the image is repeated only horizontally (repeat-x), the background will look better:

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

Background Image - Set position and no-repeat


When using a background image, use an image that does not disturb the text.

Showing the image only once is specified by the background-repeat property:

Example

CSS Notes by underrated coder Page 7


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

The position of the image is specified by the background-position property:

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

Background - Shorthand property


Example
body {background:#ffffff url('img_tree.png') no-repeat right top;}

When using the shorthand property the order of the property values are:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

It does not matter if one of the property values is missing, as long as the ones that are present
are in this order.

All CSS Background Properties


Property Description

background Sets all the background properties in one declaration

CSS Notes by underrated coder Page 8


background-attachment Sets whether a background image is fixed or scrolls with the rest of the
page

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

CSS Text
TEXT FORMATTING
This te xt is sty led with some of the text formatting
properties. The heading uses the t ext -align, text -trans form, and
color p roperties. The paragraph is indented, aligned, and the
space between characters is specified.

Text Color
The color property is used to set the color of the text.

With CSS, a color is most often specified by:

 a HEX value - like "#ff0000"


 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"

Look at CSS Color Values for a complete list of possible color values.

The default color for a page is defined in the body selector.

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

For W3C compliant CSS: If you define the color property, you must also define the background-
color property.

Text Alignment
The text-align property is used to set the horizontal alignment of a text.

Text can be centered, or aligned to the left or right, or justified.

CSS Notes by underrated coder Page 9


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

Text Decoration
The text-decoration property is used to set or remove decorations from text.

The text-decoration property is mostly used to remove underlines from links for design purposes:

Example
a {text-decoration:none;}

It can also be used to decorate text:

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

It is not recommended to underline text that is not a link, as this often confuses users.

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of
each word.

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

Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.

Example
p {text-indent:50px;}

All CSS Text Properties

CSS Notes by underrated coder Page 10


Property Description

color Sets the color of text

direction Specifies the text direction/writing direction

letter-spacing Increases or decreases the space between characters in a text

line-height Sets the line height

text-align Specifies the horizontal alignment of text

text-decoration Specifies the decoration added to text

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text

text-transform Controls the capitalization of text

unicode-bidi

vertical-align Sets the vertical alignment of an element

white-space Specifies how white-space inside an element is handled

word-spacing Increases or decreases the space between words in a text

CSS Font
CSS font properties define the font family, boldness, size, and the style of a text.

Difference Between Serif and Sans-serif Fonts

On computer screens, sans-serif fonts are considered easier to read than serif fonts.

CSS Notes by underrated coder Page 11


CSS Font Families
In CSS, there are two types of font family names:

 generic family - a group of font families with a similar look (like "Serif" or "Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")

Generic family Font family Description

Serif Times New Roman Serif fonts have small lines at the ends on some
characters
Georgia

Sans-serif Arial "Sans" means without - these fonts do not have


the lines at the ends of characters
Verdana

Monospace Courier New All monospace characters have the same width

Lucida Console

Font Family
The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser
does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font
in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like font-
family: "Times New Roman".

More than one font family is specified in a comma-separated list:

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

Font Style
The font-style property is mostly used to specify italic text.

This property has three values:

 normal - The text is shown normally


 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example

CSS Notes by underrated coder Page 12


p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Font Size
The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use font
size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

 Sets the text to a specified size


 Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
 Absolute size is useful when the physical size of the output is known

Relative size:

 Sets the size relative to surrounding elements


 Allows a user to change the text size in browsers

If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).

Set Font Size With Pixels


Setting the text size with pixels, gives you full control over the text size:

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

The example above allows Firefox, Chrome, and Safari to resize the text, but not Internet
Explorer.

The text can be resized in all browsers using the zoom tool (however, this resizes the entire page,
not just the text).

Set Font Size With Em

CSS Notes by underrated coder Page 13


The size can be calculated from pixels to em using this formula: pixels/16=em

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

Use a Combination of Percent and Em


The solution that works in all browsers, is to set a default font-size in percent for the body
element:

Example
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to
zoom or resize the text!

All CSS Font Properties


Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font

CSS Links
Links can be styled in different ways.

CSS Notes by underrated coder Page 14


Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Special for links are that they can be styled differently depending on what state they are in.

The four links states are:


 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

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

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

Common Link Styles


In the example above the link changes color depending on what state it is in.

Lets go through some of the other common ways to style links:

Text Decoration
The text-decoration property is mostly used to remove underlines from links:

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

Background Color
The background-color property specifies the background color for links:

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

CSS Notes by underrated coder Page 15


CSS Lists

The CSS list properties allow you to:

 Set different list item markers for ordered lists


 Set different list item markers for unordered lists
 Set an image as the list item marker

List
In HTML, there are two types of lists:

 unordered lists - the list items are marked with bullets


 ordered lists - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as the list item marker.

Different List Item Markers


The type of list item marker is specified with the list-style-type property:

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

Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker


To specify an image as the list item marker, use the list-style-image property:

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

CSS Notes by underrated coder Page 16


Crossbrowser Solution
The following example displays the image-marker equally in all browsers:

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

Example explained:

 For ul:
o Set the list-style-type to none to remove the list item marker
o Set both padding and margin to 0px (for cross-browser compatibility)
 For li:
o Set the URL of the image, and show it only once (no-repeat)
o Position the image where you want it (left 0px and down 5px)
o Position the text in the list with padding-left

List - Shorthand property


It is also possible to specify all the list properties in one, single property. This is called a shorthand
property.

The shorthand property used for lists, is the list-style property:

Example
ul
{
list-style: square url("sqpurple.gif");
}

When using the shorthand property, the order of the values are:

 list-style-type
 list-style-position (for a description, see the CSS properties table below)
 list-style-image

It does not matter if one of the values above are missing, as long as the rest are in the specified
order.

CSS Notes by underrated coder Page 17


All CSS List Properties
Property Description

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style-position Specifies if the list-item markers should appear inside or outside the content flow

list-style-type Specifies the type of list-item marker

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking
about design and layout.
The image below illustrates the box model:

Explanation of the different parts:

 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

CSS Notes by underrated coder Page 18


Width and Height of an Element
Important: When you set the width and height properties of an element with CSS, you just set
the width and height of the content area. To calculate the full size of an element, you must also
add the padding, borders and margins.

The total width of the element in the example below is 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Let's do the math:


250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

Assume that you had only 250px of space. Let's make an element with a total width of 250px:

CSS Outlines
Example
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

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

Total element width = width + left padding + right padding + left border + right border + left
margin + right margin

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

Total element height = height + top padding + bottom padding + top border + bottom border +
top margin + bottom margin

Browsers Compatibility Issue


The example above does not display properly in IE8 and earlier versions.

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:

Example
CSS Notes by underrated coder Page 19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

CSS Border
CSS Border Properties
The CSS border properties allow you to specify the style and color of an element's border.

Border Style
The border-style property specifies what kind of border to display.

None of the border properties will have ANY effect unless the border-style property is set!

border-style values:
none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border

double: Defines two borders. The width of the two borders are the same as the border-width value

groove: Defines a 3D grooved border. The effect depends on the border-color value

ridge: Defines a 3D ridged border. The effect depends on the border-color value

CSS Notes by underrated coder Page 20


inset: Defines a 3D inset border. The effect depends on the border-color value

outset: Defines a 3D outset border. The effect depends on the border-color value
Border Width
Note: The "border-width" property does not work if it is used alone. Use the "border-style"
property to set the borders first.

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

Border Color
The border-color property is used to set the color of the border. The color can be set by:

 name - specify a color name, like "red"


 RGB - specify a RGB value, like "rgb(255,0,0)"
 Hex - specify a hex value, like "#ff0000"

You can also set the border color to "transparent".

Note: The "border-color" property does not work if it is used alone. Use the "border-style"
property to set the borders first.

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

Border - Individual sides


In CSS it is possible to specify different borders for different sides:

CSS Notes by underrated coder Page 21


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

The example above can also be set with a single property:

Example
border-style:dotted solid;

The border-style property can have from one to four values.

 border-style:dotted solid double dashed;


o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
 border-style:dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double
 border-style:dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
 border-style:dotted;
o all four borders are dotted

The border-style property is used in the example above. However, it also works with border-width
and border-color.

Border - Shorthand property


The shorthand property for the border properties is "border":

Example
border:5px solid red;

When using the border property, the order of the values are:

 border-width
 border-style
 border-color

It does not matter if one of the values above are missing (although, border-style is required), as
long as the rest are in the specified order.
CSS Notes by underrated coder Page 22
All CSS Border Properties
border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders

CSS Notes by underrated coder Page 23


All CSS Outline Properties
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS

outline Sets all the outline properties in one declaration outline-color 2


outline-style
outline-width
inherit

outline-color Sets the color of an outline color_name 2


hex_number
rgb_number
invert
inherit

outline-style Sets the style of an outline none 2


dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

outline-width Sets the width of an outline thin 2


medium
thick
length
inherit

CSS Margin

The CSS margin properties define the space around elements.

Margin
The margin clears an area around an element (outside the border). The margin does not have a
background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.

CSS Notes by underrated coder Page 24


Possible Values
Value Description

auto The browser sets the margin.


The result of this is dependant of the browser

length Defines a fixed margin (in pixels, pt, em, etc.)

% Defines a margin in % of the containing element

It is possible to use negative values, to overlap content.

Margin - Individual sides


In CSS, it is possible to specify different margins for different sides:

Example
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Margin - Shorthand property


To shorten the code, it is possible to specify all the margin properties in one property. This is
called a shorthand property.

The shorthand property for all the margin properties is "margin":

Example
margin:100px 50px;

The margin property can have from one to four values.

 margin:25px 50px 75px 100px;


o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
 margin:25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
 margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px

CSS Notes by underrated coder Page 25


 margin:25px;
o all four margins are 25px

CSS Padding
The CSS padding properties define the space between the element border and the
element content.

Padding
The padding clears an area around the content (inside the border) of an element. The padding is
affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties.
A shorthand padding property can also be used, to change all paddings at once.

Possible Values
Value Description

length Defines a fixed padding (in pixels, pt, em, etc.)

% Defines a padding in % of the containing element

Padding - Individual sides


In CSS, it is possible to specify different padding for different sides:

Example
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

CSS Notes by underrated coder Page 26


Padding - Shorthand property
To shorten the code, it is possible to specify all the padding properties in one property. This is
called a shorthand property.

The shorthand property for all the padding properties is "padding":

Example
padding:25px 50px;

The padding property can have from one to four values.

 padding:25px 50px 75px 100px;


o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
 padding:25px 50px 75px;
o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px
 padding:25px 50px;
o top and bottom paddings are 25px
o right and left paddings are 50px
 padding:25px;
o all four paddings are 25px

All CSS Padding Properties


Property Description

padding A shorthand property for setting all the padding properties in one declaration

padding-bottom Sets the bottom padding of an element

padding-left Sets the left padding of an element

padding-right Sets the right padding of an element

padding-top Sets the top padding of an element

CSS Dimension

CSS Notes by underrated coder Page 27


The CSS dimension properties allow you to control the height and width of an
element.

All CSS Dimension Properties


The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS

height Sets the height of an element auto 1


length
%
inherit

max-height Sets the maximum height of an element none 2


length
%
inherit

max-width Sets the maximum width of an element none 2


length
%
inherit

min-height Sets the minimum height of an element length 2


%
inherit

min-width Sets the minimum width of an element length 2


%
inherit

width Sets the width of an element auto 1


length
%
inherit

CSS Display and Visibility

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

CSS Notes by underrated coder Page 28


Box 1

Box 2

Box 3

Hiding an Element - display:none or visibility:hidden


Hiding an element can be done by setting the display property to "none" or the visibility property
to "hidden". However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element
will be hidden, but still affect the layout.

Example
h1.hidden {visibility:hidden;}

display:none hides an element, and it will not take up any space. The element will be hidden, and
the page will be displayed as the element is not there:

Example
h1.hidden {display:none;}

CSS Display - Block and Inline 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>

CSS Notes by underrated coder Page 29


An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

 <span>
 <a>

Changing How an Element is Displayed


Changing an inline element to a block element, or vice versa, can be useful for making the page
look a specific way, and still follow web standards.

The following example displays list items as inline elements:

Example
li {display:inline;}

The following example displays span elements as block elements:

Example
span {display:block;}

Note: Changing the display type of an element changes only how the element is displayed, NOT
what kind of element it is. For example: An inline element set to display:block is not allowed to
have a block element nested inside of it.

CSS Positioning

Positioning can be tricky sometimes!

Decide which element to display in front!

Elements can overlap!

Positioning

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.

CSS Notes by underrated coder Page 30


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.

Fixed positioned elements are removed from the normal flow. The document and other elements
behave like the fixed positioned element does not exist.

Fixed positioned elements can overlap other elements.

Relative Positioning
A relative positioned element is positioned relative to its normal position.

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

The content of relatively positioned elements can be moved and overlap other elements, but the
reserved space for the element is still preserved in the normal flow.

Example
CSS Notes by underrated coder Page 31
h2.pos_top
{
position:relative;
top:-50px;
}

Relatively positioned elements are often used as container blocks for absolutely positioned
elements.

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

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
}

An element with greater stack order is always in front of an element with a lower stack order.

Note: If two positioned elements overlap, without a z-index specified, the element positioned last
in the HTML code will be shown on top.

All CSS Positioning Properties


CSS Notes by underrated coder Page 32
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS

bottom Sets the bottom margin edge for a auto 2


positioned box length
%
inherit

clip Clips an absolutely positioned element shape 2


auto
inherit

cursor Specifies the type of cursor to be displayed url 2


auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resizes-
resize w-
resize text
wait
help

left Sets the left margin edge for a positioned auto 2


box length
%
inherit

overflow Specifies what happens if content overflows auto 2


an element's box hidden
scroll
visible
inherit

position Specifies the type of positioning for an absolute 2


element fixed
relative
static
inherit

CSS Notes by underrated coder Page 33


What is CSS Float?

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap
around it.

Float is very often used for images, but it is also useful when working with layouts.

CSS Horizontal Align


In CSS, several properties are used to align elements horizontally.

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>

CSS Notes by underrated coder Page 34


In this chapter we will show you how to horizontally align block elements for layout purposes.

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.

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

CSS Notes by underrated coder Page 35


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

CSS Notes by underrated coder Page 36


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

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

CSS Notes by underrated coder Page 37


In the following example, the selector matches the first <i> element in all <p> elements:

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

CSS Notes by underrated coder Page 38


<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 Notes by underrated coder Page 39


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


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

CSS Notes by underrated coder Page 40


 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.

CSS Navigation Bar

Demo: Navigation Bar


 HOME
 NEWS
 ARTICLES
 FORUM
 CONTACT
 ABOUT

Navigation Bars
Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links


A navigation bar needs standard HTML as a base.

CSS Notes by Underrated coder Page 41


In our examples we will build the navigation bar from a standard HTML list.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect
sense:

Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

Example
ul
{
list-style-type:none;
margin:0;
padding:0;
}

CSS Notes by Underrated coder Page 42


Example explained:

 list-style-type:none - Removes the bullets. A navigation bar does not need list markers
 Setting margins and padding to 0 to remove browser default settings

The code in the example above is the standard code used in both vertical, and horizontal
navigation bars.

Vertical Navigation Bar


To build a vertical navigation bar we only need to style the <a> elements, in addition to the code
above:

Example
a
{
display:block;
width:60px;
}

Example explained:

 display:block - Displaying the links as block elements makes the whole link area clickable
(not just the text), and it allows us to specify the width
 width:60px - Block elements take up the full width available by default. We want to specify
a 60 px width

Note: Always specify the width for <a> elements in a vertical navigation bar. If you omit the
width, IE6 can produce unexpected results.

Horizontal Navigation Bar


There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Both methods work fine, but if you want the links to be the same size, you have to use the floating
method.

Inline List Items


One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to
the "standard" code above:

Example
li
{
display:inline;
}

Example explained:
CSS Notes by underrated coder Page 43
 display:inline; - By default, <li> elements are block elements. Here, we remove the line
breaks before and after each list item, to display them on one line

CSS Image Opacity / Transparency

Creating transparent images with CSS is easy.

Note: The CSS opacity property is a part of the W3C CSS3 recommendation.

Example 1 - Creating a Transparent Image


The CSS3 property for transparency is opacity.

First we will show you how to create a transparent image with CSS.

Regular image:

The same image with transparency:

Look at the following CSS:

IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity
property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value
makes the element more transparent.

CSS Notes by underrated coder Page 44


CSS Media Types

Media Types allow you to specify how documents will be presented in different
media. The document can be displayed differently on the screen, on the paper, with
an aural browser, etc.

Media Types
Some CSS properties are only designed for a certain media. For example the "voice-family"
property is designed for aural user agents. Some other properties can be used for different media
types. For example, the "font-size" property can be used for both screen and print media, but
perhaps with different values. A document usually needs a larger font-size on a screen than on
paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on
paper.

The @media Rule


<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
</head>

<body>
....
</body>
</html>
aural Used for speech and sound synthesizers

braille Used for braille tactile feedback devices

CSS Notes by underrated coder Page 45


embossed Used for paged braille printers

handheld Used for small or handheld devices

print Used for printers

projection Used for projected presentations, like slides

screen Used for computer screens

tty Used for media using a fixed-pitch character grid, like teletypes and terminals

tv Used for television-type devices

CSS Attribute Selectors

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
isNOT supported in IE6 and lower.

Attribute Selector
The example below styles all elements with a title attribute:

Example
[title]
{
color:blue;
}

CSS Notes by underrated coder Page 46


Attribute and Value Selector - Multiple Values
The example below styles all elements with a title attribute that contains a specified value. This
works even if the attribute has space separated values:

Example
[title~=hello] { color:blue; }

The example below styles all elements with a lang attribute that contains a specified value. This
works even if the attribute has hyphen ( - ) separated values:

Example
[lang|=en] { color:blue; }

Styling Forms
The attribute selectors are particularly useful for styling forms without class or ID:

Example
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}

CSS Summary
This tutorial has taught you how to create style sheets to control the style and layout of multiple
web sites at once.

CSS Notes by underrated coder Page 47


CSS Colors
Colors are displayed combining RED, GREEN, and BLUE light.

Color Values
CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and
Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex
00). The highest value is 255 (hex FF).

Hex values are written as 3 double digit numbers, starting with a # sign.

Color Examples
Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)

Web Safe Colors?


Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe
Colors" was suggested as a Web standard, reserving 40 fixed system colors.

This is not important now, since most computers can display millions of different colors, but the
choice is left to you.

The 216 cross-browser color palette was created to ensure that all computers would display the
colors correctly when running a 256 color palette:

CSS Notes by underrated coder Page 48


CSS Legal Color Values

CSS Colors
Colors in CSS can be specified by the following methods:

 Hexadecimal colors
 RGB colors
 RGBA colors
 HSL colors
 HSLA colors
 Predefined/Cross-browser color names

Hexadecimal Colors
Hexadecimal color values are supported in all major browsers.

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color. All values must be between 0 and FF.

For example, the #0000ff value is rendered as blue, because the blue component is set to its
highest value (ff) and the others are set to 0.

Example
p
{
background-color:#ff0000;
}

RGB Colors
RGB color values are supported in all major browsers.

An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue)
defines the intensity of the color and can be an integer between 0 and 255 or a percentage value
(from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its
highest value (255) and the others are set to 0.

Also, the following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).

Example
p
{
background-color:rgb(255,0,0);
}
CSS Notes by underrated coder Page 49
CSS Notes by underrated coder Page 50

You might also like