Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
312 views

What Is CSS?: CSS Stands For Cascading Style Sheets

The document provides an introduction to CSS, explaining that CSS is used to style and lay out HTML elements. It describes the basic CSS syntax of selectors, properties, and values. It also covers various CSS selectors like element, class, ID, and attribute selectors that allow targeting specific elements. The document concludes by demonstrating how to link an external CSS stylesheet to an HTML document to style elements.

Uploaded by

profktr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
312 views

What Is CSS?: CSS Stands For Cascading Style Sheets

The document provides an introduction to CSS, explaining that CSS is used to style and lay out HTML elements. It describes the basic CSS syntax of selectors, properties, and values. It also covers various CSS selectors like element, class, ID, and attribute selectors that allow targeting specific elements. The document concludes by demonstrating how to link an external CSS stylesheet to an HTML document to style elements.

Uploaded by

profktr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 16

The selector is normally the HTML element/tag you

CSS Introduction wish to define, the property is the attribute you wish
to change, and each property can take a value. The
What is CSS? property and value are separated by a colon, and
surrounded by curly braces:

• CSS stands for Cascading Style Sheets


body {color:black}
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a Note: If the value is multiple words, put quotes
around the value:
problem
• External Style Sheets can save a lot of
work p {font-family:"sans serif"}
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into Note: If you want to specify more than one property,
one you must separate each property with a semicolon.
The example below shows how to define a center
aligned paragraph, with a red text color:
Multiple Styles Will Cascade into
One p {text-align:center;color:red}

Style sheets allow style information to be specified in To make the style definitions more readable, you can
many ways. describe one property on each line, like this:

Styles can be specified: p


{
• inside an HTML element text-align:center;
• inside the head section of an HTML page color:black;
font-family:arial
• in an external CSS file
}

Tip: Even multiple external style sheets can be


referenced inside a single HTML document.
Grouping
You can group selectors. Separate each selector with
Cascading order - What style will be used when
a comma. In the example below we have grouped all
there is more than one style specified for an HTML the header elements. All header elements will be
element? displayed in green text color:

Generally speaking we can say that all the styles will


h1,h2,h3,h4,h5,h6
"cascade" into a new "virtual" style sheet by the
{
following rules, where number four has the highest
color:green
priority:
}
1. Browser default
2. External style sheet The class Selector
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element) With the class selector you can define different styles
for the same type of HTML element.
So, an inline style (inside an HTML element) has the
highest priority, which means that it will override a Say that you would like to have two types of
style defined inside the <head> tag, or in an external paragraphs in your document: one right-aligned
style sheet, or in a browser (a default value). paragraph, and one center-aligned paragraph. Here is
how you can do it with styles:

CSS Syntax p.right {text-align:right}


p.center {text-align:center}
Syntax
You have to use the class attribute in your HTML
The CSS syntax is made up of three parts: a selector,
document:
a property and a value:

<p class="right">This paragraph will be


selector {property:value}
right-aligned.</p>

Introduction to CSS page 1


<p class="center">This paragraph will be input[type="text"] {background-
center-aligned.</p> color:blue}

Note: To apply more than one class per given


element, the syntax is: The id Selector
<p class="center bold">This is a You can also define styles for HTML elements with the
paragraph.</p> id selector. The id selector is defined as a #.

The style rule below will match the element that has
The paragraph above will be styled by the class
an id attribute with a value of "green":
"center" AND the class "bold".

You can also omit the tag name in the selector to #green {color:green}
define a style that will be used by all HTML elements
that have a certain class. In the example below, all The style rule below will match the p element that has
HTML elements with class="center" will be center- an id with a value of "para1":
aligned:

p#para1
.center {text-align:center} {
text-align:center;
In the code below both the h1 element and the p color:red
element have class="center". This means that both }
elements will follow the rules in the ".center" selector:

Do NOT start an ID name with a number! It will


<h1 class="center">This heading will be not work in Mozilla/Firefox.
center-aligned</h1>
<p class="center">This paragraph will
also be center-aligned.</p>
CSS Comments
Do NOT start a class name with a number! It will Comments are used to explain your code, and may
not work in Mozilla/Firefox. help you when you edit the source code at a later
date. A comment will be ignored by browsers. A CSS
comment begins with "/*", and ends with "*/", like
Add Styles to Elements with this:

Particular Attributes /*This is a comment*/


p
You can also apply styles to HTML elements with {
particular attributes. text-align:center;
/*This is another comment*/
The style rule below will match all input elements that color:black;
have a type attribute with a value of "text": font-family:arial
}

The HTML file below links to an external <head>


<link rel="stylesheet"
style sheet with the <link> tag: type="text/css" href="ex1.css" />
<html> </head>

Introduction to CSS page 2


<body> a:link {color:green}
a:visited {color:yellow}
<h1>This header is 36 pt</h1> a:hover {color:black}
<h2>This header is blue</h2> a:active {color:blue}
<p>This paragraph has a left
margin of 50 pixels</p>
The result is in
</body>
</html>

How to Insert a Style Sheet


This is the style sheet file (ex1.css):
When a browser reads a style sheet, it will
body {background-color: yellow} format the document according to it. There are
h1 {font-size: 36pt} three ways of inserting a style sheet:
h2 {color: blue}
p {margin-left: 50px}
External Style Sheet
An external style sheet is ideal when the style is
The result is in the frame applied to many pages. With an external style
sheet, you can change the look of an entire
Web site by changing one file. Each page must
link to the style sheet using the <link> tag. The
<link> tag goes inside the head section:

<head>
<link rel="stylesheet"
type="text/css" href="mystyle.css"
/>
</head>
The HTML file below links to an
external style sheet with the The browser will read the style definitions from
<link> tag: the file mystyle.css, and format the document
according to it.
<html>
<head> An external style sheet can be written in any
<link rel="stylesheet" text editor. The file should not contain any html
type="text/css" tags. Your style sheet should be saved with a
href="ex2.css" /> .css extension. An example of a style sheet file
</head> is shown below:

<body> hr {color:sienna}
<h1>This is a header 1</h1> p {margin-left:20px}
<hr /> body {background-
<p>You can see that the style image:url("images/back40.gif")}
sheet formats the text</p>

<p><a Do not leave spaces between the property


href="http://www.w3schools.com" value and the units! "margin-left:20 px"
(instead of "margin-left:20px") will only work in
target="_blank">This is a
IE6, but it will not work in Firefox or Opera.
link</a></p>

</body> Internal Style Sheet


</html>
This is the style sheet file (ex2.css): An internal style sheet should be used when a
body {background-color: tan} single document has a unique style. You define
internal styles in the head section by using the
h1 {color:maroon; font-size:20pt}
<style> tag, like this:
hr {color:navy}
p {font-size:11pt; margin-left:
15px} <head>

Introduction to CSS page 3


<style type="text/css"> And an internal style sheet has these properties
hr {color:sienna} for the h3 selector:
p {margin-left:20px}
body {background- h3
image:url("images/back40.gif")} {
</style> text-align:right;
</head> font-size:20pt
}
The browser will now read the style definitions,
and format the document according to it. If the page with the internal style sheet also
links to the external style sheet the properties
Note: A browser normally ignores unknown for h3 will be:
tags. This means that an old browser that does
not support styles, will ignore the <style> tag, color:red;
but the content of the <style> tag will be
text-align:right;
displayed on the page. It is possible to prevent
font-size:20pt
an old browser from displaying the content by
hiding it in the HTML comment element:
The color is inherited from the external style
<head> sheet and the text-alignment and the font-size
<style type="text/css"> is replaced by the internal style sheet.
<!--
hr {color:sienna}
p {margin-left:20px}
body {background-
image:url("images/back40.gif")}
-->
</style> Examples
</head>
Set the background color
This example demonstrates how to
Inline Styles set the background color for an
element.
An inline style loses many of the advantages of
style sheets by mixing content with <html>
presentation. Use this method sparingly, such <head>
as when a style is to be applied to a single <style type="text/css">
occurrence of an element.
body
{
To use inline styles you use the style attribute background-color:yellow;
in the relevant tag. The style attribute can
}
contain any CSS property. The example shows
h1
how to change the color and the left margin of
a paragraph: {
background-color:#00ff00;
}
<p style="color:sienna;margin- p
left:20px">This is a paragraph.</p>
{
background-color:rgb(255,0,255);
}
Multiple Style Sheets </style>
</head>
If some properties have been set for the same <body>
selector in different style sheets, the values will <h1>This is heading 1</h1>
be inherited from the more specific style sheet. <p>This is a paragraph.</p>
</body>
For example, an external style sheet has these </html>
properties for the h3 selector:
Set an image as the background
h3 This example demonstrates how to
{ set an image as the background.
color:red;
text-align:left; <html>
font-size:8pt <head>
} <style type="text/css">

Introduction to CSS page 4


body background-color:#00ff00;
{ }
background-color:yellow; p
} {
h1 background-color:rgb(255,0,255);
{ }
background-color:#00ff00; </style>
} </head>
p <body>
{ <h1>This is heading 1</h1>
background-color:rgb(255,0,255); <p>This is a paragraph.</p>
} </body>
</style> </html>
</head>
<body> How to repeat a background image only
<h1>This is heading 1</h1> horizontally
<p>This is a paragraph.</p> This example demonstrates how to repeat a
</body> background image only horizontally.
</html>
<html>
<head>
How to repeat a background image <style type="text/css">
This example demonstrates how to body
repeat a background image. {
background-image:url('paper.gif');
<html> background-repeat:repeat-x;
<head> }
<style type="text/css"> </style>
body </head>
{ <body>
background-color:yellow; <p>repeat-x will repeat a
} background image only
h1 horizontally.</p>
{ </body>
background-color:#00ff00; </html>
}
p How to display a background image only one
{ time
background-color:rgb(255,0,255); This example demonstrates how to display a
} background image only one time
</style>
</head> <html>
<body> <head>
<h1>This is heading 1</h1> <style type="text/css">
<p>This is a paragraph.</p> body
</body> {
</html> background-image:url('paper.gif');
background-repeat:no-repeat;
}
How to repeat a background image </style>
only vertically </head>
This example demonstrates how to <body>
repeat a background image only <p>no-repeat will not repeat a
vertically. background image. The image will
<html> only be shown once.</p>
<head> </body>
<style type="text/css"> </html>
body
{
How to place the background image
background-color:yellow; This example demonstrates how to place the
} image on the page.
h1
{ <html>
Introduction to CSS page 5
<head> </head>
<style type="text/css">
body <body>
{ <p><b>Note:</b> For this to work
background- in Firefox and Opera, the
image:url('smiley.gif'); background-attachment property
background-repeat:no-repeat; must be set to "fixed".</p>
background-attachment:fixed; </body>
background-position:center; </html>
}
</style> How to set a fixed background image
</head> This example demonstrates how to set a fixed
background image.
<body>
<p><b>Note:</b> For this to work <html>
in Firefox and Opera, the <head>
background-attachment property <style type="text/css">
must be set to "fixed".</p> body
</body> {
</html> background-
image:url('smiley.gif');
How to position a background image using % background-repeat:no-repeat;
This example demonstrates how to position an background-attachment:fixed
image on the page using percent. }
</style>
<html> </head>
<head>
<style type="text/css"> <body>
body <p>The background-image is fixed.
{ Try to scroll down the page.</p>
background-image: <p>The background-image is fixed.
url('smiley.gif'); Try to scroll down the page.</p>
background-repeat: no-repeat; <p>The background-image is fixed.
background-attachment:fixed; Try to scroll down the page.</p>
background-position: 30% 20%; <p>The background-image is fixed.
} Try to scroll down the page.</p>
</style> <p>The background-image is fixed.
</head> Try to scroll down the page.</p>
<body> <p>The background-image is fixed.
<p><b>Note:</b> For this to work Try to scroll down the page.</p>
in Firefox and Opera, the <p>The background-image is fixed.
background-attachment property Try to scroll down the page.</p>
must be set to "fixed".</p> <p>The background-image is fixed.
</body> Try to scroll down the page.</p>
</html> <p>The background-image is fixed.
Try to scroll down the page.</p>
How to position a background image using <p>The background-image is fixed.
pixels Try to scroll down the page.</p>
This example demonstrates how to position an <p>The background-image is fixed.
image on the page using pixels. Try to scroll down the page.</p>
<p>The background-image is fixed.
<html> Try to scroll down the page.</p>
<head> <p>The background-image is fixed.
<style type="text/css"> Try to scroll down the page.</p>
body <p>The background-image is fixed.
{ Try to scroll down the page.</p>
background-image: <p>The background-image is fixed.
url('smiley.gif'); Try to scroll down the page.</p>
background-repeat: no-repeat; </body>
background-attachment:fixed;
background-position: 50px 100px; </html>
}
</style>
Introduction to CSS page 6
All the background properties in one declaration
This example demonstrates how to use the
shorthand property for setting all of the
background properties in one declaration.

<html>
<head>
<style type="text/css">
body
{
background: #00ff00
url('smiley.gif') no-repeat fixed
center;
}
</style>
</head>

<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>

</html>

Introduction to CSS page 7


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

The color property is used to set the color of


The text-decoration property is mostly used to
the text. The color can be set by:
remove underlines from links for design
purposes:
• name - specify a color name, like "red"
• RGB - specify an RGB value, like
"rgb(255,0,0)" a {text-decoration:none}
• Hex - specify a hex value, like
"#ff0000"

It can also be used to decorate text:


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

h1 {text-decoration:overline}
Text Color h2 {text-decoration:line-through}
h3 {text-decoration:underline}
The color property is used to set the color of
h4 {text-decoration:blink}
the text. The color can be set by:

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


• RGB - specify an RGB value, like It is not recommended to underline text that
is not a link, as this often confuse users.
"rgb(255,0,0)"
• Hex - specify a hex value, like
"#ff0000" Text Transformation
The default color for a page is defined in the The text-transform property is used to specify
body selector. uppercase and lowercase letters in a text.

It can be used to turn everything into


body {color:blue} uppercase or lowercase letters, or capitalize the
first letter of each word.
h1 {color:#00ff00}
h2 {color:rgb(255,0,0)} p.uppercase {text-
transform:uppercase}
p.lowercase {text-
transform:lowercase}
For W3C compliant CSS: If you define the
p.capitalize {text-
color property, you must also define the
transform:capitalize}
background-color property.
Text Indentation
Text Alignment
The text-indentation property is used to specify
the indentation of the first line of a text.
The text-align property is used to set the
horizontal alignment of a text.
p {text-indent:50px}
Text can be centered, or aligned to the left or
right, or justified. Specify the space between
characters
When text-align is set to "justify", each line is This example demonstrates how to
stretched so that every line has equal width, increase or decrease the space
and the left and right margins are straight (like between characters.
in magazines and newspapers). <html>
<head>
h1 {text-align:center} <style type="text/css">
p.date {text-align:right} h1 {letter-spacing:2px}
p.main {text-align:justify} h2 {letter-spacing:-3px}
</style>
</head>
Text Decoration
<body>

Introduction to CSS page 8


<h1>This is heading 1</h1> This is a paragraph with a
<h2>This is heading 2</h2> standard line-height.
</body> The default line height in most
</html> browsers is about 110% to 120%.
Specify the space between lines This is a paragraph with a
This example demonstrates how to standard line-height.
specify the space between the </p>
lines in a paragraph.
<html> <p class="small">
<head> This is a paragraph with a smaller
<style type="text/css"> line-height.
p.small {line-height: 90%} This is a paragraph with a smaller
p.big {line-height: 200%} line-height.
</style> This is a paragraph with a smaller
</head> line-height.
</p>
<body>
<p> <p class="big">
This is a paragraph with a This is a paragraph with a bigger
standard line-height. line-height.
The default line height in most This is a paragraph with a bigger
browsers is about 110% to 120%. line-height.
This is a paragraph with a This is a paragraph with a bigger
standard line-height. line-height.
</p> </p>

<p class="small"> </body>


This is a paragraph with a smaller </html>
line-height.
This is a paragraph with a smaller
line-height.
This is a paragraph with a smaller
line-height.
</p>

<p class="big">
This is a paragraph with a bigger
line-height.
This is a paragraph with a bigger
line-height.
This is a paragraph with a bigger
line-height.
</p>

</body>
</html>

Set the text direction of an


element
This example demonstrates how to
change the text direction of an
element.
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>

<body>
<p>

Introduction to CSS page 9


Increase the white space between <style type="text/css">
words p
This example demonstrates how {
white-space:nowrap;
to increase the white space }
between words in a paragraph. </style>
</head>
<html> <body>
<head>
<style type="text/css"> <p>
p This is some text. This is some
{ text. This is some text.
word-spacing:30px; This is some text. This is some
} text. This is some text.
</style> This is some text. This is some
</head> text. This is some text.
<body> This is some text. This is some
text. This is some text.
<p> </p>
This is some text. This is some
text. </body>
</p> </html>

</body>
</html>
CSS Font
Disable text wrapping inside an
element CSS font properties define the font
This example demonstrates how to family, boldness, size, and the style of a
disable text wrapping inside an text.
element.
<html>
<head>
<style type="text/css">
Difference Between Serif and
p Sans-serif Fonts
{
white-space:nowrap;
}
</style>
</head>
<body>

<p>
This is some text. This is some
text. This is some text.
This is some text. This is some On computer screens, sans-serif fonts are
text. This is some text. considered easier to read than serif fonts.
This is some text. This is some
text. This is some text. CSS Font Families
This is some text. This is some In CSS, there is two types of font
text. This is some text. family names:
</p> generic family - a group of font
families with a similar look (like
</body> "Serif" or "Monospace")
</html> font family - a specific font
family (like "Times New Roman" or
Vertical alignment of an image "Arial")
This example demonstrates how to Generic Font Description
set the vertical align of an image family family
in a text.
Serif Times New Serif fonts have
<html>
Roman small lines at
<head>
Introduction to CSS page 10
Georgia the ends on some size adjustments to make
characters paragraphs look like headings, or
headings look like paragraphs.
Sans- Arial "Sans" means Always use the proper HTML tags,
serif Verdana without - these like <h1> - <h6> for headings and
fonts do not <p> for paragraphs.
have the lines The font-size value can be an
at the ends of absolute, or relative size.
characters Absolute size:
Monospace Courier All monospace Sets the text to a specified size
New characters has Does not allow a user to change
Lucida the same width the text size in all browsers (bad
Console for accessibility reasons)
Absolute size is useful when the
Font Family physical size of the output is
The font family of a text is set known
with the font-family property. Relative size:
The font-family property can hold Sets the size relative to
several font names as a "fallback" surrounding elements
system. If the browser does not Allows a user to change the text
support the first font, it tries size in browsers
the next font. If you do not specify a font
Start with the font you want, and size, the default size for normal
end with a generic family, to let text, like paragraphs, is 16px
the browser pick a similar font in (16px=1em).
the generic family, if no other Setting Text Size Using Pixels
fonts are available. Setting the text size with pixels,
gives you full control over the
Note: If the name of a font family text size:
is more than one word, it must be
Example
in quotation marks, like font-
family: "Times New Roman". h1 {font-size:40px}
More than one font family is h2 {font-size:30px}
specified in a comma-separated p {font-size:14px}
list:
The example above allows Firefox,
Chrome, and Safari to resize the
p{font-family:"Times New text, but not Internet Explorer.
Roman",Georgia,Serif} The text can be resized in all
browsers using the zoom tool
(however, this resizes the entire
page, not just the text).
Font Style Setting Text Size Using Em
The font-style property is mostly To avoid the resizing problem with
used to specify italic text. Internet Explorer, many developers
This property has three values: use em instead of pixels.
normal - The text is shown The em size unit is recommended by
normally the W3C.
italic - The text is shown in 1em is equal to the current font
italics size. The default text size in
oblique - The text is "leaning" browsers is 16px. So, the default
(oblique is very similar to size of 1em is 16px.
italic, but less supported)
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
Font Size The size can be calculated from
The font-size property sets the pixels to em using this formula:
size of the text. pixels/16=em
Being able to manage the text size Example
is important in web design.
However, you should not use font

Introduction to CSS page 11


Set the variant of the font
h1 {font-size:2.5em} /* This example demonstrates how to
40px/16=2.5em */ set the variant of a font.
h2 {font-size:1.875em} /* <html>
30px/16=1.875em */ <head>
p {font-size:0.875em} /* <style type="text/css">
14px/16=0.875em */ p.normal {font-variant:normal}
p.small {font-variant:small-caps}
In the example above, the text </style>
size in em is the same as the </head>
previous example in pixels.
However, with the em size, it is <body>
possible to adjust the text size <p class="normal">My name is Hege
in all browsers. Refsnes.</p>
Unfortunately, there is still a <p class="small">My name is Hege
problem with IE. When resizing the Refsnes.</p>
text, it becomes larger than it </body>
should when made larger, and
smaller than it should when made </html>
smaller.
Using 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!
Set the boldness of the font
This example demonstrates how to
set the boldness of a font.
<html>
<head>
<style type="text/css">
p.normal {font-weight:normal}
p.light {font-weight:lighter}
p.thick {font-weight:bold}
p.thicker {font-weight:900}
</style>
</head>

<body>
<p class="normal">This is a
paragraph.</p>
<p class="light">This is a
paragraph.</p>
<p class="thick">This is a
paragraph.</p>
<p class="thicker">This is a
paragraph.</p>
</body>

</html>

Introduction to CSS page 12


All the font properties in one
declaration
This example demonstrates how to
use the shorthand property for
setting all of the font properties
in one declaration.

<html>
<head>
<style type="text/css">
p.ex1
{
font:italic arial,sans-serif;
}
Explanation of the different parts:
p.ex2
{ • Margin - Clears an area around the
font:italic bold 12px/30px border. The margin does not have a
arial,sans-serif; background color, and it is completely
} transparent
</style> • Border - A border that lies around the
</head> padding and content. The border is
affected by the background color of the
box
<body>
<p class="ex1">This is a • Padding - Clears an area around the
paragraph. This is a paragraph. content. The padding is affected by the
background color of the box
This is a paragraph. This is a
paragraph. This is a paragraph. • Content - The content of the box,
where text and images appear
This is a paragraph. This is a
paragraph. This is a
paragraph.</p>
<p class="ex2">This is a Width and Height of an
paragraph. This is a paragraph. Element
This is a paragraph. This is a
paragraph. This is a paragraph.
Important: When you specify the width and
This is a paragraph. This is a
height properties of an element with CSS, you
paragraph. This is a are just setting the width and height of the
paragraph.</p> content area. To know the full size of the
</body> element, you must also add the padding,
</html> border and margin.

The total width of the element in the example


Box Model in CSS below is 300px:

All HTML elements can be considered as boxes. width:250px;


In CSS, the term "box model" is used when padding:10px;
talking about design and layout. border:5px solid gray;
margin:10px;
In order to set the width and height of an
element correctly in all browsers, you need to
Let's do the math:
know how the box model works.
250px (width)
+ 20px (left and right padding)
The box model illustrates how the CSS + 10px (left and right border)
properties: margin, border, and padding, affects + 20px (left and right margin)
the width and height of an element. = 300px

The Box Model


The image below illustrates the box model:

Introduction to CSS page 13


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
Imagine that you only had 250px of space. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
Let's make an element with a total width of transitional.dtd">
250px: <html>
<head>
<style type="text/css">
Example div.ex
{
width:220px; width:220px;
padding:10px; padding:10px;
border:5px solid gray; border:5px solid gray;
margin:0px; margin:0px;
}
</style>
The total width of an element should always be </head>
calculated like this: border-style Values

Total element width = width + left padding + none: Defines no border


right padding + left border + right border + left
margin + right margin
dotted: Defines a dotted border
The total height of an element should always be
calculated like this: dashed: Defines a dashed border

Total element height = height + top padding + solid: Defines a solid border
bottom padding + top border + bottom border
+ top margin + bottom margin
double: Defines two borders. The width of the
two borders are the same as the border-width
value
Browsers Compatibility Issue
If you tested the previous example in Internet groove: Defines a 3D grooved border. The
Explorer, you saw that the total width was not effect depends on the border-color value
exactly 250px.
ridge: Defines a 3D ridged border. The effect
IE includes padding and border in the width, depends on the border-color value
when the width property is set, unless a
DOCTYPE is declared.
inset: Defines a 3D inset border. The effect
To fix this problem, just add a DOCTYPE to the depends on the border-color value
code:

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
Border Style thick.

The border-style property specifies what kind of Note: The "border-width" property does not
border to display. work if it is used alone. Use the "border-style"
property to set the borders first.
None of the other border properties will have
any effect unless border-style is set.
Example

Introduction to CSS page 14


The example above can also be set with a
p.one single property:
{
border-style:solid;
border-width:5px; Example
}
p.two border-style:dotted solid;
{
border-style:solid;
border-width:medium; The border-style property can have from one to
} four values.

• border-style:dotted solid double


Border Color dashed;
o top border is dotted
o right border is solid
The border-color property is used to set the
o bottom border is double
color of the border. The color can be set by:
o left border is dashed
• border-style:dotted solid double;
• name - specify a color name, like "red"
o top border is dotted
• RGB - specify a RGB value, like o right and left borders are solid
"rgb(255,0,0)" o bottom border is double
• Hex - specify a hex value, like • border-style:dotted solid;
"#ff0000" o top and bottom borders are
dotted
You can also set the border color to o right and left borders are solid
"transparent".
• border-style:dotted;
o all four borders are dotted
Note: The "border-color" property does not
work if it is used alone. Use the "border-style"
property to set the borders first. The border-style property is used in the
example above. However, it also works with
border-width and border-color.
Example

p.one Border - Shorthand property


{
border-style:solid;
As you can see from the examples above, there
border-color:red;
are many properties to consider when dealing
}
with borders.
p.two
{
border-style:solid; To shorten the code, it is also possible to
border-color:#98bf21; specify all the border properties in one
} property. This is called a shorthand property.

The shorthand property for the border


properties is "border":
Border - Individual sides
Example
In CSS it is possible to specify different borders
for different sides:
border:5px solid red;

Example
When using the border property, the order of
p the values are:
{
border-top-style:dotted; • border-width
border-right-style:solid; • border-style
border-bottom-style:dotted;
border-left-style:solid; • border-color
}

Introduction to CSS page 15


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.

More Examples
All the top border properties in
one declaration
This example demonstrates a
shorthand property for setting all
of the properties for the top
border in one declaration.
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>

<body>
<p>This is some text in a
paragraph.</p>
</body>

</html>
Set the style of the bottom border
This example demonstrates how to
set the style of the bottom
border.
Set the width of the left border
This example demonstrates how to
set the width of the left border.
<html>
<head>
<style type="text/css">
p
{
border-style:solid;
border-left-width:15px;
}
</style>
</head>

<body>
<p><b>Note:</b> The "border-left-
width" property does not work if
it is used alone. Use the "border-
style" property to set the borders
first.</p>
</body>
</html>

Introduction to CSS page 16

You might also like