CSS Did You Know? - April 9th, 2013
|6 min read
Recommended Journals
PE: CSS3 101 - Color Gradients
:thumb205025644: :thumb205025644: Table of Contents: This article contains two major topics of Gradients: 1. Linear-Gradient  :dalogo: Vertical  :dalogo: Horizontal  :dalogo: Diagonal  :dalogo: Angled  :dalogo: Repeating-Linear-Gradient  :dalogo: 2. Radial-Gradient  :dalogo: Repeating-Radial-Gradient  :dalogo: Supported by: ~Firefoxplz (https://www.deviantart.com/firefoxplz) Firefox 16+ :icongooglechrome: Chrome 26+ :iconsafariplz: Safari 5.1+ :iconinternetexplorerplz: Internet Explorer 10+ :iconoperaplz: Opera 12.1+ What are Gradients? A color gradient, in terms of computer graphics, specifies a range of positioned colors to fill a certain region. By specifying a differen
Project Educate: User Friendly Journal Skinning
This 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 enou
Starting with dA CSS
Back when CSS was allowed for journals for the first time there had been only a few deviants like ClaireJones (https://www.deviantart.com/clairejones), Lilyas (https://www.deviantart.com/lilyas) or kuschelirmel-stock (https://www.deviantart.com/kuschelirmel-stock) who provided free skins for everyone. Through the time more and more people enjoyed working on CSS skins and we also got the chance to skin our galleries. These days, and thanks to the great resources about journal and gallery CSS that have been created, it is possible for nearly everyone to code their own skins and/or to share them with others. Still there are many people who struggle with some basic things, which is why we want to focus on some of them here. :thumb168988093: General :po
bradleysays's avatar
By bradleysays   |   Watch
53 36 16K (1 Today)
Published: April 9, 2013

{

CSS Did You Know?

}


Volume 8


:iconcss-dyk:

Welcome

CSS can be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note CSS-DYK. :)

Inside

CSS-DYK by bradleysays
Tiered Classes by gillianivyart




:iconbradleysays:

CSS-DYK Group



CSS Did You Know? has it's own group now. Be sure to watch or join CSS-DYK for the latest CSS news and our weekly CSS Did You Know? articles.

You can become a regular writer of the CSS DYK Articles! Just apply to be a "Writer" via the join group button. :)




:icongillianivyart:

Tiered Classes



Cleaning up how you write your CSS can really make it easier to read and edit later on down the road.  Removing duplicates, grouping similar coded classes together, and less code to write out.  If you have several elements that all have the same color|font|text-decoration|padding|margin... etc, then stacking them in one style container will help you not need to write these all out multiple times.

How to code it


Let's say we want all the subheadings in a document to be the same color #222222.  Normally, we would write them each out one class selector at a time.  But this becomes long and tedious and not very neat to come through and edit later.  (say you want to change them all to #444444, you would need to edit it 6 times!)  To tier these classes, simply separate each class with a comma before writing in your style information.

Example




h1{
color:#222222;
}
h2{
color:#222222;
}
h3{
color:#222222;
}
h4{
color:#222222;
}
h5{
color:#222222;
}
h6{
color:#222222;
}


Becomes:


h1, h2, h3, h4, h5, h6{
color:#222222;
}

One beautiful line of code, rather than a whole page of the same thing over and over.  Less to type, less to read and easy to edit.  This can be applied to everything.  Say you want to remove the gruze styling of journal skins and the journal image book (and the empty space it leaves behind), and the entire moods box?  You can stack them all into one definition.

.gr1, .gr2, .gr3, .tri, .gr-top h2 img, .indent, .list{display:none;}


Voila!  No need to write display:none; over and over and over.  Anything else you want hidden, add to the list.

Happy Coding,


