HOME | DD
PizzaPotatoNBacon — PE: The Gate To CSS
Published: 2013-06-08 17:00:26 +0000 UTC; Views: 6086; Favourites: 71; Downloads: 0
Redirect to original
Description
body div#devskin9436749 .gr-box { overflow:visible; background:transparent; margin:190px auto 0px auto; position:relative; padding:0px 10px 10px 10px; } body div#devskin9436749 .gr-top { display:none; } body div#devskin9436749 .gr-top .gr { display:none; } body div#devskin9436749 .gr-top h2 img { display:none; } body div#devskin9436749 .gr-top h2 { display:none; } body div#devskin9436749 .gr-body { background:#dae4d9 url(https://fc06.deviantart.net/fs71/o/2013/024/2/b/350289350_646739_322748439_464982_bggrad.png) 0px 0px repeat-x; border:1px solid #a6b2a6; overflow:visible; color:#5d625d; line-height:20px; padding:30px 0px 0px 0px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; box-shadow:0px 1px 5px #8c9688; -moz-box-shadow:0px 1px 5px #8c9688; -webkit-box-shadow:0px 1px 5px #8c9688; } body div#devskin9436749 .gr { background:transparent; border:none; } body div#devskin9436749 .gr-body .gr { padding:0px 20px 0px 20px; } body div#devskin9436749 .gr-body .gr .text { padding:10px 0px 0px 0px; } body div#devskin9436749 i.tri { display:none; } body div#devskin9436749 i.gr1 { display:none; } body div#devskin9436749 i.gr2 { display:none; } body div#devskin9436749 i.gr3 { display:none; } body div#devskin9436749 i.gb { display:none; } body div#devskin9436749 .top { position:absolute; top:-174px; left:0px; right:0px; width:100%; text-align:center; z-index:50; } body div#devskin9436749 .top img { margin:0px auto; min-width:529px; } body div#devskin9436749 div.board { width:360px; height:217px; background:url(https://fc03.deviantart.net/fs71/o/2013/024/d/d/350289350_646740_322748439_464983_pinboard.png) top right no-repeat; text-align:center; z-index:99; margin:-50px auto 0px auto; position:relative; } body div#devskin9436749 div.board .shadow-holder { float:left; top:0px!imporant; left:0px!important; } body div#devskin9436749 div.board img.avatar { position:absolute !important; display:block; margin:0px 0px 0px 0px; bottom:-18px; right:-75px; } body div#devskin9436749 span.board { display:none; } body div#devskin9436749 div.board .stamp { position:relative !important; left:20px; top:50px; } body div#devskin9436749 div.board .stamp img { box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; box-shadow:0px 1px 5px #4d1e1c; -moz-box-shadow:0px 1px 5px #4d1e1c; -webkit-box-shadow:0px 1px 5px #4d1e1c; } body div#devskin9436749 div.board .gallery { position:relative !important; right:78px; top:80px; color:#fff !important; font-size:20px; font-weight:bold; text-align:right; width:325px !important; text-shadow:#4d1e1c 0px 1px 3px; } body div#devskin9436749 div.board a { color:#fff !important; font-size:20px; font-weight:bold; } body div#devskin9436749 a { color:#B73E62; text-decoration:none; } body div#devskin9436749 a:hover { color:#E43A5D; text-decoration:none; } body div#devskin9436749 ul { margin:0px 0px 0px 0px!important; } body div#devskin9436749 ul li { list-style-image:url('https://fc05.deviantart.net/fs71/o/2013/024/6/0/350289350_646741_322748439_464984_bullet.gif')!important; } body div#devskin9436749 li b { color:#fff !important; font-size:14px; font-weight:bold; text-shadow:#8c9688 0px 1px 3px; padding:0px 12px 0px 0px; } body div#devskin9436749 li b sup { font-size:10px; font-weight:normal; } body div#devskin9436749 .list { display:none!important; } body div#devskin9436749 .bottom { position:absolute; right:6px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9436749 .bottom .commentslink { font-size:0px; background:url(https://fc02.deviantart.net/fs70/o/2013/024/8/d/350289350_646742_322748439_464985_comment.png) top no-repeat; color:#DAE4D9!important; text-decoration:none!important; padding:0px; margin:0px 15px 0px 10px; text-align:center; width:24px!important; height:24px!important; display:block; } body div#devskin9436749 .clear_ { clear:both!important; } body div#devskin9436749 .week { background:url(https://fc08.deviantart.net/fs71/o/2013/024/c/c/350289350_646743_322748439_464986_sepdots.gif) bottom repeat-x; padding:0px 0px 0px 80px; margin-top:-22px; } body div#devskin9436749 .week .cal { background:url(https://fc02.deviantart.net/fs71/o/2013/024/7/b/350289350_646744_322748439_464987_cal.png) top no-repeat; width:76px; height:38px; float:left; margin:0px 0px 0px -80px; text-align:center; color:#f2fbf0; text-shadow:#8c9688 0px 1px 2px; } body div#devskin9436749 .week .left { position:relative !important; left:3px; top:-6px; float:left; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9436749 .week .left b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9436749 .week .right { float:right; position:relative !important; left:-3px; top:-26px; margin:0px!important; font-size:17px; font-weight:bold; width:30px; height:30px; } body div#devskin9436749 .week .right b { color:#96a791!important; font-size:8px; line-height:14px; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9436749 .header { font-size:24px; margin-top:-12px; font-weight:bold; font-family:Trebuchet, Tahoma, Arial, sans-serif; padding:0px 0px 0px 5px; color:#B73E62; text-shadow:#fff 0px 1px 0px!important; } body div#devskin9436749 .links { float:right; position:relative; bottom:20px; right:0px; } body div#devskin9436749 .links img { padding-left:8px; } body div#devskin9436749 .buttons { position:absolute; left:20px; bottom:6px; color:#DAE4D9!important; z-index:99; padding:0px 0px 0px 0px!important; height:27px; font-size:0px; } body div#devskin9436749 .buttons img { padding-right:8px; } body div#devskin9436749 .dyk { border:2px solid #D31A3F; border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; background:#fff; height:250px; width:500px; margin-left:auto; margin-right:auto; padding-left:25px; padding-top:5px; } body div#devskin9436749 .dyk h3 { color:#4E4E4E; text-shadow:0 1px 2px #3F171F; font-size:18pt; } body div#devskin9436749 .dyk hr { border:1px dashed #A7A7A7; height:1px; } body div#devskin9436749 span.select { background:#D31A3F; text-shadow:0 1px 1px #3F171F; color:#fff; height:14pt; } body div#devskin9436749 .demo { background:#fff; border:2px solid #CE1B3F; margin-left:50px; width:300px; padding-left:6px; padding-top:5px; padding-right:6px; box-shadow:0 0 12px 1px #868C84; -moz-box-shadow:0 0 12px 1px #868C84; -webkit-box-shadow:0 0 12px 1px #868C84; color:#424740; } body div#devskin9436749 .demo:focus, body div#devskin9436749 .demo:hover { border:2px solid #E53054; } body div#devskin9436749 .bracket { font-size:30pt; display:inline; color:#E53054; } body div#devskin9436749 .listing { font-size:10pt; color:#8D162E; } body div#devskin9436749 .papaya { background:#FFCD71; background: -webkit-linear-gradient(#ffcd71, #c27f27); background: -moz-linear-gradient(#ffcd71, #c27f27); background:linear-gradient(#FFCD71, #C27F27); height:15px; border:2px solid #974E00; padding:10px; color:#2B1A07; width:300px; } body div#devskin9436749 .demoh1 { background:#fff; color:#000; border:2px solid #000; margin:20px; padding:5px; }
This article was written by PizzaPotatoNBacon for projecteducate 's Community Week June 3rd - June 9th. This article is written to explain the basics of Journal Skin CSS Code- however it does not contain much information on the layout and structure of journal skins. Basic knowledge of HTML is needed to understand most of the article. Does not include information on Gallery CSS. And yes, you do have to have a bit of patience when it comes to coding. If a lazy bum like me can do it, so can you.
Today, I'll be talking about CSS and how it works. This article is intended for newcomers and beginners, and only explains how it works, and how it "happens". From the syntax to the basic codes, from examples to links, this article that I had spent sleepless nights on is for you! I hope the information and explanations within this publication is easy to understand. If you have any questions regarding basic CSS, feel free to ask me.
An small introduction to CSS (No interesting Biographies Included)
As we all know, most web pages get some or all of their formatting from a good ol' Hypertext Markup Language code. It's pretty much common knowledge that a
One way to describe CSS and HTML and a web page, it's like a puppet. HTML is the puppeteer, and the web page is the puppet. However, CSS is like the clothing on the puppet- it stylises HTML, gives them a bit more flair and consistency. Another way to describe it, is that the HTML is a director. It tells the web page (Actor) what to do. And CSS, being the stylising code it is, is the Make Up Artist. HTML may control what's on your page, but CSS makes it look pretty and sparkly. This is a subjective description, but you catch my drift.
How does it work with deviantART Journal Skins, then?
All members of deviantART can use HTML in their journal entries- and you can stylize that HTML with a journal skin CSS! Unfortunately, while everyone can use [certain] HTML in their entries, they cannot have the HTML stylised by Journal Skins. The site manages to turn your code into installable skin- not sure if it's magic or just some bad*ss programming by the awesome dA staff- for others to enjoy. But how does CSS work in the skin itself?
Let's go back to the puppeteer theory. Now, imagine two kinds of puppeteers. One has lots and lots of accessories and dresses for their puppet, and the other has a limited amount of clothes for their puppet. The same applies to Journal Skin CSS. In Journal Skins, some things can't be applied to your HTML elements when they can in site-wide CSS.
Why am I putting this here? This is just a bit of a forewarning- that any neat code you find [outside of a deviantART Journal skin tutorial] may not work. Of course, this shouldn't be that much of a problem. Remember, limitation prompts creativity! Don't be afraid to tweak things around and break barriers- getting out of that shell is something we all love to do!
Jumping Into The Realm: Learn the lingo, and love the language
Terms:
- Element - In HTML, this is the content/effect/container formatted with its respective HTML tag.
- Declaration - In CSS, this a string of code that contains a property, and a value, that will modify your HTML elements and parts of your journal skin. Example:
b {
property:value
}
- Property - This is a certain setting of an element- a property (thus it is named so) of the element. What do I mean by this? Here is an example:
b {
height: - This tells the browser what property of the element are we going to modify. In this case, it is the height of the element.
}
- Value - This is how the setting is changed. Default skins have certain settings, so when you create a journal skin, you must declare a value for properties of an element, otherwise things will stay the same.
b {
height: 10px; - This tells the browser the "value" of your property. Values can range from color codes to equations- it depends on the property itself. SInce the property is the height of the element, I'm making the height of "b" 10px.
}
- [Magic] Curly Brackets [of fairy sparkles] - These babies: {}. Your modifying code goes in between these.
b { - This is the opening bracket. It goes right after your element, and right before your first declaration.
height: 10px;
} - This is the closing bracket. Once you're done with your code, close it with this hotshot.
- Comments - CSS comments are text that are in the code but don't affect it in anyway. These are text within /* */'s and they can be used for notes on the code, labels, extra code to be used later.
/* This is a Comment Hurr durr */
b {
height: 10px;
} Take note that, in deviantART CSS, one cannot put a comment in between declarations and Curly Brackets.
CSS Syntax
element {
property: value;
}
Here is a bit of a walkthrough when constructing the code for an element.
1. Let's specify an element to modified.
element {}
Let's use <h1> as our example element.
h1 {} <-- Easy-peasy, lemon-squeezy.
2. Okay, we've got our element. Time to give it basic features like a background, text color, and a border.
element {
property: value;
property: value;
property: value;
}
h1 {
background: #fff ; <-- We're altering the background of the element here. Pretty obvious, no? 
color: #000; <-- Here, we're setting the text color to #000, which is hex color code for black.
border: 2px solid #000; <-- This Property's syntax is (thickness of border line) (type of border line- solid, dashed, or dotted) (the color of your border).
}
3. Goodie-goodie! Let's add margin and padding!
element {property: value;
property: value;
property: value;
property: value;
property: value;
}
h1 {
background: #fff ;
color: #000;
border: 2px solid #000;
margin: 20px; <-- This is the space between your element and all other elements around it.
padding: 5px; <-- This is the space between the border of your element, and your element's actual content.
}
And this is what we get:
This is the effect!
Do you get how it works now? 
Basic Properties
- background - Obviously, it changes the background of your div. This can be an image, color, or even a gradient! The syntax for "background" is background: url('directlinkhere')|color|#00000|(r,g,b,a);. You can have both image and color in the background.
- color- This affects the text color within your div. The syntax for "color" is color: color|#00000|(r,g,b,a);.
- border - This is the border of your div. You can modify all or specific sides of the border by using these properties: border-left (modifies the left side), border-right (modifies the right side), border-top (modifies the top), and border-bottom (modifies the bottom). The syntax for "border" is border: 0px solid|dashed|dotted color|#00000|(r,g,b,a);.
- margin - This is the space between your element/div and other elements. You can apply margin to all sides, or to specific sides, similar to "border". Use the properties margin-left, margin-right, margin-top, and margin-bottom to modify left margin, right margin, top margin, and bottom margin, respectively. The syntax for "margin" is margin: 0px|0%|auto;
- padding - This is the space between the border of your div and your div's content. You can apply padding to all sides, or to specific sides, similar to "border". Use the properties padding-left, padding-right, padding-top, and padding-bottom to modify left padding, right padding, top padding, and bottom padding, respectively. The syntax for "padding" is padding: 0px|0%|auto;
If you notice, many journal skins modify normal HTML elements to fit the rest of the skin itself, so it's important that, in the case they don't look right with your skin, you must still modify the Standard HTML elements. Here is a list of "basic" HTML elements modifiable for Journal Skins.
b {}, strong {} - Technically they yield the same effect. A good way to make use of this fact is by making slightly different versions of the same effect by modifying one or the other. Perhaps But that's not all! We can create our own "elements", these are called "divs". This can be anything, really- from a new kind of text style similar to bold, italic, underline, to a fancy text container. From just images, to shapes. We can use the HTML elements we create to make works of art! CSS .papaya - We create our own HTML element via CSS, by placing a "." then your element/div class name. That's it. Just that. Then put in all that sexy code. .papaya { property:value; } HTML Effect Look! A fancy class~ Since it is not an "real" HTML element, we have to specify which div we're using by using <div class="divclassname">>. I just want to put this out here. Did you know you can modify elements within elements?You can modify what happens when one element/div is placed within another element/div. What magic happens when a Resources, Resources everywhere Here are some fabulous resources, should you want to know more about CSS. This tutorial is certainly a powerhouse. It is very comprehensive yet it is extremely understandable. With coverage on the basics, and lovely snippets, this is definitely worth a look. This nifty tutorial does a good job of explaining Journal Skin Structure. This is really worth a read, since it explains a whole lot of CSS terms and codes. :thumb354675797: This article is very good at explaining the structure of Journal Skins and basic CSS codes. It provides snippets and guides you through the process of making your own Journal Skin!
PE: CSS3 101 - Introduction:thumb205025644: :thumb205025644: Hey there Devious CSSkinners! :wave: First off, hover over the Title and Stamp to see some snazzy effects. That's the kind of stuff that CSS3 allows users to play around with. As I had been an Alpha Tester on :devdevbug:, we had a few CSS3 privileges to test in Journal Skins in which several deviants had asked me "How did you do that?" and "Please share the code so we can learn" so I've been meaning to give a few lessons on CSS3 since forever and :devprojecteducate: has given me the opportunity to do so :meow: These are the Topics that will be covered this week: May 27th - Introduction May 28th - Colo... Last Week, projecteducate hosted a CSS3 week! The articles in these week are very comprehensive, and can help make your CSS more sexy. Groups This group is dedicated to helping other improve or learn CSS skills. They collect everything CSS from tutorials to snippets, from CSS events announcements, to resources. This is a great place for all your [deviantART] CSS needs. Did you know? ...That there's a group dedicated to sharing various CSS tips and tricks, by the means of comprehensive yet fully understandable articles? Check out CSS-DYK , made for those who'd like to do more with their CSS. Read excellent articles, and suggest topics for the next issue! w3schools.com - A lot of articles on CSS and good explanations. Highly recommended for beginners. Css-tricks.com - Find neat tricks to use in your CSS! This site has a lot of snippets for you to use for your code, so it's worth a look at. ;D Cssdesk.com - Got a snippet you want to try out? How about a little bit of live CSS practice? Are you sure there's nothing wrong with your code? Try css-desk! A fabulous way to try out your CSS codes and have them brought to life. That's all I can fit into this article! While CSS is tough to get a hold of at first, but with a lot of practice, it's very easy to understand and code. If you have more questions about CSS, feel free to comment and ask me. Please note that I am not the best, however, and I don't guarantee I'd know the answer to your question, or the question to your answer. Thanks for reading, and have a nice day!
i {}, em {} - The same case as
u, ins {} - Nearly the same case as
strike {}
p {}
blockquote {}
sup {}
sub {}
small {}
.abbr {}
acronym
hr {} - Yes, you can style your horizontal lines.
code{}
tt {}
h1 {} to h6 {} - Take note that the selector for h2 should be .text h2 {} so you won't affect the journal title.
Related content
Comments: 36
This was a little hard to follow along to, but all I needed to do was read it another time to get it. Grate idea using other things to compare to the CSS and HTML. It really helped. I think its kind of hard to understand all the letters at once. Maybe giving a name for CSS and HTML will help us tell the difference. Other than that this was really helpful. Thank you very much!
PS: Your so smart I would have never been able to figure this out without your help. It was so confusing like my head would have popped off - @
👍: 0 ⏩: 2
Thanks for the constructive critique! I'll keep what you said in mind to improve my methods of explaining things.
Have a nice day.
👍: 0 ⏩: 1
Thank you you too!
👍: 0 ⏩: 0
Wow, this is really awesome!
and .abbr)!
👍: 0 ⏩: 1
Thank you~ And yes, you can edit these~
👍: 0 ⏩: 0
Really? 
👍: 0 ⏩: 1
You got knocked off by Zombie XD
👍: 0 ⏩: 1
You're welcome! I thought I should add it in since new skinners should know this fact.
👍: 0 ⏩: 0
👍: 0 ⏩: 0
Not bad! You did a really good job of explaining the difference between CSS and HTML.
I was going to say that you might want to change element to selector in your syntax description, but I guess it's easier for newbies to understand that way, especially if they don't know HTML very well
Though I'm pretty sure you can put comments between declarations - did you mean to say you can't put them inside declarations?
Also, thanks for that declaration definition! I didn't know what they were called, I always just called them "blocks" 
👍: 0 ⏩: 2
Really? I tried as much as I can.
While yes, I knew in CSS it would called selector, but I had used "Element" so it would be easier to connect the dots.
Well, I tried putting a comment between curly brackets (but not in between declarations), and it didn't work. It may work otherwise, but it doesn't work in dA CSS.
I didn't know what to call them before, until I checked w3school's article on syntax.
Thanks for your feedback. Have a nice day!
👍: 0 ⏩: 0
Well with her description, element describes the HTML aspect so that's correct. So what she could do is add another description below Element
Selector - In CSS, this selects which corresponding elements the declarations apply to ex: h1{} and h1 a{}
since selectors are pretty important
And no sadly in dA specifically you can't put the comments between declarations
b { font-size:20px;
/* comment between declarations */
height:10px;}
That won't work, only between different selectors for some reason
👍: 0 ⏩: 0
Nice article and thank you for the feature!
You might should change "All members of deviantART can use HTML in their journal entries" though - because it could confuse people, as non-PM users wouldn't be able to use a skin. Unless there is a promotion thingie going on.
👍: 0 ⏩: 1
You're welcome! They're really fantastic tutorials.
I did mention that the HTML can't be stylised if you were a non-premium member, which is kinda the same thing. I didn't want to make it look like non premium members were unfortunate without a PM, but I also wanted to make CSS look fun. 
Thanks for your feedback!
👍: 0 ⏩: 1
Ah ok, maybe i have overlooked that bit, as i haven't read it all very carefully
My pleasure!
👍: 0 ⏩: 0
Excellent article, fluffy!
Very succinct and informative.
👍: 0 ⏩: 1
