CSS Tutorial
Save a lot of work with CSS!
In our CSS tutorial you will learn how to use CSS to control the
style and layout of multiple Web pages all at once.
Examples
in Each Chapter
This CSS tutorial contains hundreds of CSS
examples.
With our online editor, you can edit the CSS,
and click on a button to view the result.
CSS
Example
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
,,,,,,,,,,
CSS Introduction
What You
Should Already Know
Before you continue you should have a basic
understanding of the following:
If you want to study these subjects first,
find the tutorials on our Home page.
What is
CSS?
- 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 Demo
Styles
Solved a Big Problem
HTML was never intended to contain tags for
formatting a document.
HTML was intended to define the content of a
document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color
attributes were added to the HTML 3.2 specification, it started a nightmare for
web developers. Development of large web sites, where fonts and color
information were added to every single page, became a long and expensive
process.
To solve this problem, the World Wide Web
Consortium (W3C) created CSS.
In HTML 4.0, all formatting could be removed
from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.
CSS Saves
a Lot of Work!
CSS defines HOW HTML elements are to be
displayed.
Styles are normally saved in external .css
files. External style sheets enable you to change the appearance and layout of
all the pages in a Web site, just by editing one single file!
CSS
Syntax
A CSS rule set consists of a selector and a
declaration block:
The selector points to the HTML element you
want to style.
The declaration block contains one or more
declarations separated by semicolons.
Each declaration includes a property name and
a value, separated by a colon.
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 starts with /* and ends with */.
Comments can also span multiple lines:
Example
/*This is a multiple
lines comment*/
p
{
color:red;
/*This is another comment*/
text-align:center;
}
CSS
Selectors
CSS selectors allow you to select and
manipulate HTML element(s).
CSS selectors are used to "find" (or
select) HTML elements based on their id, classes, types, attributes, values of
attributes and much more.
The
element Selector
The element selector selects elements based on
the element name.
You can select all <p> elements on a
page like this: (all <p> elements will be center-aligned, with a red text
color)
Example
p
{
text-align:center;
color:red;
}
The id
Selector
The id selector uses the id attribute of an
HTML tag to find the specific element.
An id should be unique within a page, so you
should use the id selector when you want to find a single, unique element.
To find an element with a specific id, write a
hash character, followed by the id of the element.
The style rule below will be applied to the
HTML element with id="para1":
Example
#para1
{
text-align:center;
color:red;
}
|
|
Do NOT start an ID name with a number!
|
The class
Selector
The class selector finds elements with the
specific class.
The class selector uses the HTML class
attribute.
To find elements with a specific class, write
a period character, followed by the name of the class:
In the example below, all HTML elements with
class="center" will be center-aligned:
Example
.center
{
text-align:center;
color:red;
}
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;
color:red;
}
|
|
Do NOT start a class name with a number!
|
Grouping
Selectors
In style sheets there are often elements with
the same style:
h1
{
text-align:center;
color:red;
}
h2
{
text-align:center;
color:red;
}
p
{
text-align:center;
color:red;
}
To minimize the code, you can group selectors.
To group selectors, separate each selector
with a comma.
In the example below we have grouped the
selectors from the code above:
Example
h1,h2,p
{
text-align:center;
color:red;
}
CSS How To...
When
a browser reads a style sheet, it will format the document according to the
information in the style sheet.
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
An external style sheet is
ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing just one file.
Each page must link to the
style sheet with the <link> tag. The <link> tag goes inside the
head section:
<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. The
style sheet file must 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/background.gif");}
|
|
Do not add a space between
the property value and the unit (such as margin-left:20 px). The correct way
is: margin-left:20px
|
Internal Style Sheet
An internal style sheet
should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, inside the <style> tag, like
this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/background.gif");}
</style>
</head>
Inline Styles
An inline style loses many of
the advantages of a style sheet (by mixing content with presentation). Use this
method sparingly!
To use inline styles, add the
style attribute to the relevant tag. The style attribute can contain any CSS
property. The example shows how to change the color and the left margin of a
paragraph:
<p
style="color:sienna;margin-left:20px;">This is a
paragraph.</p>
Multiple Style Sheets
If some properties have been
set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
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 the h3
element 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.
Cascading
order
What style will be used when
there is more than one style specified for an HTML element?
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:
- Browser
default
- External
style sheet
- Internal
style sheet (in the head section)
- 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 <head> 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 <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"
In the example below, the h1, p, and div
elements have different background colors:
Example
h1
{background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background
Image
The background-image property specifies an
image to use as the background of an element.
By default, the image is repeated so it covers
the entire element.
The background image for a page can be set
like this:
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
|
|
Note: 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
body
{
background-image:url("img_tree.png");
background-repeat:no-repeat;
}
In the example above, the background image is
shown in the same place as the text. We want to change the position of the
image, so that it does not disturb the text too much.
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
As you can see from the examples above, there
are many properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to
specify all the properties in one single property. This is called a shorthand
property.
The shorthand property for background is
simply "background":
Example
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
It does not matter if one of the property
values is missing, as long as the ones that are present are in this order.
More Examples
All CSS
Background Properties
|
Property
|
Description
|
|
|
Sets all the background properties in one declaration
|
|
|
Sets whether a background image is fixed or scrolls with the
rest of the page
|
|
|
Sets the background color of an element
|
|
|
Sets the background image for an element
|
|
|
Sets the starting position of a background image
|
|
|
Sets how a background image will be repeated
|
CSS Text
TEXT FORMATTING
This text is styled with some of the text formatting
properties. The heading uses the text-align, text-transform, and color
properties. The paragraph is indented, aligned, and the space between
characters is specified. The underline is removed from the "Try
it yourself" link.
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"
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);}
|
|
Note: 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.
When text-align is set to "justify",
each line is stretched so that every line has equal width, and the left and
right margins are straight (like in magazines and newspapers).
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;}
|
|
Note: 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-indent property is used to specify
the indentation of the first line of a text.
Example
p {text-indent:50px;}
CSS Font
CSS font properties define the font family,
boldness, size, and the style of a text.
Difference
Between Serif and Sans-serif Fonts
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
Georgia
|
Serif fonts have small lines at the ends on some characters
|
|
Sans-serif
|
Arial
Verdana
|
"Sans" means without - these fonts do not have the
lines at the ends of characters
|
|
Monospace
|
Courier New
Lucida
Console
|
All monospace characters have the same width
|
|
|
Note: On
computer screens, sans-serif fonts are considered easier to read than serif
fonts.
|
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: "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
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
|
|
Note: 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 Internet Explorer 9,
Firefox, Chrome, Opera, and Safari to resize the text.
Note: The example above does not work in IE, prior version 9.
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
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.
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 */
In the example above, the text size in em is
the same as the previous example in pixels. However, with the em size, it is
possible to adjust the text size in all browsers.
Unfortunately, there is still a problem with
older versions of IE. The text becomes larger than it should when made larger,
and smaller than it should when made smaller.
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!
CSS Links
Links can be styled in different ways.
Styling
Links
Links can be styled with any CSS property
(e.g. color, font-family, background, etc.).
In addition, links 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;}
More Examples
Advanced - Create link
boxes
This example demonstrates a more advanced example where we combine several CSS
properties to display links as boxes.
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');
}
The example above does not display equally in
all browsers. IE and Opera will display the image-marker a little bit higher
than Firefox, Chrome, and Safari.
If you want the image-marker to be placed
equally in all browsers, a crossbrowser solution is explained below.
Crossbrowser
Solution
The following example displays the
image-marker equally in all browsers:
Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
Example explained:
- For
ul:
- Set
the list-style-type to none to remove the list item marker
- Set
both padding and margin to 0px (for cross-browser compatibility)
- For
all li in ul:
- Set
the URL of the image, and show it only once (no-repeat)
- Position
the image where you want it (left 0px and down 5px)
- 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.
More Examples
All CSS
List Properties
|
Property
|
Description
|
|
|
Sets all the properties for a list in one declaration
|
|
|
Specifies an image as the list-item marker
|
|
|
Specifies if the list-item markers should appear inside or
outside the content flow
|
|
|
Specifies the type of list-item marker
|
CSS Tables
The look of an HTML table can be greatly
improved with CSS:
|
Company
|
Contact
|
Country
|
|
Alfreds Futterkiste
|
Maria Anders
|
Germany
|
|
Berglunds snabbköp
|
Christina Berglund
|
Sweden
|
|
Centro comercial Moctezuma
|
Francisco Chang
|
Mexico
|
|
Ernst Handel
|
Roland Mendel
|
Austria
|
|
Island Trading
|
Helen Bennett
|
UK
|
|
Königlich Essen
|
Philip Cramer
|
Germany
|
|
Laughing Bacchus Winecellars
|
Yoshi Tannamuri
|
Canada
|
|
Magazzini Alimentari Riuniti
|
Giovanni Rovelli
|
Italy
|
|
North/South
|
Simon Crowther
|
UK
|
|
Paris spécialités
|
Marie Bertrand
|
France
|
|
The Big Cheese
|
Liz Nixon
|
USA
|
|
Vaffeljernet
|
Palle Ibsen
|
Denmark
|
Table
Borders
To specify table borders in CSS, use the
border property.
The example below specifies a black border for
table, th, and td elements:
Example
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has
double borders. This is because both the table and the th/td elements have
separate borders.
To display a single border for the table, use
the border-collapse property.
Collapse
Borders
The border-collapse property sets whether the
table borders are collapsed into a single border or separated:
Example
table
{
border-collapse:collapse;
}
table, th, td
{
border: 1px solid black;
}
Table
Width and Height
Width and height of a table is defined by the
width and height properties.
The example below sets the width of the table
to 100%, and the height of the th elements to 50px:
Example
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:
Example
td
{
text-align:right;
}
The vertical-align property sets the vertical
alignment, like top, bottom, or middle:
Example
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:
Example
td
{
padding:15px;
}
Table
Color
The example below specifies the color of the
borders, and the text and background color of th elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
The 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 CSS box model is essentially a box that
wraps around HTML elements, and it consists of: margins, borders, padding, and
the actual content.
The box model allows us to place a border
around elements and space elements in relation to other elements.
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 inherited from the color
property 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
In order to set the width and height of an
element correctly in all browsers, you need to know how the box model works.
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 + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px
Assume that you had only 250px of space. Let's
make an element with a total width of 250px:
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
IE8 and earlier versions of IE, included
padding and border in the width property.
To fix this problem, add a <!DOCTYPE
html> to the HTML page.
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.
|
|
Note: 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
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
The border-width property is used to set the
width of the border.
The width is set in pixels, or by using one of
the three pre-defined values: thin, medium, or thick.
Note: The "border-width" 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-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:
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;
- 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
- border-style:dotted;
- 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
As you can see from the examples above, there
are many properties to consider when dealing with borders.
To shorten the code, it is also possible to
specify all the individual border properties in one property. This is called a
shorthand property.
The border property is a shorthand for the
following individual border properties:
- border-width
- border-style
(required)
- border-color
Example
border:5px solid red;
More Examples
All CSS
Border Properties
|
Property
|
Description
|
|
|
Sets all the border properties in one declaration
|
|
|
Sets all the bottom border properties in one declaration
|
|
|
Sets the color of the bottom border
|
|
|
Sets the style of the bottom border
|
|
|
Sets the width of the bottom border
|
|
|
Sets the color of the four borders
|
|
|
Sets all the left border properties in one declaration
|
|
|
Sets the color of the left border
|
|
|
Sets the style of the left border
|
|
|
Sets the width of the left border
|
|
|
Sets all the right border properties in one declaration
|
|
|
Sets the color of the right border
|
|
|
Sets the style of the right border
|
|
|
Sets the width of the right border
|
|
|
Sets the style of the four borders
|
|
|
Sets all the top border properties in one declaration
|
|
|
Sets the color of the top border
|
|
|
Sets the style of the top border
|
|
|
Sets the width of the top border
|
|
|
Sets the width of the four borders
|
CSS Outlines
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.
Possible
Values
|
Value
|
Description
|
|
auto
|
The browser calculates a margin
|
|
length
|
Specifies a margin in px, pt, cm, etc. Default value is 0px
|
|
%
|
Specifies a margin in percent of the width of the containing
element
|
|
inherit
|
Specifies that the margin should be inherited from the parent
element
|
|
|
Note: It is
also 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;
- top
margin is 25px
- right
margin is 50px
- bottom
margin is 75px
- left
margin is 100px
- margin:25px
50px 75px;
- top
margin is 25px
- right
and left margins are 50px
- bottom
margin is 75px
- margin:25px
50px;
- top
and bottom margins are 25px
- right
and left margins are 50px
- margin:25px;
- all
four margins are 25px
More Examples
All CSS
Margin Properties
|
Property
|
Description
|
|
|
A shorthand property for setting the margin properties in one
declaration
|
|
|
Sets the bottom margin of an element
|
|
|
Sets the left margin of an element
|
|
|
Sets the right margin of an element
|
|
|
Sets the top margin of an element
|
An outline is a line that is drawn around
elements (outside the borders) to make the element "stand out".
The outline properties specify the style,
color, and width of an outline.
Examples
CSS
Outline
An outline is a line that is drawn around
elements (outside the borders) to make the element "stand out".
However, the outline property is different
from the border property.
The outline is not a part of an element's
dimensions; the element's total width and height is not affected by the width
of the outline.
All CSS
Outline Properties
|
Property
|
Description
|
Values
|
|
|
Sets all the outline properties in one declaration
|
outline-color
outline-style
outline-width
inherit
|
|
|
Sets the color of an outline
|
color_name
hex_number
rgb_number
invert
inherit
|
|
|
Sets the style of an outline
|
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
|
|
|
Sets the width of an outline
|
thin
medium
thick
length
inherit
|
.
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;
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;
- 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
- padding:25px;
- all
four paddings are 25px
More Examples
This example demonstrates a shorthand property for setting all of the padding
properties in one declaration, can have from one to four values.
All CSS
Padding Properties
|
Property
|
Description
|
|
|
A shorthand property for setting all the padding properties in
one declaration
|
|
|
Sets the bottom padding of an element
|
|
|
Sets the left padding of an element
|
|
|
Sets the right padding of an element
|
|
|
Sets the top padding of an element
|
Do you remember the first time you heard the word “blog”? What was your original thought? How did you respond?
You can find about 2.6 million answers (and counting) to that specific question via Google but I wanted to present the answer in a few different ways so that you, as the new guy or gal, can get it, or if you know someone who wants to know then you can pass them this post.
