Deviant Login Shop
 Join deviantART for FREE Take the Tour

The Journal Portal

Tune into the voice of the community by checking out deviantART's Journal Portal. Join the conversation by browsing, adding faves, and leaving comments, or submit your own Journal to let your voice be heard.

Submit Journal

Community Mood

  • Love
  • Joy
  • Wow!
  • Affection
  • Adoration
  • Love 22755
  • Joy 18478
  • Wow! 4703
  • Affection 1752
  • Adoration 1069

Polls

Do you believe that art can fundamentally change your sense of who you are?

Vote! (56,733 votes) 726 comments
71,828 Deviants Online

deviantART Customisation FAQ

Wed Jul 23, 2014, 11:26 AM

Basic CSS Style Guide

Wed Jul 23, 2014, 11:16 AM

Introduction



CSS is a style language used to define the style and formatting of web pages. It is used in conjunction with HTML.


If we think of HTML as the building blocks of the web then, essentially, CSS is the painter and decorator. Very simply, HTML defines the structure of the page and CSS defines the style.

What I'll be helping you with here is getting to grips with the basics of CSS. I'll be explaining how use CSS as well as providing a number of examples that you can use to style your own web pages and journals. All you need to do is copy/paste the code and replace the sample text with your own content. Along with the quick reference I've also written a brief glossary of terms and provided a list of useful links in case you wish to do some further reading.

A point of note is that while the information and examples I've given here apply to CSS use anywhere on the web, this guide itself is geared towards the use of CSS on deviantART. As such, and given that this has been created as a basic guide and quick reference, you may require further reading to make the most of CSS's capabilities.

As always, if you have any questions or problems just let me know.




How To



CSS is written in the following format.

selector {property:value;}

The selector selects the element to be styled, the property defines the aspect of that element to be styled and the value defines the way the element will be styled. Let's look at a complete example to see how it works.



h1 {color:#4f4f4f;}

In this example we're saying that we want the colour (property) of all h1 (selector) elements to be dark grey (value).

You can specify a number of properties and values for the same element.



h1 {color:#4f4f4f;text-transform:uppercase;}

In the above example we're saying that we want the colour of all h1 elements to be dark grey and written in uppercase letters.

Now, CSS contains the information for styling elements but it can't act on it's own. HTML elements are needed to create content for those styles to then be applied to. Let's look at an example of how this works.



CSS
h1 {color:#4f4f4f;}
HTML
<h1>sample text</h1>


In the CSS we're saying that the h1 header elements should be dark grey. In the HTML we're declaring the sample text as a h1 element. The CSS will read the HTML <h1> tags and colour the text in-between them dark grey.

CSS on deviantART can be used in journal and gallery skins. For journals, the HTML will be written along with your normal journal text in the Sta.sh editor and the CSS will be written in the journal's Edit Skin area. For galleries, the HTML will be written in the description box and the CSS will be written in the Add CSS area.




Selectors



Selectors determine the element to be styled. There are a number of different selector types you can use depending on the desired outcome.

Element Selectors target the content of HTML tags based on the element name. The example below says that all paragraph text should be dark grey.



CSS
p {color:#4f4f4f;}
HTML
<p>sample text</p>


id Selectors target the content of HTML tags based on a specified id. The id should be unique and used for a single element on the page.  Id selectors are signified in CSS by a hash tag preceding the id name. The HTML element should include the text id="..." within the opening tag.

The example below says that paragraph text with the 'intro' id should be dark grey.


CSS
#intro {color:#4f4f4f;}
HTML
<p id="intro">sample text</p>


Class Selectors target the content of HTML tags based on a specified class name. Elements using the same class can be used multiple times on the page. Class selectors are signified in CSS by a full stop preceding the class name. The HTML element should include the text class="..." within the opening tag.

The example below says that any element with the 'info' class should be dark grey. In this case any <a> tag, <p> tag or any other tag including the 'info class' will be styled.


CSS
.info {color:#4f4f4f;}
HTML
<p class="info">sample text</p>


The example below says that any paragraph text with the 'info' class should be dark grey. In this case only <p> tags including the 'info' class will be affected. <a> tags, for example, containing the 'info' class will not be styled.


CSS
p.info {color:#4f4f4f;}
HTML
<p class="info">sample text</p>


You can use your own id and class names. Just remember to make sure that the class or id name you use in the HTML matches what you've written in the CSS.


References



The reference list below gives examples of a number of common properties that you can use to style your pages and journals. Simply replace the green text in each example with your own values. If there are limited acceptable values for a property then the options are given underneath the example. Where a numerical or hex value are required you can enter any valid value.



Text



font-family
specifies the font to be used
font-family: arial;
times new roman, georgia, arial, etc

font-size
specifies the size of the text
font-size: 12px;
insert a value

font-style
styles text as italic or normal
font-style: italic;
normal, italic

font-weight
styles text as bold or normal
font-weight: bold;
normal, bold

color
sets the text colour
color: #000000;
insert a hex value

letter-spacing
inserts space between letters
letter-spacing: 2px;
insert a value

text-align
aligns text
text-align: right;
left, right, center, justify

text-decoration
strikes out or underlines text
text-decoration: none;
none, underline, line-through

text-transform
sets text to uppercase or lowercase letters
text-transform: uppercase;
uppercase, lowercase


Design



background-color
sets the background colour
background-color: #ffffff;
hex value, transparent

background-image
sets a background image
background-image: url(http://website.com/bg.png);
insert your image URL.

background-repeat
repeats background image / used with background-image property
background-repeat: repeat-x;
repeat, repeat-x, repeat-y, no-repeat

border
creates a border around an element
border: 1px solid #4f4f4f;
solid, dotted, dashed

border-radius
creates rounded border corners / used with border property
border-radius: 5px;
insert a value


Layout



margin
creates space around the outside of an element
margin: 10px auto 10px auto;
insert a value for each side (top-right-bottom-left)

padding
creates space inside an element
padding: 10px auto 10px auto;
insert a value for each side (top-right-bottom-left)

float
floats an element left or right
float: left;
left, right

position
specifies the type of positioning used for an element
position: absolute;
absolute, relative

width
sets the width of an element
width: 50px;
insert a value

height
sets the height of an element
height: 50px;
insert a value

display
specifies what type of box to use for an element
display: none;
none, inline, block


Glossary



CSS (Cascading Style Sheet) is a style language used to define the style and formatting of web pages.

HTML (HyperText Markup Language) is a markup language used to create web pages.

Selectors specify the element to be styled. Below we are selecting all h1 header elements to be styled.


h1 {color:#4f4f4f;}


Properties are the different aspects of style that can be defined. Below we are defining the colour of all h1 header elements.


h1 {color:#4f4f4f;}


Values define the way elements are styled. Below were are saying we want all h1 header element to be dark grey.


h1 {color:#4f4f4f;}


Tags are used to define layout and styles. Tag names are enclosed in angle brackets and usually come in pairs consisting of an opening tag and closing tag. The closing tag includes a forward slash before the tag name.
<tag> </tag>


URL (uniform resource locator) refers to the specific location of an item on the internet. It is also refered to as a web address and is used to identify and link to specific pages and content.


http://www.website.com


Hex codes are a string of six digits and letters preceeded by a hash tag used to define a certain colour.


#ffffff


Helpful Links



deviantART Customisation FAQ
A list of the most frequently asked questions regarding customising your deviantART account. Answers include information and instructions.

Basic HTML Formatting Guide
A quick guide to formatting content with HTML.

w3schools
A comprehensive information resource covering all aspects of HTML.

Hex and RGB values
Get hex and rgb numbers for any colour

Google Fonts
A collection of Open Source fonts you can use on your pages for free.


Notable Newcomers

Wed Jul 23, 2014, 10:26 PM by Aeirmid:iconaeirmid:


cleaner


Hello, all!

I wanted to feature some new photomanipulators. Each of these talented artists has been on DA for less than a year, yet they have taken concepts to a whole new level. Please welcome them and offer your support!


:iconelementofone1:
Underwater scenes have been done before, but I really like the way this artist added interesting elements in the background and created a wistful, reflective feeling. Also, his lighting is really nice.
Underwater by ElementOfOne1

:iconobereg:
This artist has a wonderful mastery of colors and light. The idea of staring down over a city is not new, but the interesting, creative way she presents the concept is very original.
Sea of Angels over my city by obereg

:iconjennyle88:
This quite emotional conceptual piece stands out from the crowd because of the artist's powerful interpretation of the stock model. The artist also uses color and light effectively.
Way to Heaven by JennyLe88

:icongedogfx:
The artist has a super cool concept here, and he blends a lot of stock images together quite nicely. There is so much symbolism in this piece, and the composition is powerful as well.
Sasha by Gedogfx

:iconazisahrul1:
This really cool deviation also puts a new and different spin on a concept (the hole in the wall) that has been done before. Great composition and atmosphere make this image work well.
Bertahan by azisahrul1



That's all for now. If you have a photomanipulation newbie you think deserves some love and attention, please drop me a note!

Thanks,

Jade / Aeirmid

C.R.E.A.T.E.

Community
Respect
Excellence
Artists
Trust
Empower.


CRPhotomanipulation

Semi-official Community Relations group for the Photomanipulation galleries on dA. Join us for Daily Deviations, Articles, Contests & Challenges.


Community Groups

:iconcommunityrelations: :iconcrphotomanipulation: :iconwe-heart-photomanip: :iconprojecteducate:

Light Hunters Feature #81

Journal Entry: Thu Jul 24, 2014, 3:10 AM

Enjoy some of the recent additions to our gallery


:iconvenatoreslucis:










Camera
---


:iconmichela-riva::iconmarinacoric::iconmarcosrodriguez::iconbokehlight::iconlula939:





This Journal Skin was designed by Night-Beast

ProjectPorkchop Vol352

Wed Jul 23, 2014, 5:45 PM



ProjectPorkchop is all about bringing more exposure to the many talented yet under appreciated artists going unseen on deviantART daily. The artists chosen truly deserve more attention based on low counts of favorites, comments, and watchers, added to their incredible artistic talent.




:iconlumecluster:

Melissa is a 3-D printing artist from the United States. She creates the most intricate and delicate designs you've ever seen and is able to apply these patterns to things like masks, pendants and more! Her process is fascinating and definitely something you don't see everyday! From ink drawings, she is able to create models on the computer and then can fabricate that 3-D model using a special printer. I definitely recommend taking a look at her page...you will be amazed!

Dreamer Mask: Illumination (3D Printed) by LumeclusterDreamer Mask: Breakthrough (3D Printed) by Lumecluster
Free Time by LumeclusterThe world needs the quiet. by Lumecluster

Suggested by TinyWild 
see more..




:iconpavneetsembhi:

Pavneet is a varied hobbyist from the UK. She favors the abstract style of drawing and her works are simply magnificent! Her designs are centered around specific shapes and forms and then filled with intricate patterns and embellishments. The amount of detail is nothing short of astounding and her skill is something to be admired! She also has a lovely monochromatic palette that allows the the details to really stand out. This is one artist you must add to your watch list!

Heart by PavneetSembhiSpade by PavneetSembhi
Milky Way by PavneetSembhiGothic Puzzle by PavneetSembhi

Suggested by TinyWild 
see more..




:iconfloweroftheforest:

Roxxy is a hobbyist photographer from Germany. She travels all over Europe photographing various urban and rural landscapes. She enjoys dappling in different techniques and experimenting with filters, giving her work a signature look. Roxxy is great at using inanimate objects as metaphors for life and she includes a beautiful quote as a caption for each of her photographs, which is a very nice touch! Please visit her gallery today and show your support!

If you don't know by FlowerOfTheForestThey say by FlowerOfTheForest
London Eye by FlowerOfTheForestLondon Traffic by FlowerOfTheForest

Suggested by ihamo 
see more..




:iconnoneofus:

NoneOfUs is a digital art student from Germany. He is predominantly a fractal artist, however, his gallery includes some digital painting as well. His fractals are very well composed and he uses color and light in perfect harmony. His digital paintings are dark and moody and have a great sense of atmosphere. This artist is quite talented and I definitely recommend paying a visit to his gallery! 

cosmic horizon by noneOfUsroots by noneOfUs
atomic dawn by noneOfUsRipples by noneOfUs

Suggested by tatasz 
see more..




:iconjackburton86:

Liam is a traditional artist from Ireland. He enjoys painting landscapes and scenery practicing in the styles of Thomas Kinkade, Bob Ross and others. His work is bright, colorful and full of emotion. They invoke a feeling of peaceful serenity and you can picture yourself out in nature, far away from the stress of the outside world. Also, be sure to check out his photography and watercoor works as well!

New Swimmin' Hole by jackburton86Evening Romance by jackburton86
Blue Shores by jackburton86Fine Soft Day by jackburton86

Suggested by ihamo 
see more..






If you enjoyed this article please be sure to :+fav: it, as this helps these artists get even more exposure.

If you would like to suggest someone for a future ProjectPorkchop article please send a note to our group:

:iconprojectporkchop:

Previous issues of PPc


Vol01 / Vol02 / Vol03 / Vol04 / Vol05 / Vol06 / Vol07 / Vol08 / Vol09 / Vol10 / Vol11 / Vol12 / Vol13 / Vol14 / Vol15 / Vol16 / Vol17 / Vol18 / Vol19 / Vol20 / Vol21 / Vol22 / Vol23 / Vol24 / Vol25 / Vol26 / Vol27 / Vol28 / Vol29 / Vol30 / Vol31 / Vol32 / Vol33 / Vol34 / Vol35 / Vol36 / Vol37 / Vol38 / Vol39 / Vol40 / Vol41 / Vol42 / Vol43 / Vol44 / Vol45 / Vol46 / Vol47 / Vol48 / Vol49 / Vol50 / Vol51 / Vol52 / Vol53 / Vol54 / Vol55 / Vol56 / Vol57 / Vol58 / Vol59 / Vol60 / Vol61 / Vol62 / Vol63 / Vol64 / Vol65 / Vol66 / Vol67 / Vol68 / Vol69 / Vol70 / Vol71 / Vol72 / Vol73 / Vol74 / Vol75 / Vol76 / Vol77 / Vol78 / Vol79 / Vol80 / Vol81 / Vol82 / Vol83 / Vol84 / Vol85 / Vol86 / Vol87 / Vol88 / Vol89 / Vol90 / Vol91 / Vol92 / Vol93 / Vol94 / Vol95 / Vol96 / Vol97 / Vol98 / Vol99 / Vol100 / Vol101 / Vol102 / Vol103 / Vol104 / Vol105 / Vol106 / Vol107 / Vol108 / Vol109 / Vol110 / Vol111 / Vol112 / Vol113 / Vol114 / Vol115 / Vol116 / Vol117 / Vol118 / Vol119 / Vol120 / Vol121 / Vol122 / Vol123 / Vol124 / Vol125 / Vol126 / Vol127 / Vol128 / Vol129 / Vol130 / Vol131 / Vol132 / Vol133 / Vol134 / Vol135 / Vol136 / Vol137 / Vol138 / Vol139 / Vol140 / Vol141 / Vol142 / Vol143 / Vol144 / Vol145 / Vol146 / Vol147 / Vol148 / Vol149 / Vol150 / Vol151 / Vol152 / Vol153 / Vol154 / Vol155 / Vol156 / Vol157 / Vol158 / Vol159 / Vol160 / Vol161 / Vol162 / Vol163 / Vol164 / Vol165 / Vol166 / Vol167 / Vol168 / Vol169 / Vol170 / Vol171 / Vol172 / Vol173 / Vol174 / Vol175 / Vol176 / Vol177 / Vol178 / Vol179 / Vol180 / Vol181 / Vol182 / Vol183 / Vol184 / Vol185 / Vol186 / Vol187 / Vol188 / Vol189 / Vol190 / Vol191 / Vol192 / Vol193 / Vol194 / Vol195 / Vol196 / Vol197 / Vol198 / Vol199 / Vol200 / Vol201 / Vol203 / Vol204 / Vol205 / Vol206 / Vol207 / Vol208 / Vol209 / Vol210 / Vol211 / Vol212 / Vol213 / Vol214 / Vol215 / Vol216 / Vol217 / Vol218 / Vol219 / Vol220 / Vol221 / Vol222 / Vol223 / Vol224 / Vol225 / Vol226 / Vol227 / Vol228 / Vol229 / Vol230 / Vol231 / Vol232 / Vol233 / Vol234 / Vol235 / Vol236 / Vol237 / Vol238 / Vol239 / Vol240 / Vol241 / Vol242 / Vol243 / Vol244 / Vol245 / Vol246 / Vol247 / Vol248 / Vol249 / Vol250 / Vol251 / Vol252 / Vol253 / Vol254 / Vol255 / Vol256 / Vol257 / Vol258 / Vol259 / Vol260 / Vol261 / Vol262 / Vol263 / Vol264 / Vol265 / Vol266 / Vol267 / Vol268 / Vol269 / Vol270 / Vol271 / Vol272 / Vol273 / Vol274 / Vol275 / Vol276 / Vol277 / Vol278 / Vol279 / Vol280 / Vol281 / Vol282 / Vol283 / Vol284 / Vol285 / Vol286 / Vol287 / Vol288 / Vol289 / Vol290 / Vol291 / Vol292 / Vol293 / Vol294 / Vol295 / Vol296 / Vol297 / Vol298 / Vol299 / Vol300 / Vol301 / Vol302 / Vol303 / Vol304 / Vol305 / Vol306 / Vol307 / Vol308 / Vol309 / Vol310 / Vol311 / Vol312 / Vol313 / Vol314 / Vol315 / Vol316 / Vol317 / Vol318 / Vol319 / Vol320 / Vol321 / Vol322 / Vol323 / Vol324 / Vol325 / Vol326 / Vol327 / Vol328 / Vol329 / Vol330 / Vol331 / Vol332 / Vol333 / Vol334 / Vol335 / Vol336 / Vol337 / Vol338 / Vol339 / Vol340 / Vol341 / Vol342 / Vol343 / Vol344 / Vol345 / Vol346 / Vol347 /

Coding by SimplySilent

July 22.2014. Interview 23

Journal Entry: Wed Jul 23, 2014, 12:03 PM


Hello guys!

Sorry it's so late today [I have terrible problem with tooth and I'm going to dentist tomorrow, because I can't eat or sleep...nothing...]

Today We have interview with William Eriksson from Sweden
at dA since one year...

Moon.. by Nocturias

:bulletblue: 1 Which type of art are You creating ?
I create art that generally shows what i am feeling!
If i am sad, happy etc! I also do art that shows my fantasy world!

The Forest Whispers My Name.. by Nocturias

:bulletblue: 2 Why this kind of art ?
Nocturias - Because its the best way for me to express myself and my own fantasy world.
I have so many fantasy "chapters" in my head that i want to release so badly,
but i cannot, since its not real. So i make it real through art and photography.

Silence... by Nocturias

:bulletblue: 3 When did You started create Your art?
Nocturias - I started last summer on an ipad! But i started with photoshop on a computer this winter! I started with photography just some month ago ^^

Pathless by Nocturias

:bulletblue: 4 What kind of art do You like to watch the most?
Nocturias - Well, I like to watch gothic and emotionall art, for example the works of Consuello Parra or Carina Grimm. But also fantasy art!
Oh and i adore photography! Vintage, macro and landscape photography is my favorite!

The Winter Kingdom by Nocturias

:bulletblue: 5 What is Your inspiration?
Nocturias - My inspiration comes from my feelings, my fantasy world and nature.
There is a neverending place of inspiration!

Pain by Nocturias

Crazy Amazing Art 22

Journal Entry: Wed Jul 23, 2014, 11:15 AM
:wave: Hello my lovely watchers! Long time no feature huh? Well Here is some of my recent faves!
Hope you enjoy!
:heart:

-The road into depths of the soul- by Janek-Sedlar
IXHMARX - silver and quartz by LUNARIEENSquirrel by christycameasromans
White Trees Part VI by myINQI
shooting stars by isischneiderAs if by Magic ... by Davils-Photography
Follow me by Trichardsen
It's Mine by dalantechWildblumentraum 3 by Martina-WW
July by janip
the sound of disco by Anastasia-RiApproach by juhku
Tiny Lynx spider by melvynyeo
Rose 1 by FrancescaDelfinoStarfall by Emerald-Depths
Cloud Makers by FireflyPhotosAust
Hypnos II by YouniquelyChicComet Halley v7 by YouniquelyChic
Pink II by AbstractDr3ams
Above the clouds - under the stars by ArafinwearcamenelTiger Lily by sara-satellite
Reflecting Upon Dreams by Jordan-Roberts
Rusted and Dcayed by Oblivionleather76The Dark Rift by Laanscapes
Bloody Sky by eyesweb1
Cascate delle Marmore by Stefano-ColtelliTrapped Bubbles by porbital
Hpider by MarcosRodriguez
red veined darter II by MartinAmmSnailrise by Kriloner
On Fire by dragon-fly-to-me


Shameless Self Promotion:
Rain Drops Keep Falling.. 2 by Roses-to-Ashes
Wonder Part 3 by Roses-to-AshesDesires by Roses-to-Ashes


Want to get featured in my next crazy amazing art feature? donate any amount of spare points :points: to get a feature!! Help me keep my premium membership.



Have you heard? I finally got a Facebook Fan page!! You should definitely come check me out and give me a like! I post more picture there than I do here!
[link] Stop by and say hello!!


:heart:
~Adrienne

There's so much pleasure to be found in simple things, when you take the time to look.





The journey ends today!!!

Thu Jul 24, 2014, 6:38 AM by Kaz-D:iconkaz-d:



Oh haider
I am officially Kaz-D Batchelor of Science (Hons) in Social Policy and Criminology, Upper Second Class Honours (2.1)
Four years, the last two doubled up to get it finished quicker and endless hours of self-teaching, self-studying and self-motivation. Fin. :')