Shop More Submit  Join Login
×

:iconastrikos: More from Astrikos


Featured in Collections

Useful Bits and Bobs by SCFrankles


More from deviantART



Details

Submitted on
January 11
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
8,814 (21 today)
Favourites
139 (who?)
Comments
32
×

CSS Tutorials and Resources

Sat Jan 11, 2014, 5:09 PM
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 Neg0ne Gillian's Ultimate CSS Template by GillianIvy 

Visual Structure and Gruze vs Old
Old vs Gruze Journals by ginkgografix Gruze Journal Structure by xork Ultimate Box Model Snippet by GillianIvy 
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 GillianIvy Designing a Journal Part Two by GillianIvy Designing a Journal Part Three by GillianIvy 
CSS Tutorial - DIY by GillianIvy 

CSS cursor tutorial by Synfull


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

Custom Coded Widgets Tutorial by Gasara Journal Skins for Dummies Part 1 by SimplySilent  
Tutorial: CSS by Rusembell 

Gallery CSS 


Gallery CSS Tutorial by 1Foxylady How to Install a Gallery CSS by Kaoyux  

Useful articles

Basic codes for CSS journalBasic codes for CSS journal
Ok I don’t have any examples (except for my journal) but if you fallow what I say it’s really easy!!
Ok First,
Copy and past this into the space in your journal labeled "add CSS"! I will break it up into sections and help you fill it out!
.journalbox {
border-color: #------;
border-style:------;
background-color: #------;
color: #------;
font-family: -----;
font-size:--px;
text-align: ----;
}
.journaltop {
background-image:url(http://---------------------);
background-position:----------;
background-repeat: -----------;
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
padding-top: ------px;
}
.journaltop h2 {
background-color: #------; or
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
}
.journalbox .list {
background-color: #------;
color: #------;
font-family: ------;
font-size:--px;
text-align: ------;
}
.journaltext a:link {
color:#------;
font-family: ------;
font-size:--px;
}
.journaltext a:link
  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: low

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: low
  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 blur,
  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, thespook or ginkgografix, 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
  Simple Gallery CSSbody  {
color:#AAAAAA;
background-color:#550000;
}
a {
color:#AA5555;
border-color: #550000;
background-color:#550000;
}
a:visited{
color:#AAAAA;
border-color: #550000;
background-color:#550000;
}
a:hover{
color:#FF0000;
border-color: #550000;
background-color:#550000;
}
div.folderview-art span {
color:#FF2222;
background-color:#550000;
border-color: #550000;
}
.folderview-art span:hover {
background-color: #550000;
border-color: #550000; }
.folderview-art span:visited {
background-color: #550000;
border-color: #550000; }
.folderview-art span:inactive {background-color: #550000;border-
color: #550000}
H2{
color:#FF9999;
background-color:#550000;
}
   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: Ad
  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
 

Customize Your Literature ThumbnailsThis journal will break down the components of the various kind of Literature (and Journal) thumbnails now available, as well as discuss how to customize them in a journal CSS. I believe there's some overlap with gallery CSS, but these tips are specifically for the way things look in journals. :)
Anyway, this isn't a basic tutorial on coding but you can find great resources in groups like eCSSited.
If it's a PDF or something visual and has a PNG/JPG preview, it behaves the same as normal thumbnails, so it doesn't bear mentioning here.
The different types of thumbnails
 is the standard one. Anything that is either written in Sta.sh Writer or with the 'Enter Text' option in the Submit dialog will have this. Some include a preview image within the thumbnail itself, but I won't be discussing that here.
is the thumbnail for journals.
Unfortunately, :bigthumb: doesn't do anything special. But with Sta.sh Writ
  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 of
 



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



+fav Peace Heart 


Skin by Astrikos
I teach you things!
 
Build your arsenal of good, up-to-date CSS tutorials and learn to code fancy journal skins!

:la:

More articles:
Undiscovered Weekly: Resources:note: As you might have noticed, I am not allowed to do both stock and resources anymore. 
Instead, I am now only to be featuring 'resources'. 
If you are a resource provider or know of resource providers, please contact me!
I'd love to interview you. 
However, this time I shall be featuring under appreciated resource deviations only. 






Brush Pack:




2.4 Cone by theThirdCartel
Chinese patterns by Coby17
  Fella's Spotlight .11Fella's Spotlight
This article series aims to showcase select devious deviantART related art  around the community! One of our Affiliates will also be showcased. 
Astrikos for #fella 
Consider giving the article a :+fav: so it can reach more artists!
 Spotlight Journal + Gallery CSS


This is a gorgeous and festive journal skin!

Gorgeous and slick Gallery CSS
 Spotlight dA Tutorial

Need help on dA's new feature? This tutorial has got you covered!
 Spotlight Stamps





Well made stamps to customize
  PE: How to embed thingsWritten by `Astrikos for %projecteducate's community week. 
You may have noticed GIFS and hot things in people's journals and profiles. 
With HTML and CSS, you can add some hotness to your journals and profile.
Pretty neat, yes? 
Embedding Images and GIFs
DeviantART Images
    Images on dA can easily be linked with thumbcodes. 
While on a deviation page, all you have to do is scroll down and look right until you see:

Copy and paste the thumb code. 
:thumb367944988:

And if you want it bigger: 
:bigthumb367944988:

And bam. There you are.
If that's not good enough, you can play around with the size like this.. .
<da:deviation width="Number"  id="deviationID">
It's the thumbcode number without thumb in it... 
Trying it out... 
<d
 

Add a Comment:
 
:iconidjpanda:
iDJPanda Featured By Owner Jan 13, 2014  Student General Artist
Awesome journal! :clap:
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 13, 2014   General Artist
Thanks!
Reply
:icondeltapotamus:
Deltapotamus Featured By Owner Jan 12, 2014  Hobbyist Digital Artist
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.
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 12, 2014   General Artist
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.
Reply
:iconmaaiika:
Maaiika Featured By Owner Jan 12, 2014
Even if I don't know much CSS, I still feel smart. :XD: Especially around friends when they read long strings of code I have on my profile widgets!
It took awhile but I've gotten the hang of the basics. :)
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 12, 2014   General Artist
That's awesome! CSS is a lot of fun. :la:
Reply
:iconmiontre:
miontre Featured By Owner Jan 12, 2014  Hobbyist Photographer
In the footer!! Yeah :highfive:
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 12, 2014   General Artist
:la: first time in a while
Reply
:iconkommit:
kommit Featured By Owner Jan 12, 2014
Coding CSS is a whole religion.
Reply
:iconastrikos:
Astrikos Featured By Owner Jan 12, 2014   General Artist
:lol: It's fun to do though :la:
Reply
Add a Comment: