Deviant Login Shop  Join deviantART for FREE Take the Tour
×

More from deviantART



Details

Submitted on
June 21, 2011
Link
Thumb

Stats

Views
2,482 (1 today)
Favourites
23 (who?)
Comments
41
×

Fella\'s Big CSS Guide

Tue Jun 21, 2011, 11:13 AM by RockstarVanity:iconrockstarvanity:


Welcome to fella's epic CSS reference blog! I rounded up some of dA's favourite, and most helpful, CSS-ers and picked their brains to bring you a comprehensive reference which includes great tips, tutorials, groups and resources to help you make the most of your dA experience using Cascading Style Sheets to prettify your journals, galleries, groups and userpages.

Big thanks to VSConcepts, SaTaNiA, ginkgografix and TwiggyTeeluck for their help in making this blog!






:bulletgreen: Starting from the absolute basics, how would you describe what CSS is and what it can be used for on deviantART?

VSConcepts says, Well, CSS Stands for Cascading Style Sheet. CSS essentially takes existing HTML and dresses it up. CSS controls how the basic HTML can be displayed to the viewer, and thus enhances the experience on the web. On deviantART, we apply CSS to our personal journals, our group blogs, and news articles, and even use it in some custom widgets. Nearly every standard web page includes both HTML, as well as CSS, in the design. A great add-on for Firefox 4 is the Web Developer which allows you to view a page's CSS which can help you find bugs, or even learn how CSS can be utlized and structured. On deviantART, premium members can make use of CSS to make a statement. If we think of our journals as miniature websites, we're showcasing something about ourselves, our skills, our interests, or our causes. Custom CSS designs make a more prolific statement.

SaTaNiA says, Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. (yeah, thanks Wikipedia!). It's simply a web language that will allow you to create and formatting your text/design on website. On deviantART you could use this language to create designs for your journals and gallery (you need to have a sub in order to make such things) and with some trick create a user-profile design page (see my frontpage).

ginkgografix says, CSS is the decoration of the online world. With it you can make everything a bit colorful and arrange elements like you want them to be. It's like when you are renewing your house/room, but you just need this one "tool" instead of wallpaper, paint, brushes and other things. On deviantART it can be used to make your own place a bit more personal, by giving your journal, gallery and the profile widget a custom look.

TwiggyTeeluck says, On dA, a CSS is basically a code that customizes your journal. You can use it to change the colors, change the text size and font, change the backgrounds etc.



:bulletgreen: If someone wants to customize their journal with CSS but has no knowledge of it, how would you suggest they get started?

VSConcepts says, Check out tutorials, and browse for deviations in the dA-Related > deviantART Skin > Journal CSS gallery. If you want to learn how to do it yourself, you should definitely check out 3 Schools. Of course epic deviants like xork have created useful tools like the JCE Tester, which lets you see the results of your code LIVE. Ultimately there's some very good and very relevant Tutorials right here on deviantART, almost all of which can be found in the gallery of ginkgografix. Once we know where to look, the next thing is to not succumb to information overload. With the relatively new Gruze style available here on deviantART, coding your own CSS has become relatively simple if not a little time consuming for those just learning. Send notes, ask questions, and keep at it

SaTaNiA says, CSS is one of my favourite languages because you can do awesome things with only a few lines of code, and one more thing - there are plenty of awesome websites to help you learn the CSS basics, like W3Schools and CSSTutorial. The only thing you need to keep in mind is what you want to do and be patient to learn the code. You will quickly succeed to great things!

ginkgografix says, With simple things - no matter how boring it is. It can be very confusing if you start too complicated right from the beginning. So either learn from pre-made skins by modifying colors, spacings and images (if allowed) or just change the colors of the default dA journal skin and try to add a background. Get a feeling for what you do first and try to understand why you need to do that, then the rest will follow after a while. And also check out tutorials on dA as there are plenty of them, made by beginners and advanced people. Surely there will be a few that can be helpful for starters.

TwiggyTeeluck says, Google! I learned most of what I know from Googling various tutorials. I got my basic knowledge from this, which I found extremely helpful.



:bulletgreen: Can you recommend any deviants who make awesome journal and/or gallery CSS?

VSConcepts says, Too numerous to name.  Well, alright.  Me (VSConcepts), ginkgografix, thespook, Jamaal10, BoffinbraiN, Lilyas, AwsumZ, etc... There are sooooooooooo many!

SaTaNiA says, I know several deviant who really rule the CSS world here on dA, and especially one deviant I've met during a devmeet in Paris - LeMex who loves to create minimal and pure designs like this and this. He can make really advanced and snazzy designs too, like this and this. There are some other awesome journal/gallery designers too, like Ikue and ginkgografix.

ginkgografix says, Oh, there are a lot of people that make awesome journals and often when I have to answer such questions my brain stops working and I can't remember them. But let's see which ones I get together: hanashira, LineBirgitte (sadly not that active anymore), NyssaB, Nesmaty, kuschelirmel-stock, Kjherstin, thespook (but he mainly provides code snippets), KovoWolf, VeraCotuna, Infinite705, pica-ae, fantasy-alive and Hairac. There are many many more. I really could go on like this!

TwiggyTeeluck says, Yes! Ikue, NyssaB, and Sliding-Panda are among my favorites.



:bulletgreen: Can you recommend any CSS-related Groups?

VSConcepts says, Of course, there's eCSSited, deviantCSS, CSS-Babes, iterators, Club-CSS, and many others, all of which can be found by going to the Groups page, and searching using the tool provided.

SaTaNiA says, There are tons of groups which deal with CSS but IMO you really need to watch eCSSited, CSS-Babes, iterators, eCSSercise and the awesome deviantCSS which help you to find all the keywords available for dA!

ginkgografix says, Of course - I run two of them. One is eCSSited, which was created to collect all different kind of helpful deviations like tutorials, code snippets, pre-made buttons and similar. The other one I run is eCSSercise. It still hasn't opened it's doors officially, but that will happen soon.  Then it will be a place for all those people who are willing to learn CSS/HTML and who want to customize their journals/galleries, but need help. It's a group that will focus on a mentor-student way of learning and "my" mentors are people who already share their CSS knowledge through tutorials and/or CSS skins. Additionally we have groups like deviantCSS, CSS-Babes and a few that are not that active or that don't focus on CSS alone like deviantART-Related or iterators.

TwiggyTeeluck says, deviantCSS



:bulletgreen: Can you recommend any journal and/or gallery CSS tutorials?

VSConcepts says, If you use the above links and tools, you're gonna find them.  Learning has to be something you commit to doing, or else you'll have to pay some money to someone to create for you. Visit ginkgografix for some of the best tutorials out there!

SaTaNiA says, The CSS Fairy, AKA ginkgografix, covers everything from basics to advanced CSS, like CSS Guidelines and Walk-Through Gallery Template. Be sure to check dA's tutorial section too, here.

ginkgografix says, I feel rather bad answering this, but I can recommend my own. The truth is, I don't look at many other CSS related tutorials because I don't need them (that sounds arrogant, doesn't it?), which makes it impossible to know which are explained well and which not. Additionally, it always depends on the person who wants to learn, if a tutorial is helpful for them or not. You know, the way things are explained - visually and literally - are important factors and not every tutorial might be easy to follow for everyone. But whenever I see useful resources, I'll try to add them to eCSSited so people can better decide on their own what is helpful.

TwiggyTeeluck says, This is my favorite because I found it the most helpful when trying to get basic knowledge on CSS.



:bulletgreen: Is there any other useful information or tips you'd like to share?

VSConcepts says, Prices for someone else to create your CSS for you tend to be fairly standard, because of size and coding.  They vary amongst those who offer CSS as Commissions, but tend to all fall within a certain range.  However you can't put a price on learning a new skill, and being able to do the work yourself.  With just a little help and some perseverance you can do it!

SaTaNiA says, Don't hesitate to cross the different chats or ask some questions. Try and try again...it might looks hard at first but you will see it will be really easy and efficient quickly. Don't hesitate to search for help on Google, after all Google is your friend too!

ginkgografix says, Be patient and don't get frustrated. There will be a lot of bugs, there will be a lot of errors and you will get desperate more than once. If you don't get further, stop for a while or ask a friend or any other person who knows CSS if they are willing to help out. Most of the CSS people here at dA are very friendly.

TwiggyTeeluck says, If you're trying to make your own journal skin, you're going to need a little patience. It took me days before I had something half-decent. Just practice and play around with the codes. And, never forget that Google is just a click away!






Before you get started, you might want to check out these dA FAQ entries about how CSS can be used on the site:

FAQ #66: What journal features do I have access to?
FAQ #62: How do I use Journal skins?
FAQ #892: What is the file format for Journal skins?
:faq671:
:faq760:

Remember, if you'd rather not code your own CSS for your journal, you can get your hands on lots of awesome Installable Journal Skins which don't require any knowledge of CSS to use. Find them in deviantART Related > deviantART Skins & Scripts > Journal & Gallery Skins > Installable Journal Skins



written by RockstarVanity

Add a Comment:
 
:iconmarshmallowcookiwolf:
Excuse me, but I don't know how to put CSS in my gallery folder the FAQs are not there can someone help me?
Reply
:iconunforgiven-wanda:
Unforgiven-wanda Jun 14, 2012  Student Digital Artist
Thank you for theses, they'll be quite helpful no doubt :)
Reply
:iconworldwar-tori:
WorldWar-Tori Jun 24, 2011   General Artist
I dare say; after reading this I may try css :paranoid: or at least think about trying and feel I accomplished enough for the subject :hmm:
Reply
:icongisapizzatto:
GisaPizzatto Jun 24, 2011  Professional Traditional Artist
Featured: [link] ;)
Reply
:iconrockstarvanity:
RockstarVanity Jun 25, 2011  Professional Photographer
Aww, thanks so much for the pimpage! :hug:
Reply
:icongisapizzatto:
GisaPizzatto Jun 26, 2011  Professional Traditional Artist
;) my pleasure!
Reply
:iconcatluvr2:
catluvr2 Jun 22, 2011  Hobbyist General Artist
:clap:

Not a single person commented on here who can't use CSS, I noticed. :iconteheplz:
Reply
:iconrockstarvanity:
RockstarVanity Jun 23, 2011  Professional Photographer
I wrote it and I can't use CSS (yet!), if that counts ;p
Reply
:iconcatluvr2:
catluvr2 Jun 23, 2011  Hobbyist General Artist
:O

I thought that being able to use CSS was something that came with the tick...
Reply
:iconrockstarvanity:
RockstarVanity Jun 25, 2011  Professional Photographer
Oh, right, I thought you meant people who didn't know how to use CSS, not people who didn't have the dA privs to do it. My brain doesn't work properly sometimes :aww:
Reply
Add a Comment: