HOME | DD
Lilyas — CSS Tutorial Part I: BASICS
#basics #blue #css #fantasy #introduction #simple #standards #tutorial #fantasyblue #csstutorial
Published: 2007-07-06 02:27:09 +0000 UTC; Views: 49884; Favourites: 1054; Downloads: 13064
Redirect to original
Description
Hello my friends!
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.
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!!!
Related content
Comments: 419
Okay I'll figure my CSS out and then ask you. Sorry for the trouble and thanks for your help! ^^
👍: 0 ⏩: 1
This is my CSS...Does this make a difference?
.journalbox{
background-color:#000000;
border-width:4px;
border-color:#0EBFE9;
border-style:solid;
}
.journalbox .list li{
background-color:#000000;
text-align:center;
color:#0EBFE9;
}
.journalbox .list li.a{
background-color:#000000;
text-align:center;
color:#0EBFE9;
}
.journalbox h2{
color:#0EBFE9;
font-size:24px;
}
.journalbox .journaltop{
text-align:right;
color:#0EBFE9;
background-color:#000000;
background-image:url([link] );
background-repeat:no-repeat;
background-position:left;
height:170px;
border-bottom:4px solid #0EBFE9;
}
.journalbox a{
color:#FFFFFF;
}
.journalbox a:hover{
color:#0EBFE9;
}
.journalbox .journalbottom a.commentslink{
color:#0EBFE9;
}
.journalbox .journalbottom a.prevlink{
color:#0EBFE9;
}
.journalbox .journalbottom a.commentlink:hover{
text-decoration:underline;
}
.journalbox .journalbottom a.prevlink:hover{
text-decoration:underline;
}
.journalbox .journaltext{
color:#0EBFE9;
border-bottom: 4px #0EBFE9 solid;
font-size:14px;
}
.journalbox .journaltop img{
display:none
}
.journalbox .title{
color:#0EBFE9;
font-size:22px;
font-weight:bold;
text-align:center;
letter-spacing:2px
background-color:#transparent;
}
.textareascrollbox{
height: 200px;
overflow: auto;
padding: 10px;
margin-top: -30px;
color:#0EBFE9;
font-size:14px;
background-color:#000000;
text-align:left;
border-width:2px;
border-color:#0EBFE9;
border-style:solid;
}
.textareascroll{
margin: 20px 0 0 20px;
_margin: 10 0 0 -10px;
padding: 5px 0 0 5px;
background-color:#000000;
}
.journalbox .textarea{
color:#0EBFE9;
font-size:14px;
background-color:#000000;
text-align:left;
padding:5px 5px 5px 5px!important;
margin:20px 20px 20px 0px!important;
border-width:2px;
border-color:#0EBFE9;
border-style:solid;
}
.linkbar{
background-color:#000000;
height:45px;
border-width:2px;
border-color:#0EBFE9;
border-style:solid;
text-align:center;
}
.stampbox{
height:80px;
width:120px:
overflow:auto;
padding:10px;
margin-top:-30px;
color:#0EBFE9;
font-size:14px;
background-color:#000000;
text-align:center;
border-width:2px;
border-color:#0EBFE9;
border-style:solid;
margin: 20px 0 0 20px;
_margin: 10 0 0 -10px;
padding: 5px 0 0 5px;
background-color:#000000;
}
.credit {
color:#FFFFFF!important;
font-size:12px;
font-family:rockwell;
text-decoration:none;
text-align:center;
}
👍: 0 ⏩: 0
ohh Man, thank you!! I have been looking for something like this... Thanx!!!
👍: 0 ⏩: 0
Thank you for such a well written and presented Tutorial, I used to be quite technical but over the years have slowed down a lot 
👍: 0 ⏩: 1
You mention that you can omit the little journal icon or use another one. How do you go about making your own and coding it to show up?
Thanks! ♥
👍: 0 ⏩: 1
The code to remove the default icon is this:
.journalbox .journaltop img {display:none;}
Creating your own icon is another topic, you can use any other icon as well. To incorporate your new icon into the layout you add a background to the ".journalbox .journaltop h2" part. It's like
background: transparent url(url of your image) top left no-repeat !important;
👍: 0 ⏩: 1
good tutorial... but i don't really understand it =/... I dunno if it's just the way youre wording everything, or if you're describing everything too complicated... or if its just the fact that its all so technical and i dont understand it even if i tried... i dunno...
I dont even understand the first step of the basics:
"For optimal web display you should select a minimum width of 1000 pixels. It depends on the size of your web browser window and your screen how much of the layout will be visable"
Are you trying to say that you create the whole of the design of the layout in a graphics software? And do you have to create the layout to the size it will be as the DA journal entry, or doesnt it matter? =/
Sorry bout that, its just really confusing... and i can see im not the only one who's confused
👍: 0 ⏩: 1
To create your alyout you should have graphic software, yes. And for the coding a little understanding of HTML and CSS. Sorry that you have problems.
👍: 0 ⏩: 0
i need to learn this.........come winter i will take the time
👍: 0 ⏩: 0
I tried the footer, but it ended up being used as the whole background.
👍: 0 ⏩: 0
This is really helpful! I was able to understand a lot of new things about CSS that I didn't get before. xD Thank you so much! <3
👍: 0 ⏩: 1
i am not a subscriber but can i make CSS journal skins and submit them
👍: 0 ⏩: 1
Yes, I think you can. But maybe it's a bit difficult to submit to the "Install to Journal" skin gallery because you normally put your CSS into your journal to be able to save the code as that file (which is a little different from your original code) you have to upload for the deviation. But you can't do that when you are not subscribed. Though you can ask a subscriber to save the deviation file for you if you give them your code.
👍: 0 ⏩: 1
hmmmmm. then i think i will ask someone to submit it for me when i make one
thanks so much
👍: 0 ⏩: 0
Whoo-hoo! I used this tut to create my own journal CSS! You should check it out!
👍: 0 ⏩: 2
Very nice. 
👍: 0 ⏩: 1
And it's been updated! And you're given credit, too.
👍: 0 ⏩: 0
wow, thank you so much for this tutorial!! it is amazingly helpful and simple to follow; i understand so much more of the basics now.
👍: 0 ⏩: 1
I owe you my first born child.
Wait, that wouldn't exactly be a "reward..."
Well, thank you so much for this guide. I was able to follow it and get the basic gist of simple journal css in a day! I used this in conjunction with your Blue Fantasy css to be learn how to customize my journal!
Great stuff, and I am SO looking forward to your advance journal css tutorial!
👍: 0 ⏩: 1
I am glad it was helpful for you!
👍: 0 ⏩: 0
You don't know how much I love u right now. 
👍: 0 ⏩: 1
I think I need to look closer
👍: 0 ⏩: 0
Is there any way to get *this* design fro my journal?
👍: 0 ⏩: 1
This is my personal style that I used on my stock account *LilyStox .
👍: 0 ⏩: 1
Ohh!! I see! Good choice! 
👍: 0 ⏩: 0
Cool...................
👍: 0 ⏩: 1
Thanks so much for sharing your knowledge and taking the time to put this together
👍: 0 ⏩: 0
most helpfull tutorial I found.
Thank you a lot
👍: 0 ⏩: 1
finally i can make my own css!!!
👍: 0 ⏩: 0
Thank you so much for this! I've been running in circles.
👍: 0 ⏩: 0
| Next =>