In the head tag, in a link tag.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
In the head tag, in a style tag...
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
In the tag, starting with "style="
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
p.classname
{
text-align:right
}
<p class="classname">
See the external style sheet too.
Below, background colors are shown for...
Body tag using RGB values,
h1 tag using hex values, and
p tag using color name.
body
{
background-color:rgb(242,228,249);
}
h1
{
background-color:#cccccc;
}
h2
{
background-color:white;
}
body {background-image:url('paper.gif')}
Here is an inline "p" sample.
The code looks like...
<p style="background-image:url('css/bg.gif')"></p>
By default, the image tiles both vertically and horizontally.
<p style="background-image:url('css/bg.gif'); background-repeat:repeat-y; background-color:#ffffff;">
...a bunch of spaces have been added, above, to show tiling effect....
<p style="background-image:url('css/bg.gif'); background-repeat:repeat-x background-color:#ffffff;;">
...a bunch of spaces have been added, above, to show tiling effect....
Code looks like...
<p style="background-image:url('css/lab.jpg'); background-repeat:no-repeat;">
Does not seem to work in external style sheet.
Here, the code is placed in the header.
It shows the lab image on the right hand side of the page.
<style type="text/css">
body {
background-image:url("css/lab.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right;
}
</style>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}
</style>
CLICK HERE for a PERCENT sample.
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
PIXEL SAMPLE
Most of the stuff can be written in one line.
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
background-size: allows specification of size
background-origin: allows for location in divs.....not sure how this is different than CSS2?
Firefox 3.6 and earlier does not support the background-origin property, and requires the prefix -moz- to support the background-size property.Safari 4 requires the prefix -webkit- to support the new background properties.Internet Explorer 9, Firefox 4, Chrome, Safari 5 and Opera support the new background properties.
Can use more than one image, at the same time, (not sure why this would be useful) in one background-image:urltag
background-clip: can be used to limit the area of where the background appears.
Text color is specified using "color"
h1
{
background-color:#cccccc;
color:#330066;
}
This text is aligned to the right.
p.right
{
text-align:right;
}
This text is centered.
p.center
{
text-align:center;
}
This text is justified.
p.justify
{
text-align:justify;
}
This text is overlined.
<p style="text-decoration:overline">This text is overlined.</p>
This text has a line running through it.
<p style="text-decoration:line-through">This text has a line running through it.</p>
This text is underlined.
<p style="text-decoration:underline">This text is underlined.</p>
These letters will display as all upper case no matter what is typed.
<p style="text-transform:uppercase">These letters will display as all upper case no matter what is typed.</p>
These letters will display as all lower case no matter what is typed.
<p style="text-transform:lowercase">These letters will display as all lower case no matter what is typed.</p>
Here, the first letter of each word will be capitalized no matter what is typed.
<p style="text-transform:capitalize">Here, the first letter of each word will be capitalized no matter what is typed.</p>
Indents the first line.
h2
{
text-indent:50px;
}
The letter spacing, here, is set to 5 pixels.
<p style="letter-spacing:5px">The letter spacing, here, is set to 5 pixels.</p>
The letter spacing, here, is set to -3 pixels.
<p style="letter-spacing:-3px">The letter spacing, here, is set to -3 pixels.</p>
Line height is set to 90%. More text is added so that the effect can be seen where monitor resolution is 1920. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%. Line height is set to 90%.
<p style="line-height:90%"></p>
Line height is set to 200. More text is added so that the effect can be seen where monitor resolution is 1920. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%. Line height is set to 200%.
<p style="line-height:200%"></p>
The space between these words is set to 30 pixels.
<p style="word-spacing:30px">The space between these words is set to 30 pixels.</p>
No Wrap
p
{
white-space:nowrap;
}
In this page, the font is specified in the body of the external style sheet.
Here is Serif.
font-family:Times,Georgia,Serif;
Here is Monospace.
font-family:Courier,Lucida,Monospace;
Here is Sans.
font-family:Veranda,Arial,Sans-serif
Need .ttf & .eot (for ie) fonts on server
In external style sheet (or header).....
@font-face
{
font-family: kom;
src: url('KOMTXT__.ttf'),
url('KOMTXT__.ttf') format("opentype"); /* IE */
}
Here is italic. Also existing are "normal" & "oblique." Oblique is less supported.
font-style:italic
Font size can be specified in pixels, em's, or %.
The safest way to do it (to control size in all browsers) is to set the body tag to "font-size:100%" and specify all the font sizes in em's.
1 em is equal to 16 pixels.
In this document, some of the <code> tags are displaying as specified and some are not. The reason for the goofiness is unknown.
Some code samples are below:
This text is set to 40 pixels.
<p style="font-size:40px;">This text is set to 40 pixels.</p>
The font sizes for this document are specified in the external style sheet
body
{
font-size:100%;
}
h1
{
font-size:1.5em;
}
h2
{
font-size:1.25em;
}
p
{
font-size:0.75em;
}
code
{
font-size:1em;
}
These are small caps
font-variant:small-caps
This is the "caption" property.
font:caption
Icon property.
font:icon
Same font that is used in the browser menu.
font:menu
message box font.
font:message-box
This is the "small-caption" property.
font:small-caption
Status bar font.
font:status-bar
Bold font weight.
font-weight:bold
Here, the font weight is set to 500.
font-weight:500
Font weight is set to lighter ----????
font-weight:lighter
Font is condensed ----????
font-stretch:condensed
This is what the image
looks like by default.
This is what the image looks like with "top" alignment.
<p>This is what the image<img src="css/lab.jpg" style="vertical-align:text-top" /> looks like with "top" alignment.</p>
This is what the image looks like with "super" alignment.
<p>This is what the image<img src="css/lab.jpg" style="vertical-align:text-super" /> looks like with "super" alignment.</p>
A box consists of 4 parts:
Content (width)
Padding
Border
Margin
This box has width=220, padding=50, 5px gray border, and a 20px margin.
<div style="background-color:white; width:220px; padding:50px; border:5px solid gray; margin:20px;">
style="border-style:dotted"
style="border-style:dotted; border-width:1px" style="border-style:none" style="border-style:dashed"
style="border-style:solid" style="border-style:double" style="border-style:groove"
style="border-style:groove; border-color:#ffcc33" style="border-style:ridge"
style="border-style:ridge; border-color:#ffcc33" style="border-style:inset"
style="border-style:inset; border-color:#ffcc33" style="border-style:outset"
style="border-style:outset; border-color:#ffcc33" border-top-style:dotted; border-right-style:solid; border-bottom-style:dashed; border-left-style:double; When writing more than one property, the order goes: width, style, color.
div style="border-top:4px solid #ff0000; border-right:3px double white; border-bottom:2px dashed blue; border-left:1px dotted;" Internet Explorer 9 supports some of the new border properties.
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Safari also needs the prefix -webkit- for box-shadow.
Opera supports the new border properties.
There is a border image tag BUT it is not supported by ie
div style="float:left; margin:0px 0px 0px 20px;width:300px; height:110px; background-color:white; -moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */ -webkit-box-shadow: 10px 10px 5px #888888; /* Safari */box-shadow: 10px 10px 5px #888888;"
Margin can be set with "auto", which lets the browser decide or px, pt, em, cm, %
No color
Specifies area outside the border (see BOX)
When specifying multiple widths, the order goes: top, right, bottom, left.
style="float:left; background-color:white; width:200px; height:200px; border:5px solid gray; margin:20px 0px 20px 0px;"style="float:left; background-color:white; width:200px; height:200px; border:5px solid gray; margin:20px 0px 0px 20px;"style="float:left; background-color:white; width:200px; height:200px; border:5px solid gray; margin:20px 20px 20px 0px;"style="float:left; background-color:white; width:200px; height:200px; border:5px solid gray; margin:0px 20px 20px 20px;"Positioning of the image will vary from browser to browser unless extra work is done. This extra work is shown in SAMPLE 3
Slight positioning differences.
This table is set for auto
<table style="table-layout:auto" border="1" width="100%">
| This_cell_is_set_to_5%. | This_cell_is_set_to_95%. |
This table is set for fixed
<table style="table-layout:fixed" border="1" width="100%">
| This_cell_is_set_to_5%. | This_cell_is_set_to_95%. |
This table has "collapsed" borders.
style="border-collapse:collapse" border="1"
| 1 | 2 |
| 3 | 4 |
Samples are below
The width of this paragraph is set to 200 pixels.
<p style="width:200px">The width of this paragraph is set to 200 pixels.</p>
The lab image is set to 10% (of browser window).
<p>The lab image is set to 10% (of browser window). <img src="css/lab.jpg" style="width:10%" /></p>
The min-height of this div is set to 100 pixels.
style="background-color:white; min-height:100px
The max-width of this div is set to 20 pixels.
style="background-color:white; max-width:20px
Inline elements are displayed in a line
<h1 style="display:inline">Heading 1</h1> <h1 style="display:inline">Heading 1</h1>"Block" puts space between elements.
A display property with a value of "block" results in distance between two elements.<span>A display property with a value of "block" results in</span>
<span>distance between two elements.</span>Link attributes can NOT be specified in-line.
The order of the attributes, needs to be: link, visited, hover, active.
This "link," that goes nowhere, changes color.
This "link," that goes nowhere, changes font size.
This "link," that goes nowhere, changes background color.
This "link," that goes nowhere, changes font.
This "link," that goes nowhere, changes text decoration.
style="float:left; background-color:white; width:200px; height:200px; border:5px solid gray; margin:5px 5px 5px 5px;"style="float:left; background-color:white; width:200px; height:200px; border:5px solid gray; margin:5px 5px 5px 5px;"style="float:right; background-color:white; width:200px; height:200px; border:5px solid gray; margin:5px 5px 5px 5px;"After you're done floating stuff, you need to "clear."
After you're done floating stuff, you need to "clear." ----style="clear:both"
SEE ALSO: the header div at the top of this page.
The background attribute for the div tag needs to be background: url('css/60s.gif') NOT background-image: url('css/60s.gif')