CSS Tutorials and Resources

29 min read

Deviation Actions

Astrikos's avatar
By
Published:
22.1K Views
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;
}

Note  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.


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

Journal Tutorial -copyable CSS by AskGooroo  

Visual Structure and Gruze vs Old
Old vs Gruze Journals by GinkgoWerkstatt  Gruze Journal Structure by xork  
dA Piece by Piece : CSS + Box by ziinyu   Gruze Style Journal CSS - a guide by kuschelirmel-stock  

Walkthroughs + Designing Journal Skins + Gallery CSS


CSS Journal Tutorial -- Part I by cerena  CSS Journal Tutorial - Part II by cerena

CSS Tutorial Part I: BASICS by Lilyas  Designing a Journal Part One by gillianivyart  Designing a Journal Part Two by gillianivyart  Designing a Journal Part Three by gillianivyart 
CSS Tutorial - DIY by gillianivyart 

CSS cursor tutorial by Synfull


.:CSS Guideline by GinkgoWerkstatt  .:Making a journal layout by GinkgoWerkstatt  .:Walkthrough Gallery Template by GinkgoWerkstatt How to: Margin + Padding by GinkgoWerkstatt  
Advanced CSS journal tutorial by Krule  

  Journal Skins for Dummies Part 1 by SimplySilent  
Tutorial: CSS by Rusembell 

Gallery CSS 


<da:thumb id="270409112"/>  How to Install a Gallery CSS by Kaoyux  

Useful articles

  CSS Tricks: Background ImagesToday's CSS Trick will be about using background images in Journal Skins.
There are three types of images that are mostly used in journals skins: big background images, seamlessly repeatable patterns and icon/logo-like images.
Images can be used for all elements of a journal: in the header, footer, behind text, next to text etc.. Any journal element has the ability to contain an image
I cannot stress enough that the main objective of a journal is making written content enjoyable to read. It is all about readability and making it as easy for the reader as possible. Very often I come across pretty journal skins, that have a complete lack of readability. In one of my previous CSS Tricks I already mentioned the dangers of text lengths and how to limit the .text width to improve readability.
Problems with using images:
Despite being big an images turns out to be too small for a journalAn image does not repeat seamlesslyText becomes non-re
  CSS Tricks HubHere you will find an overview of my CSS Tricks series tutorials :) I will post it as a journal, as I don't see it fit anywhere else.
List of the tutorials so far
Limiting .text width
Learn how to limit the width of your text to improve readabilty. It's an easy trick and solves the problem of extremely wide running texts, especially an issue on wide screen monitors.
Theory/Examples Ratio: 70/30
Size: S
Difficulty: beginner

Responsive dA?
Due to the many different sizes a journal can have on dA, it is a good practice to think about how wide you want your skins to be. You will find the pros and cons of "fixed width" versus "responsive" skins.
Theory/Examples Ratio: 80/20
Size: M
Difficulty: beginner
  CSS Did You Know? - December 4th, 2012  CSS Did You Know? - November 20, 2012  CSS Did You Know? - November 28th, 2012 
CSS Tricks: ListsLists are awesome :meow: So let's talk about them :D
The 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 aka personal CSS.
So, let's get started.
Basics About Lists
There are two kinds of list: ordered and unordered.
Ordered means you will get a numbered list from 1 to how many items your list has.
Unordered means you will get bullet points in front of every item.
Ordered listCowherbThat news announcer hears the girl crying. I
  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 on dA and changing your browser window. You will notice how the ratio of all elements in width remains the same no matter how wide the browser window.
Now that we know that dA is responsive, we will soon find out that there is a responsive element inside dA, which reacts in first instance to the page on dA you are and in second instance to the brows
  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 limiting your text width.
Why is structure important?
Nobody likes reading a wall of text. If you look at an article and all you see is a grey blu
  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 Ikue, nichtgraveyet or GinkgoWerkstatt, 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 it is for the reader to follow the flow of text.
In some case you may have to even move your head from the beginning of a line to its end. And once you move your head, it becomes a lot harder to find the next line of text.
You may not even notice this while reading. But you will notice that your eyes get tired and you may even get a
  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!important;
padding:10;
margin:5;
}
.folderview-art .shadow .mild {
background:transparent;
}
.folderview-art  .shadow {
padding: 1px 1px 1px 1px;
margin: 5px 5px 5px 5px;
border-style:solid;
border-width:1px;
border-color: #000000;
}
.f
   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 of user's computers. They are also called system fonts, and can vary depending on your PC. Fonts on a Mac OS are not necessarily the same as fonts on a Windows OS.