Recommended Journals
PE: CSS3 101 - Color Gradients
:thumb205025644: :thumb205025644: Table of Contents: This article contains two major topics of Gradients: 1. Linear-Gradient  :dalogo: Vertical  :dalogo: Horizontal  :dalogo: Diagonal  :dalogo: Angled  :dalogo: Repeating-Linear-Gradient  :dalogo: 2. Radial-Gradient  :dalogo: Repeating-Radial-Gradient  :dalogo: Supported by: ~Firefoxplz (https://www.deviantart.com/firefoxplz) Firefox 16+ :icongooglechrome: Chrome 26+ :iconsafariplz: Safari 5.1+ :iconinternetexplorerplz: Internet Explorer 10+ :iconoperaplz: Opera 12.1+ What are Gradients? A color gradient, in terms of computer graphics, specifies a range of positioned colors to fill a certain region. By specifying a differen
Project Educate: User Friendly Journal Skinning
This 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 enou
Starting with dA CSS
Back when CSS was allowed for journals for the first time there had been only a few deviants like ClaireJones (https://www.deviantart.com/clairejones), Lilyas (https://www.deviantart.com/lilyas) or kuschelirmel-stock (https://www.deviantart.com/kuschelirmel-stock) who provided free skins for everyone. Through the time more and more people enjoyed working on CSS skins and we also got the chance to skin our galleries. These days, and thanks to the great resources about journal and gallery CSS that have been created, it is possible for nearly everyone to code their own skins and/or to share them with others. Still there are many people who struggle with some basic things, which is why we want to focus on some of them here. :thumb168988093: General :po
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
Comments (31)
KovoWolf's avatar
KovoWolf|Professional General Artist
Excellent <3
Reply  ·  
CypherVisor's avatar
Nice minimalistic skin I must say! :love:

Now, If only I get time to share these kind of CSS snippets myself. :sniff:
Reply  ·  
gillianivyart's avatar
gillianivyart|Hobbyist General Artist
Share them now!!!! ;P
Reply  ·  
CypherVisor's avatar
It's alright. You are doing a good job yourself! I don't have to interfere. :D
Reply  ·  
gillianivyart's avatar
gillianivyart|Hobbyist General Artist
But there are many articles need writing :shifty:
Reply  ·  
Yamaha160's avatar
Yamaha160|Hobbyist Digital Artist
I'm not a pro, but since i do tech-stuff for a website, i am familiar with some tricks. It definitely helps knowing CSS and basic html.
Reply  ·  
Gridy's avatar
Gridy|Professional Interface Designer
Great article! Responsive web design is a trend from last year, by the way. This page is the living proof of (among other things you can find there some great HTML5 and WordPress themes.) – [link]
Reply  ·  
poppyrous's avatar
poppyrous|Hobbyist General Artist
Wow thanks, I'm only familiar with html codes... css had been very difficult for me...
Reply  ·  
miontre's avatar
miontre|Hobbyist Photographer
That h1 header link. Ouch. Those always taint my skins :lol:
Imma send you an update for that :iconlameowplz:
Reply  ·  
miontre's avatar
miontre|Hobbyist Photographer
Will also see about doing something different with them in the code boxes. :nod:
Reply  ·  
Minato-Kushina's avatar
Thanks for this useful article! I have always admired people who make journals, stamps, dA related widgets and such! :worship:

No matter the explanation and advices, it's all Greek to me! :D
Reply  ·  
gillianivyart's avatar
gillianivyart|Hobbyist General Artist
I at first read that as "it's all geek to me" :giggle:
Reply  ·  
Minato-Kushina's avatar
Me too, many times I read geek as greek! :D
Reply  ·  
Astrikos's avatar
Astrikos|Hobbyist Artist
:la: Awesome article is awesome!
Reply  ·  
ValaSedai's avatar
ValaSedai|Hobbyist General Artist
Oooh this looks really promising!
I've only recently started to dabble in CSS so I think this series will really help.^^
Reply  ·  
iLantiis's avatar
iLantiis|Hobbyist Digital Artist
Love it!
Reply  ·  
neurotype's avatar
neurotype|Hobbyist General Artist
Fancy skin!

I'm still excited they enabled that here :B
Reply  ·  
GinkgoWerkstatt's avatar
Nice new layout!
But i am wondering why my skin is the preview on FB :o
Reply  ·  
gillianivyart's avatar
gillianivyart|Hobbyist General Artist
Because of the awesome. :XD:
Reply  ·  
GinkgoWerkstatt's avatar
Sounds like a good reason!
Reply  ·  
bradleysays's avatar
I was wondering that too. :O_o:
Reply  ·  
gillianivyart's avatar
gillianivyart|Hobbyist General Artist
Snazzy skin, will all the articles be wearing it? :D Thanks for giving me the opportunity to write! More to come! ;D
Reply  ·  
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
©2019 DeviantArt
All Rights reserved