HOME | DD
Astrikos — CSS Tutorials and Resources
Published: 2014-01-12 01:09:04 +0000 UTC; Views: 23427; Favourites: 208; Downloads: 0
Redirect to original
Description
body div#devskin10773855 * { background:transparent; border:none; margin:0; padding:0; } body div#devskin10773855 .gr-top img, body div#devskin10773855 .gr1, body div#devskin10773855 .gr2, body div#devskin10773855 .gr3, body div#devskin10773855 .tri, body div#devskin10773855 .hsep, body div#devskin10773855 .prevlink, body div#devskin10773855 .list { display:none; } /* background color and border */ body div#devskin10773855 .negate-box-margin { max-width:630px; margin:auto; background:#FFF; } /* Box Body of JS */ body div#devskin10773855 .gr-box { background:#f4f4f4 url('https://sta.sh/0be1g34nid6'); margin:0px; padding:10px; box-shadow:0px 0px 2px 1px #f5f5f5; -moz-box-shadow:0px 0px 2px 1px #f5f5f5; -webkit-box-shadow:0px 0px 2px 1px #f5f5f5; } /* -- HEADER -- Increase margin px to move the h2 box to the right */ body div#devskin10773855 .gr-top h2 { padding:25px; padding-top:70px; width:650px; margin:-50px; font-family:'Cardo', serif; font-size:23pt; font-weight:100; color:#FFF; background-color:black; } body div#devskin10773855 .gr-top { margin-bottom:-40px; } body div#devskin10773855 .gr-top a { color:inherit; font-weight:100; color:#FFF; } body div#devskin10773855 .gr-top h2:hover { color:#efefef; } /* Date And Time */ body div#devskin10773855 .gr-top span { color:#949295; margin:52px; margin-left:-20px; display:block; } /* Body Text Field */ body div#devskin10773855 .gr-body { background:#f4f4f4 url('https://sta.sh/0be1g34nid6'); padding:20px; max-width:630; margin:20px; } body div#devskin10773855 .text { font-family:Verdana; font-size:10pt; margin:10px; max-width:620px; } /* Links in Body text only */ body div#devskin10773855 .gr-body .text a { color:#8f6b98; } body div#devskin10773855 .gr-body .text a:hover { color:#6e5175; } /* Headings */ body div#devskin10773855 h1, body div#devskin10773855 h2, body div#devskin10773855 h3, body div#devskin10773855 h4, body div#devskin10773855 h5, body div#devskin10773855 h6 { font-family:'Cardo', serif; color:purple; font-weight:bold; } /* Lists */ body div#devskin10773855 ul br { display:none; } body div#devskin10773855 ol br { display:none; } body div#devskin10773855 dl br { display:none; } body div#devskin10773855 li br { display:inline; } body div#devskin10773855 dt br { display:inline; } body div#devskin10773855 dl br { display:inline; } body div#devskin10773855 ul { list-style-position:inside; padding:0; list-style-type:square; } body div#devskin10773855 ol { list-style-position:inside; padding:0; list-style-type:decimal; } /* Thumbs */ /* Lit and Journal Thumbs */ body div#devskin10773855 q { font-family:sans-serif; font-size:10pt; color:grey; } body div#devskin10773855 .thumb.lit { margin:1px; background-color:#FFF; padding:1px; } body div#devskin10773855 q strong { font-family:serif; font-size:12pt; text-transform:capitalize; color:purple; } body div#devskin10773855 q:hover { } body div#devskin10773855 img.lit { display:none; } body div#devskin10773855 .thumb.lit:hover { box-shadow:0px 0px 2px 1px #9660a3; -moz-box-shadow:0px 0px 2px 1px #9660a3; -webkit-box-shadow:0px 0px 2px 1px #9660a3; } body div#devskin10773855 .shadow-holder, body div#devskin10773855 .embedded-deviation, body div#devskin10773855 iframe, body div#devskin10773855 .daembed { border:#D2C1D6 2px solid; padding:2px; background:#F5F5F5; box-shadow:0px 0px 2px 1px #9660a3; -moz-box-shadow:0px 0px 2px 1px #9660a3; -webkit-box-shadow:0px 0px 2px 1px #9660a3; vertical-align:middle; } /* Blockquote */ body div#devskin10773855 blockquote { background:#f9f9f9; width:90%; border-left:2px solid #f68073; margin:1.5em 10px; padding:.5em 10px; font-style:normal; box-shadow:3px 4px 3px 0px rgba(46,42,40,1); -moz-box-shadow:3px 4px 3px 0px rgba(46,42,40,1); -webkit-box-shadow:3px 4px 3px 0px rgba(46,42,40,1); box-shadow:3px 4px 5px 0px rgba(46,42,40,1); -moz-box-shadow:3px 4px 5px 0px rgba(46,42,40,1); -webkit-box-shadow:3px 4px 5px 0px rgba(46,42,40,1); box-shadow:3px 3px 4px 0px rgba(46,42,40,1); -moz-box-shadow:3px 3px 4px 0px rgba(46,42,40,1); -webkit-box-shadow:3px 3px 4px 0px rgba(46,42,40,1); } body div#devskin10773855 blockquote:before { color:#614E94; font-size:4em; font-style:italic; } body div#devskin10773855 blockquote p { display:block; font-style:italic; } /* Bottom */ body div#devskin10773855 .commentslink { background:#a385aa; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#FFF; padding:5px; width:100px; display:block; margin:auto; } body div#devskin10773855 .commentslink:hover { background:#9977a0; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#f8f5f8; padding:5px; width:130px; display:block; } /* credit */ body div#devskin10773855 .credit { color:#b16c66; font-size:8pt; margin-left:410px; margin-bottom:-50px; } body div#devskin10773855 .flatbox { background-color:#cccbcc; max-width:520px; box-shadow:1px 0px 1px 1px #868286; -moz-box-shadow:1px 0px 1px 1px #868286; -webkit-box-shadow:1px 0px 1px 1px #868286; padding:8px; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; } /* purple box columns */ body div#devskin10773855 .pb { background-color:#482550; box-shadow:1px 0px 1px 1px #868286; -moz-box-shadow:1px 0px 1px 1px #868286; -webkit-box-shadow:1px 0px 1px 1px #868286; padding:8px; border:2px #4e2857; color:#fff; border-radius:1px; -moz-border-radius:1px; -webkit-border-radius:1px; display:inline-block; width:33.3%; vertical-align:top; } body div#devskin10773855 .isolation br { display:none; }
CSS and DeviantART
So you want to start creating your own journal skins? Learning CSS can be somewhat time consuming, but there are plenty of awesome resources to help you.
Remember, learning CSS and webdesign can land you a job in the future! Not only that, but coding Cascading Style Sheets is actually a lot of fun. It's awesome to see others using your Journal/ Gallery skins.
Finding others to code with
One thing that makes deviantART awesome is that there are over 26 million active users! This means a bunch of others will always be willing to learn with you. I'd be happy to answer any questions you have, or help you find the information you need.
CSS Basics
CSS is a style sheet language that defines how HTML looks on a page.
Element to Style { Property: Value; }
.text {
font-family: Verdana;
font-size: 10pt;
margin: 10px;
max-width: 620px;
}
That code is the exact one I used in this skin!
There's many properties to learn.
Here's a list of my favorites outside of deviantART.
- www.htmldog.com
- Codeacademy.com [Interactive and free]
- HTML.net
- Learnlayout.com [Good to start with if you are really confused]
w3schools.com is a popular site, but known for being inaccurate at times.
Journal CSS Tutorials
A collection of helpful CSS tutorials that you can find on deviantART!
Most are grouped similarly.
Blank Templates + Structure
Visual Structure and Gruze vs Old
Walkthroughs + Designing Journal Skins + Gallery CSS
Gallery CSS
Useful articles
CSS Tricks: ListsLists are awesome :meow: So let's talk about them :DThe basic list format is avaiable everywhere on dA, you do not need a premium membership to create a list. Of course you could just use :bulletgreen: or a symbol like ~ to indicate a new list item, but an actual HTML coded list has a lot of benefits over that.
Especially when you have single points that exceed a single line a HTML list, a line break appears at a spot you cannot control and therefore you will end up having no indentation and it will just look messy. You don't have to be a Premium Member to use the HTML for lists, see :faq104:You do need it, if you want to use Journal Skins...
CSS Tricks: Responsive dA?If you are at least slightly into web design and/or using mobile devices to browse, you should have come across the term "Responsive Webdesign". Basically it means that a website is set up in a way so it gives the best browsing experience no matter on what device you are viewing it.One term that is often mentioned along with it are "Fluid Designs". This usually refers to web sites that use % instead of px values to define sizes inside the layout.This necessary trend in web design made me think about the deviantART.com layout. Because it is a design that has been working responsive for several years! You can test this by going to any place ...
CSS/HTML Tricks: Article LayoutHello!
Another tutorial for news articles and journals on dA!This one is meant to help you add structure to your news articles (and personal journals) and thus enhance the reading experience for your audience.I have already written a tutorial on the topic of HTML Literature , but only showcased what is possible there. It is almost the same as :faq104: This tutorial will try to explain why you should use additional HTML in your articles and how it helps improve their quality.Also it turned out to be quite long, so skip to your liking. For further reading please refer to CSS Tricks: Limiting .text width , which explains the necessity of l...
CSS Tricks: Limiting .text widthHello!
Today I wanted to share a little CSS Trick with you :la: Many other people have done this before, awesome people like :devikue:, :devthespook: or :devginkgografix:, and now it's me too :giggle:
This first trick is very simple in execution, but I want to spend some time explaining why you should do it. That's why this journal has become a bit long :lol: All about improving Readability! When it comes to designing long copy texts, there are quite some challenges in order to create something easy to read and enjoyable to look at. One of the issues that may occur is text, that is running too long. The longer a line of text gets, the hard...
Simple Gallery CSSbody {
color:#AAAAAA;
background-color:#000000;
}H2{
color:#EEEEEE;
background-color:#000000;
padding: 2px 2px 2px 2px;
height:50px;
}.description{
width:150px;
background:#000000;
color:#pink;
float: left;
margin: 1px 100px 1px 1px;}.folderview-top
{
color:#pink;
background-color:#000000;
padding: 10px 10px 10px 1px;}a:visited{
color:#AAAAA;
border-color: #000000;}a:hover{
color:#FF0000;
border-style:solid;
border-width:1px;
border-color: #000000;
}.folderview-art {
padding:5!important;
margin:5!important;}.folderview-art span {
color:#FF2222;
background:transparent!imp...
CSS Tricks: Fonts and Text BasicsToday I want to talk about fonts in journal skins :XD: You probably saw this one coming :giggle: And maybe you also saw coming that this will be a rather long tutorial :faint: There is just a lot to say about this! Actually this will only be the first one about fonts and text. This one will cover the basics of working with fonts.I will start by talking a bit about web-safe fonts and the concept behind a fallback hierarchy. Further down you'll find a selection of properties that can be styled with examples and explanations.So, let's go! :eager: The standard web safe fonts A font is defined as web safe when it is installen on a great number ...
CSS Tutorial Part I: The BasicsHello my friends! :hexentanz:Since a while I am among the CSS designers here on DeviantART. I realized that there are high needs for journal layouts but there are not enough designers to create them. CSS templates help a lot but my POLL resulted that most people think there should be more CSS tutorials available. So I decided to create one. A CSS tutorial in 3 levels: basics, advanced and tricky stuff.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 layou...
Blank Journal CSS Code/Tutorial.journalbox
{
max-width: 586px;
_width: 688px;
background-color: COLOR CODE HERE ;
background-repeat: no-repeat;
text-align: justify;
font-family: FONT NAME HERE ;
font-size: 15px;
border: none;
color: COLOR CODE HERE ;
}.journaltop {
background: url( TOP PICTURE URL HERE ) no-repeat scroll center top transparent;
font-size: 11px;
height: 270px;
padding: 240px 45px 0 0;
text-align: center;
color: COLOR CODE HERE ;
}.journaltop img{
display:none;
}.journaltop h2 {
background-color: transparent;
color: COLOR CODE HERE ;
font-family: FONT NAME HERE ;
font-size: 21px;
font-weight: b...
Let's code! Pushable ButtonsIntroductionButtons.You all know buttons, because buttons are everywhere. We mostly take them for granted. They are there to direct us to somewhere else and God protect a button that doesn't do exactly that. We rarely give them a second thought, despite the fact that the appearance of a button is as much a design choice as any other element; a button can make or break a design.Small advice: Simple (or rather: easy to navigate) is the new black. We established that buttons are part of that equation. It is my experience that buttons in journal designs aren't that highly sought after. People want them for their function, and even then rarely ...
Thanks for reading! I hope you learned something and enjoyed this article!
Skin by Astrikos
Related content
Comments: 33
I've always used w3schools; I never knew it was inaccurate. Do you have examples of some of the inaccuracies?
Since I'm self-taught, I would hate to have been doing something wrong the entire time.
👍: 0 ⏩: 1
Well, I've just read up that some of their topics are outdated. I've started there too. Just cross reference with other sites like htmldog. And it also doesn't always teach you all the smarter ways to code. And why your code is doing what it does.
👍: 0 ⏩: 0
Even if I don't know much CSS, I still feel smart. 
It took awhile but I've gotten the hang of the basics.
👍: 0 ⏩: 1
That's awesome! CSS is a lot of fun.
👍: 0 ⏩: 0
Thank you a lot for these helpful resources! 
👍: 0 ⏩: 1
Thanks for featuring my tutorials 
👍: 0 ⏩: 1
Your tutorials are always amazing!
👍: 0 ⏩: 1
Great compilation of resources. Adding to my frequently referenced folder, I get people asking me CSS questions all the time and this will come in handy ;D Thanks for the feature.
👍: 0 ⏩: 1
👍: 0 ⏩: 1
I'm glad, since I am not particularly good at writing them... hahaha. So many others make pretty tutes. My resources are all so ugly looking
👍: 0 ⏩: 1
You are! Your resources are really helpful!
Nahh!
👍: 0 ⏩: 1
;D But so many others do theirs so artfully. I just slap info together in a screenshot blah sort of way. So, easy to follow but not pretty to look at. I do need to make more. I'm certain I have more knowledge to impart.
👍: 0 ⏩: 1
xD That's how some of my older articles were. They were awful!
👍: 0 ⏩: 1
👍: 0 ⏩: 0
👍: 0 ⏩: 1
I'm too much of a knob to understand these things, but very good resource guide. Thanks.
👍: 0 ⏩: 1
👍: 0 ⏩: 0