CSS notes

some of these notes may have been created from other online sources.

they are just my home schooling notes.


css style which makes all the <p> tags change
it applies to all tags of <p> on a page
p { color: red; font-size: 1.5em; }
when coding always end a statement with a semicolon. (;)
color: red ;
font-size : 1.5em ; //notice semi colon
styles go into the HEAD part of the document.
internal css looks like the following:
<style type=”text/css”>

h1 {
color: #FF7643;
font-family: Arial;
p {
color: red;
font-size: 1.5em;


<h1 style=”color: #C7AA8D; font-size: 3em;”>

attach an external css file using @import:
<style type=”text/css”>
@import url(css/global.css);
@import url(css/forms.css);

attach an external css file using <link>:
<link rel=”stylesheet” type=”text/css” href=”css/global.css”>

Here’s XHTML:
<link rel=”stylesheet” type=”text/css” href=”css/global.css” />

applying css to class elements:
<p class=”special”>  //name this class special

the css to manipulate that tag is below:

.special   //starts with a period // all class styles start with periods
color: red;

applying css to ID elements:
<p id=”banner”> Blah </p>

#banner {               //use # infront of the name of the ID
background: #CC0000;
height: 300px;
width: 720px;

applying css rules to more than one object at a time.
all have the color attribute changed:
h1, h2, h3, h4, h5, h6 { color: #F1CD33; }      //just use commas
h1, p, .copyright, #banner { color: #F1CD33; }  //same here just use commas

apply css rules to all tags on the page:
* { font-weight: bold; }  //just use asterisk

apply rules only when one tag is inside another:
h1 strong { color: red; }  //for when the STRONG tag is inside H1
html body ul li a{ color: red; }  // inside html, inside body, inside ul, inside li, tag a

make all links inside paragraph with class intro yellow:
p.intro a { color: yellow; } //notice there is no space between p and .intro

the focus selector allows you to format text boxes or similar items
with css. the following changes the color of any text box a user clicks into:
input:focus { background-color: #FFFFCC; }

Attribute selectors:
allows you to format tags with certain properties:
img[title]  //format all image tags which have a title
a[href=”http://www.checksumsetc.com”]{ color:red; font-weight:bold; }  //all links to checksumsetc are red

all you have to do is add the attribute in []
input[type=”text”]  //select just the text boxes in a form

a[href^=”http://”] {css code here}   //finds links WITH http:// and applies css code to them

^=      //equals begins with

a[href^=”http://”], a[href^=”https://”] {} //applies css to http and https links

a[href$=”.pdf”]  //applies css to any file ending in .pdf

$= //equals ends with
a:link selects any link that your guest hasn’t visited yet,
a:visited is a link that your visitor has clicked before
a:hover lets you change the look of a link as your visitor passes the mouse over it
a:active lets you determine how a link looks as your visitor clicks.

You can also use the :hover pseudo-class on elements other than links.
In that case, instead of using a:hover (which is for links) to add a hover
effect, you can create a style named p:hover which is for paragraph css formatting

to stop a web browser for adding a border to images use the folowing:
img { border: none; }

to stop the browser from adding an underline to links:
a {text-decoration: none;}

to have the browser uderline links when you mouse over them:
a {
text-decoration: none;
background-color: #F00;
a:hover {
background-color: transparent;
text-decoration: underline;

make links have a background image:
a {
text-decoration: none;
background: url(images/underline.gif) repeat-x left bottom;
padding-bottom: 5px;

background-image: url(star.gif);
background-repeat: no-repeat;

//hover over links change color in id named mainNav
#mainNav a:hover {
font-weight: bold;
background-color: #B2F511;
background-position: 3px 50%;


<ul class=”nav”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”news.html”>News</a></li>
<li><a href=”reviews.html”>Reviews</a></li>

specifying the font:
p {
font-family: Arial; //font-family is how you set the font

font-family: Arial, Helvetica, sans-serif;  //set multiple fonts (first one that the browser has wins) only one font is used

setting the font size:
font size types: xx-small, x-small, small, medium, large, x-large, and xx-large
the em sizes are like percentages. 1em = 100 percent

font-size: 1em;
font-size: 36px;
font-size: large;
font-size: 200%;

setting the font styles:

font-style: italic;
font-style: normal;
font-weight: bold;

capitalizing text:

text-transform: uppercase;  //tell css to tranform text to all capitals
text-transform: none;  //tell css not to tranform text
font-variant: small-caps;  //tell css to transform text to look like sub captial letters

underlining text:
text-decoration: underline;  //line under text
text-decoration: underline overline;  //lines over and under text

text-decoration: none;  //turn off text decorations

options for spacing:
letter-spacing: -1px;
letter-spacing: 10px;
word-spacing: 2px;

aligning text:
text-align: center;

line indenting:
text-indent: 25px;
text-indent: 5em;

margins for text:
p {  //sets margins for all paragraphs
margin-top: 0;
margin-bottom: 0;

formatting lists ordered and unordered
options are:disc, circle, square, decimal, lower-alpha, decimal-leading-zero, upper-alpha, lower-roman

list-style-type: square; //set the bullets to be squared
list-style-type: upper-alpha;  //set the bullets to be uppercase letters

list-style-position: outside;  //bullets are outside text
list-style-position: inside;   //bullets are inside text (indents text with a bullet)

setting a picture to be the bullets:
list-style-image: url(images/bullet.gif);

to control margin edges: margin-top, margin-right, margin-bottom, and margin-left.
margins are the distance from one object to another.
padding surrounds an object before the margins
padding adds space between a border and an image.

margin-right: 20px;
padding-top: 3em;
margin-left: 10%;

there a a few types of borders you can use.
solid, dashed, dotted, double, groove, inset, outset, ridge, and none

border: 4px solid #F00; //create a border around at 4pixels
border-bottom: 2px dashed red;
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 4px dashed #333;
border-right: none; //turn off borders

overriding specifity
when you use !important no other style will override this style

#nav a { color: red; }
a { color: teal !important; }  //notice the “!important” after the color.
coloring the background:
body { background-color: #6DDA3F; }

<!DOCTYPE html>



ul.nav li { display: inline; } /* horizontal links */

ul.nav a {

border: 1px groove #000;       /* borders around boxes */

padding: 5px 15px 5px 15px;    /* padding from inner text outwards */

margin-right: 5px;             /* space between boxes */

background-color: red;         /* color of background behind links */

text-decoration: none ;        /* remove underlines from links */
color: black;                  /* text color */




<ul class=”nav”>

<li><a href=”index.html”>Home</a></li>

<li><a href=”news.html”>News</a></li>

<li><a href=”reviews.html”>Reviews</a>



background images:

body {
background-image: url(images/bg.gif);

ways of doing it:
background-image: url(images/bg.gif);    //with no quotes
background-image: url(“images/bg.gif”);  //with double quotes
background-image: url(‘images/bg.gif’);  //with single quotes

background-repeat: no-repeat;  //do not repeat background image
The property accepts four values: repeat, no-repeat, repeat-x, and repeat-y:

background positioning:
One controls the three horizontal positions— left, center, right
the other controls the three vertical positions—top, center, bottom

background-position: center center;
background-position: right top;

make a background image fill the page
html {
height: 100%; }

background-position:50% 50%;
background-position: 5px 50%;

body {
background-image: url(images/logo.gif);  //background image
background-repeat: no-repeat;            //no repeat
background-attachment: fixed;  //background is always there even when you scroll page

short hand background setting:
body {
background: #FFF url(bullseye.gif) scroll center center no-repeat;
overflow is when you have a text box and the text overflows the textbox
overflow controls if that text is shown, and how.


float formatting
float has 3 options: left, right, or none

float: left;
float: right;

Width and height of objects:
width: 300px;
width: 30%;
height: 20em;

width: 100px;
padding: 15px;
border-width: 5px;
margin: 10px;

weight of tags

• A tag selector is worth 1 point.
• A class selector is worth 10 points.
• An ID selector is worth 100 points.
• An inline style (page 39) is worth 1,000 points.

http://jigsaw.w3.org/cssvalidator/   //css validator

Leave a Reply