Shop Mobile More Submit  Join Login

CSS Did You Know? - October 10th, 2012

Journal Entry: Wed Oct 10, 2012, 12:15 AM
:iconmiontre:
Selectors

CSS uses a system called Selectors to determine which elements on a page should be styled. Each selector determines which elements to style in a different way, meaning you can create more complex designs if you use a wide range of selectors.

deviantART does not allow us to use every selector, but the ones they do permit us to use cover the needs of most designs. In this "tip", I will cover the selectors most commonly used on deviantART.

Class Selectors


HTML allows you to define a "class" for each element. Just give any element a class property, then define anything you like. Usually you will want to pick something that is meaningful to you, your users, and your design. Here's an example:

<div class="container"></div>

That will give your div element a class called "container". Classes can be called anything, there are no rules when it comes to naming them. You can apply your class to any element you like. You can then use a class selector in your CSS to style all the elements you apply the class "container" to. A class selector looks like this:

.container

All you have to do is place a period (full-stop) before the name of your class. You can then declare you've completed your selection by opening a bracket { and styling your element as you normally would. For example:

.container {
color: red;
border: blue 1px solid;
background-color: white;
}


Combining the CSS and HTML, you'll get this result:

Your text here


Element Selectors


Pretty much everyone using CSS knows about class selectors, but something not as many people are aware of is element selectors. If you wanted every single link in your document to be a certain colour, it would be tedious to give every link a class. Using element selectors, you can select every link in your document. When you use an element selector, all you need to type is the element's name. Then, use an opening bracket and style your element. Here is an example:

a {
color: red;
}


This will cause every single a element on your page to be red.

Hover Selectors


You've likely seen really cool CSS designs which change slightly when you move your mouse cursor over certain elements. You can do this too through hover selectors. To do this, you are required first to use another selector, and then use the hover selector. This is combining selectors, which I will cover shortly. Here is an example of using the hover selector:

.container:hover

I first used the class selector from before to select our container again. Then, I applied :hover to the end, to declare that I only want the following style to be applied when the user hovers their cursor over the element. Then, use the opening bracket again, and define your style:

.container:hover {
color: blue;
border: red 1px solid;
}


If you aren't changing a certain property, like I'm not changing my background in this example, you can leave it out. Here is the result produced:

Hooray for a budget hover effect!


Combining Selectors


It's possible to combine many selectors if you want to select a more exact group of elements. Just place the selectors together. Let's say you had a span element and wanted to colour all the as inside it differently:

span a {
color: green;
}


As a result, all a elements placed inside a span element would be coloured green.


I hope this little tip has been useful to you! If you'd like to see a comprehensive list of CSS selectors, you can do so here.

:iconujz:
How to: Advanced CSS 3D button

CSS is a standard language to style your HTML, but we're all artists right? With it comes many possibilities to use CSS to create the most striking content; with a mix of both some CSS and artistic style. Today we will create a 3D button by simply using the standard 'box shadow' CSS to get the 3D effect.

This is a continuation of my previous tutorial: How to: Custom Buttons.

What we shall create:


Your Text Here


The code for the button:

You should paste this code in the 'CSS' section in the 'Extra' tab of your journal writer.
.button2{
max-height:40px;
min-width: 100px;
max-width: 250px;
background:url(http://fc07.deviantart.net/fs71/f/2012/278/5/3/button2bc_by_cartondock-d5guqbv.jpg);
padding: 8px;
border: 1px solid #999;
border-radius: 5px;
color: #555;
font-size: 18px;
font-family: Trebuchet MS1, Trebuchet MS, sans-serif;
text-shadow: 1px 1px #fff;
text-align:center;
cursor: default;
box-shadow: -2px 2px 0px 0px #999;
}

.button2:hover {
color: #777;
position:relative;
top:1px;
right:1px;
text-shadow: 1px 1px 0px #fff;
box-shadow: -1px 1px 0px 0px #999;
cursor: default;
}

.button2:active {
color: #0fbbfb;
border:1px solid #c4c4c4;
box-shadow: 0px 0px 4px 0px #fff;
top:2px;
right:2px;
cursor: default;
}


How to insert it to your journal skin?

<div class="button2"> Your Text Here </div>


What it all means:

This only explains the new code introduced; for the basic code descriptions see the previous tutorial.

:bulletblue: background:url() : This piece of code is used to set an image as a background instead of a color. You have to place a full link to the image in-between the brackets.

:bulletblue: font-family: This can be used to set the font. For example, if it is "font-family: Trebuchet MS1, Trebuchet MS, sans-serif;" The Trebuchet font world be applied.

:bulletblue: box-shadow: -2px 2px 0px 0px #999;

:bulletpink: The First "-2px" states how much to the right the shadow is, (negative values move it to the left)
:bulletpink: The Second "2px" states how much to the bottom the shadow is, (negative values move it to the top)
:bulletpink: The third pixel value states how dispersed (/shaded/blurred) the shadow should be.
:bulletpink: The fourth pixel value states how thick the shadow should be, if set to 0px then the shadow would be the same size as the box.
:bulletpink: The last HTML color code states the color of the shadow.


:bulletblue: Position: If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it is in the document.

:bulletpink: eg: 'top:1px;' and 'right:1px;'


The best way to teach yourself CSS is by actually using it, changing all the values one by one and checking your end results. So get started now using the code I have provided above and try creating something of your very own (how about a reverse animated 3D button; where it pops out when you hover? :giggle: ) , and if you run into any problems feel free to ask as comments here or send me ( UJz ) a note.

:iconbradleysays:
What would you like to know?

CSS will 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 bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




CSS Did You Know? is an article series that gives you tips and lessons on CSS. This edition includes tips on selectors and advanced CSS 3D buttons.
Add a Comment:
 
:iconserafina-rose:
serafina-rose Featured By Owner Mar 27, 2013  Hobbyist Digital Artist
I'm always learning and very grateful for these tutorials. Thanks so much
:iconredsparklesplz::iconredroseplz::iconredsparklesplz:
Reply
:iconsingingflames:
SingingFlames Featured By Owner Nov 13, 2012  Hobbyist Writer
Thanks for this! :la:
Reply
:iconnexu4:
Nexu4 Featured By Owner Oct 13, 2012  Hobbyist Photographer
great article, thanks for sharing
Reply
:iconicexdragon:
IceXDragon Featured By Owner Oct 11, 2012  Hobbyist General Artist
Great article!:dummy:

These articles are actually inspiring me to actually get off my butt and try to write my own journal skin.:giggle:
Reply
:iconmiontre:
miontre Featured By Owner Oct 12, 2012  Hobbyist Photographer
Do eeet:icongrinstareplz:
Reply
:iconicexdragon:
IceXDragon Featured By Owner Oct 12, 2012  Hobbyist General Artist
I shall try.:iconteheplz:
Reply
:iconmiontre:
miontre Featured By Owner Oct 12, 2012  Hobbyist Photographer
I can't wait to see how it turns out. :noes:
Reply
:iconicexdragon:
IceXDragon Featured By Owner Oct 13, 2012  Hobbyist General Artist
I did it, but it's still buggy.:giggle:
Reply
:iconphoenixleo:
phoenixleo Featured By Owner Oct 11, 2012
dAmn nice article!

Oh teach us more professor! :la:
Reply
:icongaborcsigas:
gaborcsigas Featured By Owner Oct 11, 2012  Professional Interface Designer
Quite a number of widely known web development professionals advise against using w3schools. Read their opinion here. (Btw, w3schools, as far as I know, is not related to the real, official W3C.)

Those of you who feel interested and curious, may want to give a try to the CSS tutorials of webplatform.org, a new initiative of the official W3C together with all the major players like Apple, Google, Mozilla, Facebook, Microsoft, and so on. (Mind you, webplatform.org, even though it's only in alpha yet, has a lot more than CSS tutorials. Browse it and see it for yourself. ;) )

A last addendum: Those of you into learning CSS3, HTML5, and so on may also find caniuse.com useful.

:nod:
Reply
:iconmiontre:
miontre Featured By Owner Oct 11, 2012  Hobbyist Photographer
Wow! I did not know that. :O

Thanks so much for the links and info! :nod:

Do you know of a another (better) selector reference that I could update this article with?
Reply
:icongaborcsigas:
gaborcsigas Featured By Owner Oct 11, 2012  Professional Interface Designer
You're most welcome. :nod:

As for selector referencing, I'd go either for that of webplatform.org or this comprehensive collection by tutsplus. Of course, there must be quite a number of other (more or less) reliable sources out there.
Reply
:iconmiontre:
miontre Featured By Owner Oct 12, 2012  Hobbyist Photographer
Thanks so much! :w00t:
I will send a request to get the article updated. :)
Reply
:icongaborcsigas:
gaborcsigas Featured By Owner Oct 15, 2012  Professional Interface Designer
Again, you're most welcome. :nod:
Reply
:icondianagrigore:
DianaGrigore Featured By Owner Oct 11, 2012
:clap:
This is awesome!:heart:
Reply
:iconjust-a-little-knotty:
Just-A-Little-Knotty Featured By Owner Oct 10, 2012  Professional General Artist
:iconpinklaplz: awesome article :clap:
Reply
:icontifa22:
Tifa22 Featured By Owner Oct 10, 2012  Hobbyist Digital Artist
Yay, thanks again! Info journals ftw! :happybounce:
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 10, 2012  Hobbyist General Artist
:clap: :dummy: yay I'm loving this series :D
Reply
:iconmiontre:
miontre Featured By Owner Oct 10, 2012  Hobbyist Photographer
You should contribute, and write about that trick for separating the skin header and body you told me about. :eyes:
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 10, 2012  Hobbyist General Artist
I volunteered to. We'll see. Maybe there is something I'm particularly good at I can impart my techniques. I've been collecting a slew of tidbits in my forum to reference easily. Been a while since I've added to it though.
Reply
:iconbradleysays:
bradleysays Featured By Owner Oct 11, 2012
You're always welcome to. :hug:
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 11, 2012  Hobbyist General Artist
I will have to see what I can think up. My free time has been rather limited lately. :grump:
Reply
:iconneurotype:
neurotype Featured By Owner Oct 11, 2012  Hobbyist General Artist
:eyes:
Reply
:icongillianivy:
GillianIvy Featured By Owner Oct 11, 2012  Hobbyist General Artist
;)
Reply
:icondediggefedde:
Dediggefedde Featured By Owner Oct 10, 2012
Nice! I also really like your suggestions for buttons.
However, I kind of miss compability-informations. e.g. css3 is only supported with ie9 or higher. so, all winXP user that can not update to ie9 won't see box-shadows. And of course all those people that are running old browsers. With a bit of research about 15% of all internet-user don't see css3.
I don't want to restrain you to css2, but it would be great when you give introduction into a new feature that you give a little hint which browsers are supporting it, so no one gets a surprise^^
Reply
:iconujz:
UJz Featured By Owner Oct 12, 2012  Professional Interface Designer
Thanks for the tip :)
I'll include some compatibility info in the next tutorial :)
Reply
:iconmaytel:
maytel Featured By Owner Oct 10, 2012
:clap:
Reply
:icontobproject:
TOBproject Featured By Owner Oct 10, 2012
Very well explaned :) I'm sure this will come in handy for many people who want to learn the basics of css, not only for dA but for web design in general. :thumbsup:
Reply
:iconmiontre:
miontre Featured By Owner Oct 10, 2012  Hobbyist Photographer
Great article! :dance:

Is it alright for me to say that? :paranoid:
Reply
:icononionscratch-paper:
onionscratch-paper Featured By Owner Oct 10, 2012  Hobbyist General Artist
Another helpful article.:)
Reply
:iconelectricjonny:
electricjonny Featured By Owner Oct 10, 2012  Hobbyist Photographer
Nice article :nod:

Examples with code (even if they aren't quite live) are very good.
Reply
:icondekoradum:
dekorAdum Featured By Owner Oct 10, 2012  Hobbyist Photographer
Great article! :clap:
Reply
:iconc-91:
C-91 Featured By Owner Oct 10, 2012  Hobbyist Digital Artist
Thank you!!! :w00t:
Reply
:iconstamatisgr:
StamatisGR Featured By Owner Oct 10, 2012   Photographer
Nice! we want moarr!!! :lol:
Reply
Add a Comment:
 
×

:iconbradleysays: More from bradleysays


Featured in Collections

Gallery CSS by IridescentStardust

CSS and dA by MissLunaRose


More from DeviantArt



Details

Submitted on
October 10, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
8,454 (3 today)
Favourites
94 (who?)
Comments
34
×