In your html / php file add this
<head>

<link rel="stylesheet" href="styles.css">

</head>

(The old type=”text/css” is no longer required)

Create your styles.css file

An example with a good main stylesheet default content

@charset "utf-8";


/*------------------------------------------*/
/*----- REMOVE VARIED BROWSER DEFAULTS -----*/
/*------------------------------------------*/
/*Remove padding and margin from all elements as defaults can differ between browsers*/ 
* { 
  margin: 0; 
  padding: 0; 
  border: 0; 
}

/*-----------------------------*/
/*----- MAIN PAGE WRAPPER -----*/
/*-----------------------------*/
body { 
  text-align:center;
} 

#wrapper {  
  width:980px;  
  margin-left:auto;  
  margin-right:auto;
  background-color: #FFFFFF;
  text-align:left;
}


/*----------------*/
/*----- TEXT -----*/
/*----------------*/
html, body { 
  font-family: Arial, Helvetica, sans-serif;
  color: #000000;
  font-size: 16px;    /*16px is the typical browser default text size*/
}

h1 { 
  font-size: 2.0em;
  line-height: 1.4em;
  margin: 0.67em 0 0.2em 0;
} 
     
h2 { 
  font-size: 1.7em;
  line-height: 1.5em;
  margin: 0.75em 0 0.1em 0;
} 
     
h3 { 
  font-size: 1.4em;
  line-height: 1.3em;
  margin: 0.83em 0 0.1em 0;
} 
     
h4 { 
  font-size: 1.2em;
  line-height: 1.1em;
  margin: 1.12em 0 0.1em 0;
} 
     
h5 { 
  font-size: 1.2em;
  line-height: 1em;
  margin: 1.5em 0 0em 0;
} 
     
p { 
  font-size: 1.0em;
  margin: 1.12em 0;
}

/*----- LINKS -----*/
a {
  text-decoration:none;
  color:inherit;
}
a:hover {
  text-decoration:underline;
  color:inherit;
}


/*-----------------*/
/*----- FORMS -----*/
/*-----------------*/
input.text { 
  padding: 3px; 
  border: 1px solid #999999;     
}

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published.