Log in

View Full Version : 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 xD


<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 :D

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
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.


<!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:

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
<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 :)

Want to hide these adverts? Register an account for free!