Shop More Submit  Join Login
×

:iconbradleysays: More from bradleysays


Featured in Collections

Gallery CSS by IridescentStardust


More from deviantART



Details

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

Stats

Views
8,142 (1 today)
Favourites
95 (who?)
Comments
34
×

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
Add a Comment: