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
ohhh, you should do a tutorial on it.
π: 0 β©: 0
Thanks for this: splendid work, very useful, clear and well written! A great help!
π: 0 β©: 0
thank you so much... this is so helpful.
π: 0 β©: 0
Thank you kindly for posting something like this! I was able to make a rather simple journal. ^_^
π: 0 β©: 0
Wow, thank you so much !!
This is extremely useful, thankyouthankyou ;_;
π: 0 β©: 0
So clear and helpful! Can't wait for the next ones!
π: 0 β©: 0
This great tutorial has been featured here: [link]
Great work!
π: 0 β©: 0
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!
[link]
π: 0 β©: 0
this is very awesome and usefull!thanks so much!
i can finally try making my own CSS now XD
π: 0 β©: 0
lmao.. "the gimp" but LOVE this tutorial!
π: 0 β©: 0
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
π: 0 β©: 0
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?
π: 0 β©: 1
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
π: 0 β©: 1
Ah, I don't have CSS abilities anymore anyways xD
But thank you anyways, it's still thoughful :3
π: 0 β©: 0
Thanks for helping out noobs like me with stuff like this
π: 0 β©: 0
Hey is there a sertain lingth you would say would be good?
π: 0 β©: 1
No, every journal has a different length. So don't determine it.
π: 0 β©: 0
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
π: 0 β©: 0
Thank you so much for those tutorials, how nice of you!
π: 0 β©: 0
Thank you for the tutorial, i understand now.
π: 0 β©: 0
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"
π: 0 β©: 1
Oh, really? That's bad.
π: 0 β©: 0
Is there a way to use something like *html in the DA css to make IE do something specific?
π: 0 β©: 0
You've been featured in my Let your journals shine news article
π: 0 β©: 0
You've been featured in my Let your journals shine news article
π: 0 β©: 1
How could I add a picture in the bottom left corner? What's the CSS code for that?
π: 0 β©: 1
It's not that easy because it depends if you want to place it over the footer or use it as the footer itself.
π: 0 β©: 1
I want a picture at the top and bottom exactly like this: [link]
Thanks for your help! ^^
π: 0 β©: 1
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.
π: 0 β©: 1
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.
π: 0 β©: 1
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.
π: 0 β©: 1
Okay so what's the exact css code to put a picture in the bottom left corner?
π: 0 β©: 1
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.
π: 0 β©: 2
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 β©: 1
The very first part in your CSS is:
.journalbox{
background-color:#000000;
border-width:4px;
border-color:#0EBFE9;
border-style:solid;
}
Add this to it anywhere within the brackets:
background-image: url(http://i430.photobucket.com/albums/qq22/PrincessVaporeon/imagoundersink.png);
background-repeat: no-repeat;
background-position: left bottom;
I used your header image as example, replace it with the picture you want to have at the bottom. Be aware that the included picture will be displayed in original size and at the very bottom of the journal and all text will be placed over it. Also over the "Comments | Previous Journal Entries" links. You cannot add margin or padding because that will move your complete journal and not only the image at the bottom.
π: 0 β©: 1
Oh wow! It works great! Thanks so much for your help! Your epic!
π: 0 β©: 1
| Next =>