Want to learn how to make your page not just nice or pretty, but spectacular, unique, and all-around awesome?
This article covers the newest stage in the evolution of profile design: Profile CSS.Please keep in mind that this article is only for Premium Members who are not beginners to profile design. If this is your first time trying your hand at customizing your profile page, you'll probably find the following articles more helpful than this one.
PE: Decorating Your ProfileCommunity Week
Your profile page is the first thing people will see when they click on your name, so it's very important to leave a good impression! This article will provide some useful tips and tricks for both premium and non-premium members who want to convert their profile into their own, unique page. First off, some Do's and Don'ts of profile decoration:
Do:
Use dA's profile widgets-- there are lots of great options to chose from
Show off some art (that's what people are here for!)
Express your personality through colors, stamps, gifs, etc.
Don't:
Add so many images that your profile takes forever to load
Use garish or headache-inducing colors
Make text difficult to read with dark backgrounds
Non-Premium Widgets
While many widgets are restricted or locked for non-premium members, there are still a variety of great widgets that you can add to your profile, even without a membership.
PE: Profile Presentation: Tips and TricksProfile Presentation: Tips and Tricks
Your profile page can say quite a bit about what kind of person you are, and having a well-designed profile page will help ensure that your visitors leave with a good impression of you and your work. And if you do a remarkably fabulous job at designing your profile, people will not only be impressed, but they will also keep coming back to take another look. In this article, I will go over some useful tips and tricks for making your profile look professional but also personalized! 
This article is mostly directed towards Premium Members, but non-Premium members can still use some of these concepts to personalize their page.
In addition, for those who are new to profile decoration, I highly suggest reading my Decorating Your Profile tutorial first, as it goes over important basics of profile decoration.
Basic Design Concepts
Before we get started,
CustomBox+Journal Tips n Tricks-Updated 25-Sep-14More updates comings soon!!
You may put all your queries here in this blog comments.
Tips & tricks
1. How to align your elements in custombox or journal?
Use the following code:
Content here
You can change the alignment to left, right, center & justify by simply replacing the words as shown below
Content here
2. How do you change the font-size in a custombox?
Use the following code:
Your text here
Your text here
Your text here
Your text here
Your text here
Your text here
Your text here
The result:
Font size = 1
Font size = 2
Font size = 3
Font size = 4
Font size = 5
Font size = 6
Font size = 7
3. How to change your font in a Custombox/Journal?
Use the following tag to change your font in your custombox.
Your text here
Example
Your text here
Result
Your text here
Safe fonts to use
Serif Fonts
Georgia ----- The quick brown fox
Why use CSS?
Although setting up and learning to code CSS for your profile can be a hassle, there are a great deal of benefits to using CSS instead of only HTML:
Fonts: CSS allows for almost complete control over font styles, colors, and sizes (only limitation is that fonts must be Web Safe fonts or Google Fonts). HTML on DA is limited to only a certain number of sizes and a handful of viable font colors. While this can be circumvented through the use of fonts displayed as images using the img src code, it is far easier to use CSS since it allows content and styles to be changed with far less of a hassle.
Dynamic Content: HTML is static, which means that it does not allow for user interaction. In contrast, CSS makes your content dynamic by allowing content or styling to change when the user hovers or clicks on elements. This property can be used for practical purposes such as saving space (ex: an accordion menu) or for the simple purpose of making your page prettier or more interesting.
Hover Effects: One of the favorites with CSS are the hover effects, which include things from changing colors to scaling in size. With the new capabilities of CSS3 transitions, hover effects can now be coded to be smooth and professional.
At the same time, the possibilities with CSS are not entirely endless. Some drawbacks/limitations to profile CSS include:
Featured Deviation Widget: CSS can only be used in the Featured Deviation widget, which means that it can only be displayed in the top, left widgets of your profile page.
Max Height: The max-height of a journal displayed in the Featured Deviation widget is 350px. All journals with CSS must be kept under that limit to prevent being cut-off when displayed on the profile page.
Difficulty: Designing fully customized CSS widgets takes a good, working knowledge of HTML and CSS, which not all deviants have the desire or patience to learn. Fortunately, there are several easily-customizable resource templates (linked later in this article) to help those with little or no coding knowledge make their own CSS-equipped widgets.
How to Use Profile CSS
Now that we know exactly what we're up against, we can move on to learning how to add CSS to our profile page. CSS can only be added to widgets through the use of a coded journal and a Featured Deviation Widget. Here's a step-by-step walk-through of how it works:
First, go to your Sta.sh and click the large Compose in Sta.sh Writer button on the right side of the screen.
Add an appropriate title to your journal (this is what your widget will be called), and type your HTML in the main text box of your journal.
Click the small, blue Edit Skin link on the right side of the screen to open up the CSS. Name your skin and type your CSS in the main Skin CSS text box. Click the green Save button to save your skin.
Tip! In order to have your journal display on top of any custom box backgrounds you add to your widget, add the following bit of code to your CSS:.gr-box{
position:relative;
z-index:99!important;
}
On the submit page, select the Literature category instead of the "My Journal" category. Click the green Submit Now button to submit your coded journal as a literature submission.
Go to your profile page and add a Featured Deviation widget to your page. Click the pencil at the top right corner of the widget to edit it. Type any widget HTML into the text box, and then click the Choose A Deviation button.
Tip! You can add a background behind your coded journal using the basic custom box background code:<div class="popup2-moremenu"><div class="floaty-boat"><br><img src="IMAGE URL HERE"></div></div><div class="gr-box gr-genericbox">TEXT HERE</div>
Tip! To avoid miscats and to remove the coded journal from your gallery, you can now edit your deviation and move it to Scraps.
Examples and Ideas
Below are some creative and innovative ways people have used CSS to enhance their profiles. View the live versions of these examples by clicking the icon provided above the screenshot.
Displaying Artwork
In many cases, CSS is used to go beyond the default display of artworks in the Featured Deviation and Favorites widgets.
CSS was used to make the images change when hovered over.
CSS was used to create an animated slideshow that cycles through a series of images. On hover, the title of the gallery is displayed. Available for purchase here.
CSS was used to style the buttons, which change color when hovered over. Images corresponding to each button also appear when the button is hovered over. Available for purchase here.
CSS was used to create a dynamic display of deviations. When hovered over, the narrow deviations regain their proper width.
CSS was used to style the deviations into squares and to give them hover effects.
Additional Resources:
Links/Directories
CSS can also be used to make links, directories, and menus with interesting and dynamic hover effects.
CSS was used to style the buttons, which change color when hovered over. Available for purchase here.
CSS was used to style the buttons, which have a 3D appearance when clicked. Available for purchase here.
CSS was used to create an animated accordion-style menu. Images corresponding to each link also appear when the link is hovered over.
CSS was used to create a custom scroll bar and to style the links, which change color and get a small "Read"message when hovered over.
Additional Resources:
:thumb402818542::thumb402818471:
Miscellaneous
The possibilities with CSS are nearly endless. Below are some of the other creative ways CSS has been used to enhance profiles on DA.
Somewhat a revamp of the DeviantID. CSS was used to display text with fonts and colors that cannot be created using only HTML.
Revamp of the Friends widget. CSS was used to specify the position of the avatars.
Revamp of the Groups widget. CSS was used to arrange the group icons. The icons straighten and pop-up when hovered over.
CSS was used to create a calendar with hover effects on the days.
CSS was used to create a horizontally-scrolling archive of features.
As you can see, using CSS allows for far more possibilities with profile designing. Although it can be sometimes be a huge pain to learn, profile CSS can greatly improve the look of your page and impress your visitors.
Thank you for reading, and I hope this article was helpful! If you have any questions, please feel free to comment below. 
