HOME | DD
SanguineEpitaph — CSS Tutorial 1.0
by-nc-nd
Published: 2011-05-22 16:55:35 +0000 UTC; Views: 3891; Favourites: 156; Downloads: 113
Redirect to original
Description
It's finally here!
I finally got around to creating a CSS tutorial as a companion to my HTML Tutorial: When I say COMPANION, I mean you should use them both together because they have the same design and refer to one another.
This CSS tutorial starts off basically, explaining what CSS does and what it is, and how it is structured.
Then it moves into more complex things like making HTML turn sexy colors and such! It finishes by giving you resources and explaining how to link the HTML to the CSS. 
Read it! Remember, students: CSS is the dressy tuxedo that you put your HTML in. HTML on its own is just a naked person!
References and Resources:
Tizag.com
W3Schools
Validator to Check Your Code!
If you have questions, Google them or ask me! I love answering questions.
That's all for now. I really hope this helps everyone to learn/starting learning CSS (and HTML?)! Stay awesome!
, =SanguineEpitaph
Related content
Comments: 91
I'm a beginner, I'm having an annoying problem for days no matter what layout I try to do, my sidebars always stay on the bottom... usually above the footer... Help...? Anyone...?
👍: 0 ⏩: 0
I'm going to use this to help me make journal skins. c:
👍: 0 ⏩: 0
Thank you so much for both the tutorials! CSS and HTML
I was always very found with learning the languages, now finally I can!!
👍: 0 ⏩: 1
You're very welcome! I'm glad they're helpful.
👍: 0 ⏩: 0
cool!!!!! umm what is the color code for blue and black?
👍: 0 ⏩: 1
If you just want blue and black you can type blue or black. 
If you want a special shade of either color, you need a color picker, like this: [link]
👍: 0 ⏩: 1
thank you!! that really help ^^ oh any ideas how to make the scrow box? i saw the journal: [link]
but i still don't really get where to put, because when ever i try it and it won't work
👍: 0 ⏩: 1
I think everything you need to know for scroll boxes is in that journal.
👍: 0 ⏩: 1
yea i know but i try and it didn't work that is what i mean, don't worry now i got it to work! ^^
👍: 0 ⏩: 0
How do you change the font of the text you are using?? I'm just confused about this and I want to make my own custom skin instead of use something else -w- cause I got premium..
👍: 0 ⏩: 1
Use this:
.selector{
font-family: Font Name;
}
👍: 0 ⏩: 1
both tutorials were great. i went through them just fine until i got to the end of the CSS part when you place that < link > to tell the html document code to link the CSS together, it wasnt working for me.
👍: 0 ⏩: 1
Glad you like my tutorials!
Could you copy and paste the tag you are trying to use in your HTML document?
👍: 0 ⏩: 1
[link]
Here this is my HTML Document.
I'm not sure really how to link everything I saw you do on the tutorial
I caught on quick though I just never did it this way with a notepad so I
was surprised and amazed on what was going on though with the HTML and some of
the CSS codes brought back memories which helped a lot :]
It's been a year or 2 since I coded so I'm a bit rusty lol
👍: 0 ⏩: 1
That just brought me to tinypic. 
Well, the CSS file and the HTML file are separate. The link tag joins them like this:
So, a usual looks like this:
If your CSS file is in the same folder, you can just type: href="style.css"
No folders need to be named.
I hope that helped?
👍: 0 ⏩: 1
oh man idk what i'm doing wrong D:
but are you talking about this link?
file:///C:/Users/MIMI.Mom-PC/Desktop/style/document.html
👍: 0 ⏩: 1
Well, if you have the .css file (style.css) for example and the html file (document.html, for example) saved in the same place, then you can just write the name of the file:
style.css
I see that right now you have your HTML document in your /style/ folder, so you might want to move it to the desktop. Then you can write this in your HTML document:
Let me know if that helps!
👍: 0 ⏩: 1
This is a late reply, but i'm seriously trying and its not
showing anything that i've done on my CSS coding when i open
it up from my document because it opens up as safari
and i don't want to bug and pester on this.
👍: 0 ⏩: 1
Can you note me the code you are using?
👍: 0 ⏩: 1
sorry for the such late reply.
I got a new computer and been upgrading and getting programs and i downloaded that notepad++
:] so i would like to re-learn using notepad++
👍: 0 ⏩: 0
Nice and simple tutorial. And it has info that I can easily access for a simple refresher on, say, the difference between ID & Classes.
👍: 0 ⏩: 1
Great to hear that, thank you! I didn't want to overload it too much, and tried to keep it simple.
👍: 0 ⏩: 0
fantastic stuff 
👍: 0 ⏩: 1
Ah, interesting suggestion! Any particular reason, or just to decrease the vertical length? 
Thanks for your feedback.
👍: 0 ⏩: 1
because it drives me completely nuts on a 1440px wide screen
sure!
👍: 0 ⏩: 1
Oh.
👍: 0 ⏩: 1
Wow. I am going to use both this and your XHTML tutorial for future reference in any coding I do.
They are both very easy to follow and easy to understand!
Plus Notepad++ is my new best friend for life. *drools*
👍: 0 ⏩: 1
It's so great to hear that I have been of service! 
Thank you for the support and the awesome comment!
👍: 0 ⏩: 0
👍: 0 ⏩: 1
Awesome! It's great to be of service.
👍: 0 ⏩: 0
It's killing me... But it's very helpful. I ought to try this sometimes.
👍: 0 ⏩: 1
I can answer questions if they arise!
👍: 0 ⏩: 1
I must say.. CSS is killing me.. I am so used to HTML..
I don't even know how to center a pic and have it placed towards the top of a box.. Grrrrr..
I finally got the pic up.. it's a header.. but its not centered or at the top of the box..
It's on my friends page.. [link]
I'm trying to do his Stamps box.. I also don't know how to get rid of or change the yellow title bar???
HELP ME PLEASE!!!
I'm sooo lost..
👍: 0 ⏩: 1
N'awww. CSS is awfully different from HTML, so it will take some getting used to. I hope it becomes less of a hassle soon.
I will say that on dA, you can't use CSS except in Journal and Gallery skins. If you want to align something to the center with HTML, it's
If you put an image in there, it'll be centered. I don't see a yellow bar on his page, though.
Does that mean you figured it out? Hope I helped a little.
If you have more questions, ask away!👍: 0 ⏩: 1
I did finally get the items centered.. I was using a different code someone gave me.. But a very sweet girl gave me the same code you just gave me..
I cannot for the life of me get four stamps across.. It will only let me do 3 across.. and I have tried EVERYTHING..
The bar is fine now..
Thank you for always being so kind and helpful
👍: 0 ⏩: 1
It might just be the width of the box preventing you from getting four stamps across. It looks like my custom boxes do that too, so no need to worry over that. 
No problem.
👍: 0 ⏩: 1
Thank you again.. I really appreciate your patience..
You are always helpful!!
👍: 0 ⏩: 1
Not a problem at all.
👍: 0 ⏩: 0
Awesome tutorial. Thank you for making the tutorial.
👍: 0 ⏩: 1
Yay! I'm glad it's useful.
👍: 0 ⏩: 0
POUND SIGN? £££££££££££££££££££££3
ISN'T # A HASH? HAASH! HASH, NEV, HASH!
👍: 0 ⏩: 1
In America we call it a pound sign. O.o
👍: 0 ⏩: 1
| Next =>