Shop Mobile More Submit  Join Login
CSS Tutorial Part I: BASICS by Lilyas CSS Tutorial Part I: BASICS by Lilyas

It appears you don't have PDF support in this web browser. Download PDF

Hello my friends! :hexentanz:

Long have you waited but finally I finished the first part of the CSS tutorial. This introduction is designed for absolute CSS beginners and will show you step by step the ways of CSS coding and also a bit of designing a basic graphic layout.

Hit the Download button!

I wrote the document for this tutorial in Adobe InDesign and converted it into a pdf-file. You will find it together with some stock examples in the zip-folder when you download it.

Note: You need Acrobat Reader to open the document!!! It's free software.

:target: Get Acrobat Reader



Continuations of the basic tutorial will be:
  • Part II: Advanced CSS
  • Part III: Smart Tricks


I hope my demonstrations will be useful for you! Good luck and much fun learning CSS for DeviantART!!! :heart:
Add a Comment:
 
:iconpastel-bunbun:
Pastel-BunBun Featured By Owner Apr 23, 2014  Hobbyist Digital Artist
Im tying to use a CSS on my profile. Any help would be really appreciated!!
Reply
:icontansyuduri:
tansyuduri Featured By Owner Jun 16, 2013  Student Writer
how did you make the pretty graphics?
Reply
:iconlilyas:
Lilyas Featured By Owner Jun 16, 2013  Professional General Artist
With Photoshop.
Reply
:icontansyuduri:
tansyuduri Featured By Owner Jun 18, 2013  Student Writer
ohhh, you should do a tutorial on it.
Reply
:iconvalz138:
Valz138 Featured By Owner May 22, 2013
Thanks for this: splendid work, very useful, clear and well written! A great help! :thumbsup:
Reply
:iconnightscales:
Nightscales Featured By Owner Mar 6, 2013  Hobbyist General Artist
Thanks a lot!
Reply
:iconserafina-rose:
serafina-rose Featured By Owner Mar 3, 2013  Hobbyist Digital Artist
thank you so much... this is so helpful.

:iconredsparklesplz::iconredroseplz::iconredsparklesplz:
Reply
:iconmabusthedark:
MabusTheDark Featured By Owner Nov 8, 2012  Hobbyist General Artist
Thank you kindly for posting something like this! I was able to make a rather simple journal. ^_^
Reply
:iconastrikos:
Astrikos Featured By Owner Oct 9, 2012   General Artist
How lovely! Super detailed and wonderful.
Reply
:iconianaalves:
IanaAlves Featured By Owner Aug 9, 2012  Student Digital Artist
Wow, thank you so much !!
This is extremely useful, thankyouthankyou ;_; :#1:
Reply
:iconyoshuya:
Yoshuya Featured By Owner Aug 5, 2012  Student Digital Artist
Phew. Definitely needed this.
Reply
:iconzombieowl:
ZombieOwl Featured By Owner Jun 29, 2012  Hobbyist Digital Artist
So clear and helpful! Can't wait for the next ones! :w00t:
Reply
:iconwth-iz-this:
Wth-Iz-This Featured By Owner Jun 27, 2012
This great tutorial has been featured here: [link]
Great work!
Reply
:iconxxdreamdealerxx:
xxDreamDealerxx Featured By Owner Mar 26, 2012  Student General Artist
This helped me so much with my first journal skin! I don't know how to make it a divination, but I can use it! :D
[link]
Reply
:iconlevenark:
levenark Featured By Owner Mar 4, 2012
this is very awesome and usefull!thanks so much!:D

i can finally try making my own CSS now XD
Reply
:iconm10tje:
M10tje Featured By Owner Dec 28, 2011  Hobbyist General Artist
A big thanks for this !!
Reply
:iconexquisiteillusions:
ExquisiteIllusions Featured By Owner Oct 22, 2011
lmao.. "the gimp" but LOVE this tutorial!
Reply
:iconcelestialdemise:
CelestialDemise Featured By Owner Oct 8, 2011  Student Digital Artist
Nice job! A very handy referance!
Reply
:iconaim4beauty:
Aim4Beauty Featured By Owner Sep 17, 2011
Was reading it, but too complicated. Not a clear step by step of how to create headers or footer graphics, and how to get the number codings for the font colors, etc.. Not even sure what i just said. Need baby steps
Reply
:iconlady-sonata:
Lady-Sonata Featured By Owner Jul 8, 2011  Hobbyist Digital Artist
Thank you! :hug:
Reply
:iconmishakiara:
Mishakiara Featured By Owner Jul 3, 2011  Hobbyist Digital Artist
This is cool!~
However, it didn't work when I tried...
.journalbox
color:#3D4C8A;
text-decoration:none;
background-color:#5B71C7;
background-image;url([link]);
background-repeat:no-repeat;
background-position:center bottom;
text-align:left;
border-width:2px;
border-color:#000000;
}


Would you please explain what went wrong?
Reply
:iconmowito:
Mowito Featured By Owner Nov 4, 2012  Hobbyist Digital Artist
You've probably fixed the problem since you posted it more than a year ago but there's a missing { in your coding right after .journalbox
Reply
:iconmishakiara:
Mishakiara Featured By Owner Nov 4, 2012  Hobbyist Digital Artist
Ah, I don't have CSS abilities anymore anyways xD
But thank you anyways, it's still thoughful :3
Reply
:iconharrier2569:
Harrier2569 Featured By Owner Jun 29, 2011  Student Photographer
Thanks for helping out noobs like me with stuff like this :D
Reply
:iconslygirl55:
Slygirl55 Featured By Owner Jun 11, 2011  Hobbyist Digital Artist
Hey is there a sertain lingth you would say would be good?
Reply
:iconlilyas:
Lilyas Featured By Owner Jun 13, 2011  Professional General Artist
No, every journal has a different length. So don't determine it.
Reply
:icon4tw-basti:
4tw-bASTI Featured By Owner May 20, 2011
Das ist genau das richtige für mich!
Ich wollte nämlich einen dA-Skin entwerfen, den man mit Stylish anwenden kann.
Sachen wie Farbe, Schriftart und Transparenz konnte ich schon ändern, obwohl ich noch nie was mit CSS zu tun hatte^^
Danke für das Tutorial, das wird bestimmt sehr hilfreich sein <3
Reply
:iconjocelyner:
JocelyneR Featured By Owner Mar 22, 2011
Thank you so much for those tutorials, how nice of you! :heart:
Reply
:iconsuperwolfqueen21:
superwolfqueen21 Featured By Owner Feb 11, 2011  Hobbyist Digital Artist
Thank you for the tutorial, i understand now.
Reply
:iconshadowmoon9:
Shadowmoon9 Featured By Owner Jan 28, 2011
Hmmm,where's the part 2 and 3?
Reply
:iconlilyas:
Lilyas Featured By Owner Jan 29, 2011  Professional General Artist
Never done it. :oops:
Reply
:iconshadowmoon9:
Shadowmoon9 Featured By Owner Jan 29, 2011
I see haha,thanks a lot for this tutorial! btw I'm having trouble downloading the file,error occurs when I open it "it says file damaged blah blah" :(
Reply
:iconlilyas:
Lilyas Featured By Owner Jan 29, 2011  Professional General Artist
Oh, really? That's bad. :(
Reply
:iconshadowmoon9:
Shadowmoon9 Featured By Owner Jan 28, 2011
Hmmm,where's the part 2 and 3?
Reply
:iconoparu-chan:
oparu-chan Featured By Owner Nov 3, 2010  Professional Digital Artist
Is there a way to use something like *html in the DA css to make IE do something specific?
Reply
:iconspring-sky:
spring-sky Featured By Owner Aug 3, 2010  Hobbyist Digital Artist
You've been featured in my Let your journals shine news article :aww:
Reply
:iconspring-sky:
spring-sky Featured By Owner Aug 3, 2010  Hobbyist Digital Artist
You've been featured in my Let your journals shine news article :aww:
Reply
:iconlilyas:
Lilyas Featured By Owner Aug 18, 2010  Professional General Artist
:iconthankyou1::iconthankyou2:
Reply
:iconspring-sky:
spring-sky Featured By Owner Aug 19, 2010  Hobbyist Digital Artist
:iconyourewelcomesignplz:
Reply
:iconsun-stars-sea:
sun-stars-sea Featured By Owner Jul 11, 2010  Student General Artist
This is very usefull, thanks :)
Reply
:iconkararafromkeron:
KararaFromKeron Featured By Owner Jul 4, 2010
How could I add a picture in the bottom left corner? What's the CSS code for that?
Reply
:iconlilyas:
Lilyas Featured By Owner Jul 4, 2010  Professional General Artist
It's not that easy because it depends if you want to place it over the footer or use it as the footer itself.
Reply
:iconkararafromkeron:
KararaFromKeron Featured By Owner Jul 5, 2010
I want a picture at the top and bottom exactly like this: [link]


Thanks for your help! ^^
Reply
:iconlilyas:
Lilyas Featured By Owner Jul 5, 2010  Professional General Artist
You linked me to a complete journal. What do you mean? The repeating background? If you don't have any CSS experience you should ask someone to create a journal for you. Other than that you can learn all important basics from this tutorial, also how to place pictures in a journal.
Reply
:iconkararafromkeron:
KararaFromKeron Featured By Owner Jul 5, 2010
I have CSS experience. I made my own recently and I wondered how to place pictures in the background. Because the picture ended up repeating going down I wondered how to just make the picture at the top and another one at the bottom.
Reply
:iconlilyas:
Lilyas Featured By Owner Jul 5, 2010  Professional General Artist
To avoid pictures to repeat write in the CSS:backround-repeat:no-repeat;
For images at the top center add: background-position: top center;
For images at the bottom left add: background-position: bottom left;
If you want more than one picture in the background you need to use different classes because you always can use only one image per div.
Reply
:iconkararafromkeron:
KararaFromKeron Featured By Owner Jul 13, 2010
Okay so what's the exact css code to put a picture in the bottom left corner?
Reply
:iconlilyas:
Lilyas Featured By Owner Jul 14, 2010  Professional General Artist
There are different ways to code that. It depends on the CSS you already have so it makes no sense to talk about a CSS portion isolated from the rest of the code.
Reply
(2 Replies)
:iconjedi-of-shadows:
Jedi-of-Shadows Featured By Owner Jun 24, 2010
ohh Man, thank you!! I have been looking for something like this... Thanx!!! :D:D:D:D:D
Reply
:iconfallenskillz:
fallenskillz Featured By Owner Jun 8, 2010
Thanx =0)
Reply
Add a Comment:
 
×




Details

Submitted on
July 5, 2007
File Size
1.2 MB
Thumb

Stats

Views
43,515 (1 today)
Favourites
1,112 (who?)
Comments
419
Downloads
12,972
×