basic css

CSS tutorial

CSS stands for Cascading Style Sheets. Most good sites nowadays use css on their sites, as it makes it easier to edit and change style and colors. CSS is basically a very long HTML-code you can add to your pages. Note! Before you start using css you shoul be familiar to HTML-codes, and if you're new to piczo you should consider learning some HTML before you move on to css.

Step 1
Start with pasting this code on the page/pages you want to have css on.

body, html, div, font, p, td {
	font-family: Tahoma;
	font-size: 7pt;
	line-height: 7pt;
	color: #000000;
	margin: 0;
	padding: 0;
}

.entrytext{
font-weight: normal;
}
h1 {
	background: #000000;
	color: #ffffff;
	font-family: Tahoma;
	font-size: 10pt;
	line-height: 10pt;
	font-weight: bold;
	text-transform: uppercase;
	text-align: right;
	margin: 0;
	margin-top: 1px;
	margin-bottom: 1px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-bottom: 2px dotted #ffffff;
}
h2 {
	background: #404040;
	color: #ffffff;
	font-family: Tahoma;
	font-size: 7pt;
	line-height: 7pt;
	font-weight: bold;
	text-align: left;
	margin: 0;
        width: px;
	margin-top: 1px;
	padding: 0px;
	padding-bottom: 0px;
	border-bottom: 0px solid #FFFF00;
}
h3 {
	background: #c0c0c0;
	color: #000000;
	font-family: tahoma;
	font-size: 7pt;
	line-height: 7pt;
	font-weight: normal;
	text-transform: none;
	text-align: left;
	margin: 0;
	margin-bottom: 1px;
	padding: 0px;
	padding-bottom: 1px;
	border-bottom: 0px solid none;
}
.special {
	font-family: Tahoma;
	font-size: 7pt;
	color: #293763;
	font-weight: bold;
	line-height: 7pt;
}

a:link, a:visited, a:active {
        text-decoration: none;
	font-weight: bold;
	font-family: tahoma;
	color: #ffffff;
	cursor: crosshair;
}
a:hover { 
	text-decoration: none;
	font-weight: bold;
	font-family: tahoma;
	color: #000000;
	cursor: crosshair;
}

a.nav, a.nav:link, a.nav:active, a.nav:visited {
height:10;
padding:0;	
padding-left:1;
padding-right:1;
color:#000000;
border-bottom:1px solid #000000;
display:block;
text-transform:uppercase;
background:#ffffff;
}
a.nav:hover {
height:10;
padding:0;
padding-left:1;
padding-right:1;
color:#000000;
border-bottom:1px solid #000000;
display:block;
text-transform:uppercase;
background:#ffffff;
}

input, select {
	color: #FE7785;
	background: #ffffff;
	font-size: 7pt;
	font-weight: normal;
	font-weight: bold;
	text-decoration: none;
	font-family: Tahoma; 
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}
TEXTAREA {
	color: #FE7785;
	background: #ffffff;
	font-size: 7pt;
	font-weight: normal;
	text-decoration: none;
	font-family: Tahoma; 
	text-align: center;
	border-width: 1px;
	border-style: solid;
	border-color: #000000;
}

</style>

Here is a description of some of the most important parts in the code:
H1= main header
H2= small header; often used to describe or for dates in blogs etc
H3= usually where you put the content/text in the blog
a:link= determines how your links will look
a:hover= determines how your links will look when you hover (put your mouse over) them
a.nav= determines how your navigationtables will look like

Step 2
Now, try pasting this code on the same page you pasted the css-code

Maybe you see how it works now? If not, just play around with code; changing colors and sizes and see what you change...That's how I learned css:)

Copyright © 2008 septemberdreams.piczo.com. All rights reserved.

<< back >>

Piczo

basic css

CSS tutorial