Yay for me.

myke · 23-08-2006, 09:19 AM

I learned the basics of CSS and created this:

I just mess around to teach myself

Code:

<head>
<STYLE TYPE="text/css">
<!-- 
H1.first {Font-family: Small Fonts; Font-Size: 7pt; color:#FFFFFF}
H1.second {font-family: Arial; font-size:7pt; color:#FF00FF}
A:link {font-family: Small Fonts; Font-Size: 7pt; color:#FFFFFF; text-decoration:blink}
a:visited {font-family: Small Fonts; Font-size: 7pt; Color:#FF00FF; tect-decoration:underline}
Body {background-color:#000000;}
-->
</style>
</head>
<body>

<a href="http://www.habboxforum.com">Test K</a>
<h1 class="first">HAiiii</h1><br>
<h1 class="second">HAIII</h1><br>
</body>

Eric30 · 23-08-2006, 08:37 PM

Nice, well done

Im not that good with CSS, i think i might learn it in the future.

Colin-Roberts · 23-08-2006, 08:42 PM

its not that hard to learn

myke · 24-08-2006, 09:52 AM

Yes I know but I am proud with myself because it's a new language I know

Infrontation · 24-08-2006, 09:56 AM

Nice one!

Colin-Roberts · 24-08-2006, 11:17 AM

should try making a layout now (dont flame me i know you need more then css to make a layout)

~~Oracle:~~ · 24-08-2006, 11:30 AM

Originally Posted by Pro-Soccer

should try making a layout now (dont flame me i know you need more then css to make a layout)

You don't exactly need much to make the most basic layout.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Most Basic CSS Layout - Oracle:</title>
<style type="text/css">
<!--
.container {
 width: 800px;
 border: 1px solid #000;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
}
.header {
 width: 800px;
 color: yourcolorhere;
 border-bottom: 1px solid #000;
}
.navigation {
 width: 780px;
 padding-left: 20px;
 border-bottom: 1px solid #000;
}
.content {
 width: 760px;
 padding-left: 20px;
 padding-right: 20px;
 height: 100%;
}
-->
</style>
</head>
<body>
<div class="container">
 <div class="header"><h1>IMAGE HERE</h1>
 
  </div>
   
   <div class="navigation">Home  About  Portfolio  Contact
   
   </div>
   
  <div class="content"><p>Add Text</p>
    
 </div>
 
</div>
</body>
</html>

It has absolutely no colour and no images, just turd use of CSS without hacks etc as it's just an example ;D

Colin-Roberts · 24-08-2006, 11:38 AM

Heres Css Thats Used On My Hosting Site:

HTML Code:

body	{
	margin: 24px 0px 24px 0px ;
	padding: 0px;
	background-color: #CCCCCC;
}

.border {
	border: 1px solid #BBBBBB;
}

.border-a {
	border: 1px solid #BBBBBB;
	background-color: #EEEEEE;
}

/* Text */

.main	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	line-height: 16px;
}
.main a:link	{
	text-decoration: underline;
	color: #0000FF;
}
.main a:visited 	{
	text-decoration: underline;
	color: #0000FF;
}
.main a:hover 	{
	text-decoration: none;
	color: #0000FF;
}

.lighter	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	line-height: 16px;
}
.lighter a:link	{
	text-decoration: underline;
	color: #0000FF;
}
.lighter a:visited 	{
	text-decoration: underline;
	color: #0000FF;
}
.lighter a:hover 	{
	text-decoration: none;
	color: #0000FF;
}

.darker	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #222222;
	line-height: 16px;
	border: none;
}
.darker a:link	{
	text-decoration: underline;
	color: #0000FF;
}
.darker a:visited 	{
	text-decoration: underline;
	color: #0000FF;
}
.darker a:hover 	{
	text-decoration: none;
	color: #0000FF;
}

.large	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #333333;
	font-weight:bold;
	line-height: 22px;
}

.largewhite	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	font-weight:bold;
	line-height: 22px;
}

.medium	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #333333;
	font-weight:bold;
	line-height: 22px;
}

.mediumwhite	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	font-weight:bold;
	line-height: 22px;
}

.small	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
}
.small a:link	{
	text-decoration: none;
	color: #0000FF;
}
.small a:visited 	{
	text-decoration: none;
	color: #0000FF;
}
.small a:hover 	{
	text-decoration: underline;
	color: #0000FF;
}

.nav	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #CCCCCC;
}
.nav a:link	{
	text-decoration: none;
	color: #666666;
}
.nav a:visited 	{
	text-decoration: none;
	color: #666666;
}
.nav a:hover 	{
	text-decoration: none;
	color: #333333;
}

.field	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #333333;
}

.white	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.white a:link	{
	text-decoration: none;
	color: #FFFFFF;
}
.white a:visited 	{
	text-decoration: none;
	color: #FFFFFF;
}
.white a:hover 	{
	text-decoration: none;
	color: #999999;
}

.italic	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #777777;
	line-height: 16px;
	font-style: italic;
}

~~Sygon.~~ · 24-08-2006, 12:16 PM

Code:

<style type='text/css'>

body {

text-align: center;

}

.c1 {

height: 700px;
background: white;
margin: auto;

}
</style>

<div class='c1'>Bla</div>

And there you have a useless piece of white centered crap.

YouFail · 24-08-2006, 05:51 PM

Lol Sygon. Well done Myke. Hope you learn CSS in more depth as CSS is the way to go

Thread: Yay for me.

Thread Tools

Yay for me.

Posting Permissions