Here's is a little example: on the left side is an image, an image created in PS on the right side. If both sides look the same, or at least very similar, it means they a
  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 layout.
This is it:

I wrote the document for this tutorial in Adobe InDesign and converted it into pdf. You will find it together with some stock examples in the zip-folder when you download it.
Continuations of the basic tutorial will be:Part II: A
  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: bold;
   letter-spacing: 1px;
   padding: 230px 0 0;
   text-align: center;
}
.journaltext  {
   background-image: url(MIDDLE PICTURE URL HERE);
   padding: 0 40p
  Let's code! Pushable ButtonsIntroduction
Buttons.
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 use them. Myself, I love to make buttons for one simple reason: It's a tonnage of fun.
What we'll be doing
The button base
Hover and active states


1. What we'll be doing
This CSS button.
Kidding. We'll make a spiff one. I'll elaborate. We will mak
 <da:thumb id="354675797"/>  !CSS Fonts: NormalAll Browsers
The following fonts would display in all browsers you use. (Title Font: 28px, Normal Text: 12px)
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Impact;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Stencil Std;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Verdana;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Trebuchet MS;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Arial;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:Arial Black;
deviantART.com
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
font-family:<
  Project Educate: User Friendly Journal SkinningThis article is written for fellow CSS coders who already have basic+ knowledge of deviantART journal codes.  This is not a beginner's tutorial.


User Friendly Journal Skin Coding
I've been making journal skins on DeviantART since 2010, I'd dabbled in CSS before, but never for other people.  I know what my codes are and how to use them to their full potential and often, just code on the fly when I want something to do something.  But making free and commission skins here showed me that I needed to make them as easy to use as they are pretty.  And really, who wants to type in a lot of extra HTML when they go to write a journal?  It is easy enough to access the artist's comments.

But even then, copy & paste, memorize that....  It can be a lot to deal with if you do not know CSS and HTML.  Which is the reason most people get someone else's skin design in the firs
 

<da:thumb id="360971204"/>  Transition effect without CSS3 transitionThere's no such thing as a former alpha tester~
:iconchallengeacceptedplz:
<
  HTML Guide for LiteratureBold / Strong
Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Italic / Oblique
Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Lorem ipsum dolor sit amet consectetuer adipiscing elit.
Blockquote
A blockquote creates a seperated part in a copy text. It is mostly used for quotes.
Text set in will have space on all 4 sides, making that part of the text stand out more.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetr
  How to: Navigational Table of ContentsHey all! 
With all these lengthy articles and tutorials flying around these days, I thought it'd be useful for those writers to know how to easily make a navigational Table of Contents at the top of the article where you can just click on the link that will automatically jump to that certain section within your page. And then go back up to the Table of Contents and easily browse through the page. All it uses is a bit of HTML, no CSS. Below is a working sample of what I'm going to explain:
Name of Topic

Table of Contents
1. Introduction
2. Body
3. Conclusion

1. Introduction
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fringilla enim eu nisl pretium pharetra. Aenean at tellus nec augue porta mollis. Maecenas volutpat urna eget tellus gravida vulputate.
  CSS, Text Shadow and Hover Effects Tutorial - TR(CSS, Text Shadow and Hover Effects) Tutorial. You can reach the tutorial from here. The tutorial is in Turkish but you can use Google Translate on my website. (Source files on my site) Demo Preview / Tutorial here</strong>
My tutorials site home page : http://bestpstutorials-tr.blogspot.com
İsteyen buradan derse ulaşabilir, ayrıntılı olarak anlattım. :http://bestpstutorials-tr.blogspot.com/2009/12/css-text-shadow-and-hover-effect.html
[
PE: A Guide to Gallery CSSA Guide to Gallery CSS
Learn the basics of Gallery CSS with this easy-to-follow guide! :dummy:
In this tutorial, we'll cover:
Adding gallery CSSCoding gallery skinsSome useful resources

Adding Gallery CSS
First of all, some important facts about Gallery Skins:
Only Premium Members are allowed to add CSS to their galleriesSkins can be added to both the Gallery and the FavoritesSkins can only be added to the Gallery folders and Favorites collections (shown in the sidebar) but not the main page itself
Step 1: Click on one of your Gallery or Favorites folders in the sidebar.

Step 2: Click the button called "Folder Options" or "Collection Options."
This button is located at the top right
 



Thanks for reading! I hope you learned something and enjoyed this article!



+fav Peace Heart 


Skin by Astrikos
© 2014 - 2024 Astrikos
Comments33
Join the community to add your comment. Already a deviant? Log In
ShadowWorldRed's avatar
I appreciate this resource, and thank you! :nod: