Staredit Network

Staredit Network -> Computers and Technical -> Making a Website

Report, edit, etc...Posted by Urmom(U) on 2006-08-23 at 21:02:21

Well I've decided to start making a website. I know some html but CSS is where I'm getting stuck. Can anybody help? I'm unsure about what I have to put before the { } tags. And btw, I'm using DreamWeaver 2004 if that helps.

Report, edit, etc...Posted by Pie_Sniper on 2006-08-23 at 21:25:02

CSS is for the most part simple.

CODE

<html>

<head>
<style type="text/css"> 
[CSS here]
</style>
<link rel="StyleSheet" type="text/css" href="Style.css" /> 
</head>

...

Then, in Style.css or where [CSS here] is, you put your CSS like this:

CODE

p // This is an element name. This will be applied to all <p> elements
{
}
p.SomeClass // This will be applied to all <p class="SomeClass"> elements. It will use some of the same styles as the global p CSS unless you override them in this one
{
}
.OtherClass // Without an element name before the class name, you can use this class with any element
{
}
p#Stuff // This is applied to <p id="Stuff">
{
}
#ID // This will be applied to elements with id="ID"
{
}

If you want to know what to put inside the curly braces, visit the CSS reference at W3Schools.

There also things called "psuedo classes" and "pseudo elements". They are:

Psuedo Classes
- :active - Styles used when an element is active. There's probably more, but the only one I know of is when you click on a link.
- :focus - Styles used when an element is in focus. For example, when you click in a textbox, you give it focus. (This may also mean when you press tab to go through links, but I'm not sure.)
- :hover - Styles used when you hover your mouse cursor over something.
- :link - Styles used for a regular link that has not been visited yet.
- :visited - Styles used for a link that has already been visited.
- :first-child - I'm not sure about this one, but I think it gives special styles when it is the first element inside of another, such as <div><p>asd</p></div>, I believe the <p> will use it's :first-child if it has one. Don't trust me on this.
- :lang - No idea.
Psuedo Elements
- :first-letter - This style will be applied to the first letter in an element.
- :first-line - This style will be applied to the first line in an element.
- :before - No idea.
- :after - None on this, either.

You use these like this:

CODE

p:pseudo-element or :pseudo-class
{
}
p.Class:pseudo-element or :pseudo-class
{
}

Report, edit, etc...Posted by Urmom(U) on 2006-08-23 at 21:33:04

Thanks, that cleared up a few issues that I had. But see in this http://www.w3schools.com/css/css_syntax.asp, how do you know what to put as the selector?

Report, edit, etc...Posted by Pie_Sniper on 2006-08-23 at 21:42:53

I've added some more info to my post. The selector is simply the element you wish to apply the style to. For example, in my examples "p" was the selector. If I wanted to apply it to <div> elements, I would have put div, div.Class, div#ID, etc.

Report, edit, etc...Posted by Urmom(U) on 2006-08-23 at 21:45:54

Oh ok, I think I'm understanding it more now. I'll post back if I need more help with making my website (it's going to be Über noobish lol).

Report, edit, etc...Posted by Pie_Sniper on 2006-08-23 at 21:55:15

I should also mention you can do this:

CODE

div.Class
{
}
div.Class p
{
color: #FF0000;
}

Then, while <p>s outside of <div class="Class"> will be normal, those inside of it will be red (#FF0000). You can also style many elements at one time, for example:

CODE

p, pre // These styles will be applied to both <p> and <pre>
{
}
p.SomeClass, pre.OtherClass // Same thing, with classes
{
}

Report, edit, etc...Posted by Urmom(U) on 2006-08-23 at 22:00:32

I think I'm going to need to learn some more stuff first before I can comprehend this.

This stuff is complicated, I don't know how you guys think it's easy.

Report, edit, etc...Posted by Syphon on 2006-08-23 at 22:07:15

Well, you just get used to looking at it once your eyes catch fire.

Report, edit, etc...Posted by Centreri on 2006-08-25 at 10:55:55

You can also use CSS to edit everything of a certain ID on the page. Works same as class, but instead of . you put a #.

CODE

#idnamehere {
color: #FF0000;
}

Report, edit, etc...Posted by Pie_Sniper on 2006-08-25 at 11:05:35

QUOTE

CODE

...
p#Stuff // This is applied to <p id="Stuff">
{
}
#ID // This will be applied to elements with id="ID"
{
}

Report, edit, etc...Posted by Centreri on 2006-08-25 at 22:01:42

Oh.. I really need to get to these threads faster

Report, edit, etc...Posted by Pyro-Fire on 2006-08-26 at 05:06:44

The best Website "programming" site ever made! includes: javascript, mysql, php, asp, css, html, xhtml, tcp/ip, xml, xsl, dhtml, .NET asp, sql, html dom, wmlscript, vbscript, .NET mobile, flash, and more! gives BASIC and TO-THE-POINT tips and pointers, and basic examples. also has a detailed reference of each type of "programming" you wish to learn. i personally use this every time im at my ftp program.

internet joke: linky

Report, edit, etc...Posted by Xx.Doom.xX on 2006-08-26 at 10:12:09

usehttp://html.net or w3schools. Theyve got good tutorials. Html.net has the basics of CSS that i used when i first learned CSS.

Report, edit, etc...Posted by Urmom(U) on 2006-08-26 at 20:16:26

Ok, I'll try that html.net site out. Basically all I need to learn HTML and CSS for is to make a website where I can put my maps on etc. (sort of like MilleniumArmy's)

Report, edit, etc...Posted by Pyro-Fire on 2006-08-27 at 03:37:51

i would recommend you get up your site with this hosting company: http://tweakwin2kxp.byethost22.com/index.php, they give you an ftp server

Report, edit, etc...Posted by Xx.Doom.xX on 2006-08-27 at 08:44:52

Or hostmatrix.org. You could try to get a site hosted from there by registering at hostmatrix.org and seeing if theyll accept. Just read the rules and FAQ.

You could also add in phpbb2 or simplemachines. They're both forums you can upload into your site. So youll have a forum and the maps you have made!

Report, edit, etc...Posted by O)FaRTy1billion on 2006-08-27 at 12:53:55

I set up my computer that I leave on as a server, then I installed PHP and made a file manager script with a login.

Report, edit, etc...Posted by Syphon on 2006-08-30 at 18:27:27

www.addyour.net, literally to good to be true.

Report, edit, etc...Posted by -bilal92- on 2006-09-01 at 12:48:58

is dreamweaver any good?

Report, edit, etc...Posted by Rantent on 2006-09-01 at 14:34:02

It's better then a text pad.

Report, edit, etc...Posted by Pie_Sniper on 2006-09-01 at 20:33:49

I want an exact replica of Notepad (XP version) with syntax highlighting and auto-indentation.

Report, edit, etc...Posted by Syphon on 2006-09-02 at 00:04:13

I want an exact copy of Windows XP notepad with highlighting and line numberation.

Report, edit, etc...Posted by Pie_Sniper on 2006-09-02 at 00:30:23

Er...

This is one of the reasons I specified XP in particular, along with the Replace feature.

:: Edit
Along with the fact that XP's Notepad is the first to feature a bottomless edit box.

Next Page (1)