FunToMakeAWebsite.com

 

contenttitleicon CSS

SooBest

<p style = "color:blue; font-size = 200%"> // Inline CSS  

<style type ="text/css">
p {
color:red;
}
.big {
font-size:500%;
}
#purple{
color: purple;
}
.underline{
text-decoration:underline;
}
.bold {
font-weight:bold;
}
div{
background-color:yellow;
width:100px;
height:100px;
border:15px black solid or dotted;//remember: width, color, style attribute
border-style:dotted solid inset dashed; //default to black border;
border-width: 1px 5px 10px 20px;
border-color: purple green red blue;
border-radius:10px; //app round corner effect.
border-radius:50px; //create a circle, half of the width;
}
.greyrectangle{
background-color:grey;
width:100px;
height:200px;
float:left; //the grey rectangle float to the left. If you float right, it will be aligned to the right column, everything else will float in the middle.
position: relative; //move the box relatively
left: 100px; //add 100px to the left, move it to the right
top: 300 px; //add 300px to top, move down. It will move on top of the exisitng object. -100px will shift it up.
z-index: 1;
margin:50px; //whole margin around the div, everything shift away 50px.
margin:30px 100px 30px 100px; //Top, right,bottom,left, clockwise.
margin-left:100px;
padding:10px; //is the space within the box;
}

p{
padding:0;
margin:0 //change the paragraph tag default to 0
font-family: Arial,Helvetica,sans-serif;
font-weight:bold;
font-style: italic;
font-size:500% //5 times large, 16px is default, 1em = 16 px by default.
text-decoration:underline;
text-align:right/center/justify; //depends on the scope,it will align accordingly
}
a:visited{
color:purple;//style visited color
}
a:hover{
font-style: italic;
}
.blackbox{
position:relative;
background-color:black;
z-index:2; //must have a position type first, larger z-index will be on top of the other item.
.positioning{
position:fixed //fixed won't move, like a side menu bar, when the rest of the page are scrolling down.
position: static //if you don't give position, it will by default as static;
position: absolute //it will be the absolute position.
.clear {
clear:both; }

</style> // Internal CSS


//External CSS: save all css code to style.css
starting with the text for the css style codes, such as:

body{

}

 


//html
ID is for a single element within a page.
Class(.) can be used many times.
ID(#) and class can be together
span can have more than one of certain class.
DIV is a logical content division (header, paragraph, footer)
DIV can be a rectangle
Picking Color: html-color-codes.info
<p class ="big"> this is big </p>
<p id ="purple"> this is purple </p>
<p>here is the <span class ="underline big bold">underline</span> and total </p>.

<div class="greyrectangle">
<p class ="big"> this is big. </p>
</div>
<div class = "clear"></div> //It make paragraph flow to the bottom of both left and right floats.


Referencing external CSS, use
<link rel="stylesheet" type="text/css" href=styles.css"/>