The Complete CSS Tutorial - Google Sites

                  The Complete CSS Tutorial  Written, & published on December 17, 2007,  By =DragonX141 at deviantART.com   

 

 

Document Version: 1.1 

 

Contents  Intro ....................................................................................................................................................... 3  Availability ............................................................................................................................................. 3  Definitions ............................................................................................................................................. 3  Firefox vs. Internet Explorer .................................................................................................................. 4  Sections and their usage. ...................................................................................................................... 4  The Entire Journal .......................................................................................................................... 5  The Head ........................................................................................................................................ 5  The Moods ..................................................................................................................................... 5  The Body ........................................................................................................................................ 5  The Foot ......................................................................................................................................... 5  Useful CSS Properties ............................................................................................................................ 5  Text and Fonts ............................................................................................................................... 5  Colours and Background ................................................................................................................ 6  The Box Model ............................................................................................................................... 6  Margins and Padding ............................................................................................................. 7  Borders ................................................................................................................................... 7  Width and Height ................................................................................................................... 8  Positioning ..................................................................................................................................... 8  Display ........................................................................................................................................... 9  Float ............................................................................................................................................... 9  Overflow ........................................................................................................................................ 9  Other useful properties ................................................................................................................. 9  How to use/make classes .................................................................................................................... 10  The IE trick ........................................................................................................................................... 11  Customizing Links ................................................................................................................................ 12  Examples ............................................................................................................................................. 12  Example 1: A simple color overhaul ............................................................................................ 12  Example 2: Adding a background image ..................................................................................... 12  Example 3: Adding divs ................................................................................................................ 13  Example 4: Creating a context box .............................................................................................. 13  Example 5: Two column layout ................................................................................................... 13  Contact ................................................................................................................................................ 13 

‐ 2 ‐   

 

Intro  Hello fellow deviants. Here’s my try at making a very complete tutorial so that anyone can get  how CSS Journals on deviantART work. I’ll try to cover and explain in details as much i can so that i can  make this easy and complete for everyone.  Alright,  so  we’ve  all  seen  the  normal  journals,  and  granted  they  go  well  with  the  all‐around  layout, but they still look pretty blah.  So here’s the start to making them look all better.  Contrarily to  popular belief, making a simple CSS journal is quite simple, you just need to know the proper ways to go  about it; where to put what to get what you want.  I will only cover the basic things that you can do as well as explain how to make a little  more  complicated stuff. At this current place in time, i won’t go over the complex layouts, because that would  take forever. CSS is a very powerful styling language but it’s very simple to use, you just need to know  how. Let’s jump in shall we? 

Availability  Before i go further, and before you read all of this for nothing, only deviantART subscribers can  use the CSS feature, I can’t stress that enough. Now, how do you know if you’re a subscriber? If you pay  to use deviantART, then you are. You can also use it if you were donated a subscription. In more details,  if your username has a ~ before it, you can’t! Period.  

Definitions  • Div: A div, basically, is a container or a box. It contains text, images or other divs. If you want a  complex layout, divs are going to become your best friends.  • Class: A class is the name of a specific div. Its name must be unique but it can point to more than  one div. It can contain any Latin character and is preceded by a period (“.”); so it can look like so:  .class_name or .specialDiv1.  • Object:  Objects  (also  known  as  elements)  are  other  things  that  can  be  modified  by  properties,  but aren’t named like classes. Actually a div is a kind of object. Other object include h2, a, ul and  li; we’ll see those later.  • Property: A property is something that we attribute to the class. The property modifies how the  class looks/behaves. Common examples are: border, margin and background.  • Value: A value is associated to a property; it tells how the property will affect the class.  • FF: Abbreviated form of Firefox.  • IE: Abbreviated form of Internet Explorer.   

‐ 3 ‐   

Firefox x vs. Interrnet Explo orer  Got  to  love  co ompatibility,  or  lack  thereeof.  Don’t  freeak  out,  thatt’s  only  relevvant  when  yo ou  do  complex llayouts with  a lot of divs w which are sid de by side and d overlap, bu ut we’ll stay aaway from that for  now,  so  if  you’re  going  to  makee  something  simple,  just  skip  ahead  to  the  next  section.  Another  ow is that Firrefox (and Saafari) and Inteernet Exploreer do not ren nder CSS the  same  importantt thing to kno way. The two browsers just interpreet the code d differently, so sometimes is looks aweso ome in FF and d look  all messed up in IE and vice versa.  So if you decide to makee a complex layout, you have three choices.  Your first choice is to m make it look ggood in FF and let IE mess it up. Option n #2 is to do the opposite, make  it pretty in n IE. The less popular, but most apprecciated, is to m make it pretty in both.  Th hat third one e is the most ccomplicated  and time con nsuming; been there, donee that. At least the  good partt is that you d don’t have tw wo layouts to  do, just one  and a half. You just have  to design it in one  browser  and  a then  brin ng  it  into  thee  other  and  modify  m it  till  it  works.  The  good  newss  is  that  not  every  property  is messed up p; there are just a few of  them. The beest example  is when you  play with po osition  ay. I’ve also n noticed that IIE doesn’t seeem to like the margin‐top p property. I’lll explain in aa later  and displa section ho ow to have th he same prop perty twice, but how to tell which browser which onee to use. 

Section ns and the eir usage..    Alright, time to get to worrk. In the jourrnal, there arre 5 main parts: the head d (.journaltop p), the  moods  (.llist  li),  the  body  (.journalltext),  the  fo oot  (.journalb bottom)  and  the  entire  th hing  (.journalbox).  Those aree classes given n by deviantA ART and cannot be changed.    Th he  only  section  in  which  you  can  editt  the  contentt  is  the  bodyy  (.journaltextt),  it’s  the  heeader,  journal en ntry and footter parts of th he Update Jo ournal page, w which you deefinitely know w if you’re reeading  this. You ccan only chan nge the look o of the other ssections.  So o the very basic journal loo oks like this:

‐ 4 ‐   

So  when  you’ll  be  in  the  middle  of  creating  your  custom  journal,  you’ll  at  least  use  all  these  section. On top of that, if you want a little more customization, you’ll make your own classes. I’d go to  say that anything over a basic custom journal will require creating your own divs. 

The Entire Journal    In essence, the only thing this one does is define the border that surrounds the whole journal. It  can also be used to specify one background image for the whole journal. 

The Head    This one contains the journal title as well as the timestamp. The only thing here is that the title  is treated with a different class, not the .journaltop but the h2. 

The Moods    The  moods  are  actually  a  few  things  inside  one  another,  but  still  easy  to  modify.  Like  the  standard layout, you can have alternating colors or just one single color. All that explained in a bit. 

The Body    The  body  is  really  the  most  important  part.  This  is  where  the  journal  really  takes  shape  and  where all your creativity is born. 

The Foot   

The only thing does is contain the “00 Comments | Previous Journal Entries” links are. 

Useful CSS Properties    There are a few genres of properties available for us to use. According to dA, we can use all the  standard visual properties specified in CSS2.1, yay! We have Text and Fonts, Colours and Backgrounds,  The  Box  Model  (dimensions,  padding,  margin  and  borders)  and  Positioning  and  Display.  So  i’ll  go  over  the more important ones. 

Text and Fonts  • font‐family: Specifies the font name of a box. This can be a comma‐separated list, of which the  browser will use the first font it recognizes. Font names that are made up of more than one word  must be placed within quotation marks.  ƒ Possible values: [font name]  ƒ Example: font‐family: “Times New Roman”, Helvetica, Arial;  • font‐size: Specifies the size of a font.  ƒ Possible values: [size in em or pt].  ƒ Example: font‐size : 12pt; or font‐size: 1.0em;  • font‐weight: Specifies the boldness of a font.  ƒ Possible values: lighter, bold, and bolder.  ƒ Example: font‐weight: bold;  • font‐style: Specifies whether the text is italic or not.  ƒ Possible values: italic.  ƒ Example: font‐style: italic; 

‐ 5 ‐   

nment of textt inside a div.  • texxt‐align: Speccifies the align ƒ Possible values: left, righ ht, center and d justify.  nter;  ƒ Example: teext‐align: cen n: Specifies w whether text iss underlined, over‐lined orr has a striketthrough.  • texxt‐decoration ƒ Possible values: none, underline, overline, line‐tho ough.  on: none;  ƒ Example: teext‐decoratio

Colourss and Back kground    • color: Specifies the foregrou und (text and border) colou ur.  ƒ Possible values: [color].  olor: #000000 0;  ƒ Example: co ombines the following pro operties into jjust one. I only use it to make the  • background:  Co background transparent.   arent.  ƒ Possible values: transpa background: transparent; ƒ Example: b nd image, though url, and ssets it as backkground to th he div.  • background‐image: Adds an ƒ Possible values: url().  background‐im mage: url(“htttp://www.urll.com/image.jjpg”);  ƒ Example: b peat: Specifiees how to rep peat the backgground imagee within its co ontaining elem ment.  • background‐rep ontally), repeeat‐y (repeat vvertically) and  ƒ Possible values: no‐repeeat, repeat‐x ((repeat horizo repeat‐xy (repeat horizo ontally and veertically).  background‐reepeat: repeatt‐x;  ƒ Example: b osition: Speciffies the positiion of a backgground imagee within its co ontaining elem ment.  • background‐po o values.  Maade up of two ƒ Possible values: Top, cen nter, bottom & left, centerr, right.  background‐position: top center;  ƒ Example: b

 The Bo ox Model  In n the box mod del, there aree three imporrtant propertiies: border, m margin and paadding. All of those  can then b be divided intto 4 separatee properties fo or top, right, bottom and lleft (respectivvely). All the  values deffined for thesse properties are in pixels (px).   Fiirst, so you caan see where is is, here’s aa graphic expllanation: 

‐ 6 ‐   

  Margins and Padding  For example, if you want a 10px margin all‐around, do this:  margin: 10px;  If you want only the right and left to be 10px, it’ll look like this:  margin: 0 10px 0 10px;  Remember that respectively just a little higher? As opposed to using four properties like:  margin‐top: 0px;  margin‐bottom: 5px;  margin‐left: 10px;  margin‐right: 15px;  You can do this instead, it’ll give the same result:  margin: 0px 15px 5px 10px;  Always remember that when you use 4 values for the one property, it’s always in this order: top,  right, bottom and left. In this example i used the margin property, but this applies to the padding  property as well. That’s pretty much all there is on how to use margins and padding.  Borders  Borders  are used  pretty  much  in  the  same  fashion  as  margins  and  padding.  The  only  difference  is  that there are a few more useful properties that you can use like color and width. Just like those above,  they can be divided into four separate properties or one master one.   • border‐width: Specifies the border width.  ƒ Possible values: [width in px].  ƒ Example: border‐width: 10px;  • border‐color:  Combines the following properties into just one. I only use it to make the  background transparent.   ƒ Possible values: [color].  ƒ Example: border‐color: #ffffff;  • border ‐style: Adds and image, though url, and sets it as background to the div.  ƒ Possible values: none, dotted, dashed, solid, double, groove, ridge, inset and outset.  ƒ Example: border‐style: solid;    A good trick to give you now is that you can combine all those properties into just one! As opposed  to using all three properties and doing this:   .cust_border {    border‐width: 2px;    border‐color: #ff0000;    border‐style: dotted;  } 

‐ 7 ‐   

   

You can simply use one line and do this:   .cust_border {    border: 2px dotted #ff0000;  } 

  Width and Height   • width: Specifies the width of the element.  ƒ Possible values: [width in px or %].  ƒ Example: width: 200px; or width:85%;  • height:  Specifies the height of the element.  ƒ Possible values: [height in px or %].  ƒ Example: height: 200px; or height:85%; 

Positioning    There  are  three  kinds  of  positioning,  static  (which  is  the  default),  absolute  and  relative.  These  properties  are  mostly  used  when  creating  more  complex  layout.  They’re  used  to  for,  well,  positioning  the boxed. Here’s what they mean:   • static: Follows the normal flow. This is the default and doesn’t need to be specified.  • absolute: Takes the element out of the flow and offset according to the containing block.  • relative: Relative position that is offset from the initial normal position in the flow.    When you’re using the absolute you need to tell the element where to be. You can also use them  while you use relative; the effect here will be pretty much the same as using margin. You can define the  positioning using these 4 properties:  • • • •

top: Specifies how far from the top of the containing box the box should be.  bottom: Specifies how far from the bottom of the containing box the box should be.  left: Specifies how far from the left of the containing box the box should be.  right: Specifies how far from the right of the containing box the box should be.    Usually, the distance given is in pixel. Another thing is that you can only use only one property by  axis;  by  that  i  mean  you  can  only  use  top  or  bottom  and  left  or  right.  So  basically  you  would  get  something like this:  .pos {    position: absolute;    top: 0px;    left:0 px;  } 

‐ 8 ‐   

Display  Basically, this one tells how to treat the current div. There are only two useful values here, inline  and  none.  The  inline  value  is  used  in  conjunction  with  float  (a  property  I’ll  explain  in  just  a  bit)  which  basically says that multiple divs can be on one line. The none value make the element invisible, so it can  be great if you want to hide an element, like the journal header image for example. You use it like so:   .dis {    display: none;  }   

Float    Float is another easy one, it specifies whether a fixed‐width box should float, shifting it to the  right or left with surrounding content flowing around it. There are two values you can use: left or right.  It’s used like so:   .flt {    width: 200px;    float: left;  } 

 

Overflow  Overflow  is  used  to  specify  what  happens  to  the  content  of  a  div  if  that  div  is  given  a  specific  height and/or width if the content takes more room than the div can display. Overflow has 4 values that  can be used.   • visible (default): Overflow spills over the defined border of the div.  • hidden: Overflow cannot be seen.  • scroll: The box scrolls to accommodate the overflow. A scroll bar will be visible regardless of if the  content is small enough to fit in the div.  • auto: The box scrolls to accommodate the overflow. A scroll bar will be visible only if the content  is too big to fit in the div.    .ovrflw {    overflow: auto;    }   

Other useful properties  Here are some other useful properties that can be used within the journal’s CSS.  They’re mostly  text specific properties.   • font‐variant: Specifies whether the lowercase letters in a box should be displayed in small  uppercase.  ƒ Possible values: small‐caps.  ƒ Example:  font‐variant: small‐caps; 

‐ 9 ‐   

• line‐height:  Specifies the height of a line of text, basically line spacing.  ƒ Possible values: [value in em or %].  ƒ Example: line‐height: 1.3e;  • letter‐spacing: Specifies the spacing in‐between letters.  ƒ Possible values: [value in em].  ƒ Example: letter‐spacing: 0.3em;  • word‐spacing: Specifies the spacing between words.  ƒ Possible values: [value in em].  ƒ Example: word‐spacing: 1.5em;  • text‐indent: Specifies the indentation of the first line of text in a paragraph. Can only be used in a  “p” element.  ƒ Possible values: [value in em].  ƒ Example: text‐indent: 2em;  • border‐color:  Combines the following properties into just one. I only use it to make the  background transparent.   ƒ Possible values: [color].  ƒ Example: border‐color: #ffffff; 

How to use/make classes    This is super simple to explain. Say you want to make a box (a div) in your layout, or multiple  boxes so that you can separate the different sections then you simply go like this.    In the Journal Entry part of the Update Journal, we’ll need to create those divs, let’s make two.  You’d write something like this:   

This is box #1This is box #2 

  Great,  now  we  have  two  boxes!  But  they’re  still  “invisible”,  if  you  preview  your  journal,  you  won’t  see  anything  different,  well  except  the  text  you  wrote  between  the  div  tags  (those    things). Now’s a good time to say that if you have a  tag, you must have a  tag at the end, to  close that box; if you don’t you’re layout will be a mess and you’ll be all confused. To style them, you  need to assign them a class. To do that we need to add the class attribute to the div tag as well as give it  a name. So the example would now look like this:    

This is box #1This is box #2 

  Good,  we’re  making  progress.  But  if  you  preview  this  code  addition  you’ll  still  see  nothing  different. That’s because we haven’t created those classes yet. So the sake of this example, we’ll only  add a simple border and background color. In the CSS box at the bottom of the page, we’ll put in this:   .div_top {    background‐color: #111111;    border: 1px dotted #000000;  }     

‐ 10 ‐   

.div_bottom {    background‐color: #55555;    border: 3px solid #000000;  }      That’ll create two very different styled boxes. But say that you want all your boxes to look the  same,  what  now?  Do  we  have  to  make  a  different  class  for  every  div?  Simply  put,  no.  As  opposed  to  having a different name for both divs, you could put the same one to have class=”div_name”, create one  class and both divs would look the same.  Now believe it or not, but this is all that a custom CSS journal is, a bunch of styled divs! If i’ve  done this well, this is really all you need to go and start making your own custom journal, but since this  is to be complete, there’s more to say, so read on. 

The IE trick  Before we move onto working examples, i’m going to share a little trick i found. Keep in mind this  is only useful for creating multiple div layouts. Now i’m still not sure if it’s something that dA made, or if  it’s  just  the  way  that  the  browser  render  the  CSS  code,  but  if  you  put  an  underscore  (_)  before  the  property, only IE will use it, FF seems to ignore it. Why is this useful you ask? For once i found it’s great  for  the  margin‐top  property  if  you  use  a  negative  value.  That’s  one  of  the  biggest  pains  if  found  in  making everything cross‐compatible. And it’s super easy to use.  Say that you have two divs, one on top of the other and that you want the top of the bottom div  to touch the bottom of the top div, in FF the distance will be 10 pixels but in IE it’ll be 14 pixels, then you  can do something like this. For the example (where the bottom div is named “.get_closer”):  .get_closer {    margin‐top: ‐10px;    _margin‐top: ‐14px;  }     

So now FF will rise the div by 10 pixels and IE will rise it by 14 pixels. 

Now you’re probably asking why, right? It’s like i explained in a section above, FF and IE render  CSS differently and because they render fonts differently (and IE doesn’t like margin‐top as much as FF)  so we need to use a little fix.  Also be aware that you won’t always need to do this, it comes up only in some cases. Just that  some of you will be stuck with this problem, so i’m sharing the fix with everyone. 

‐ 11 ‐   

Customizing Links  If you want to customize how every state of a link looks, there’s a class associated to each state.  Now  you’re  probably  wondering  what  a  state  is.  It  just  means  the  current  state  of  the  link;  if  it’s  a  normal link, if your mouse is on it or if you clicked it and if you’ve visited where it links. Links, so you  know are an ‘a’ element follow by an html reference (href), they look like this: Link.  The four states associated to links are:   • • • •

a:link: Defines the style for normal unvisited links.   a:hover: Defines the style for hovered links; A link is hovered when the mouse moves over it.  a:active: Defines the style for active links; A link becomes active once you click on it.   a:visited: Defines the style for visited links.    So to add CSS to customize them, do like so:  a:hover {      text‐decoration: none;  } 

Examples  Finally,  here  we  are,  the  part  most  of you  will  probably  use  and  concentrate  on  to  create  your  own layouts. I’ll give you guys a few examples, from simple to a lil more complex and hopefully this will  shed some light on how to get it done. Now remember, this is how i do it, i know there are other ways  out there but i only know my way, so here goes. 

Example 1: A simple color overhaul    I’m just going to change the basics here; colors, fonts, point size, borders and such. So we’ll only  see some CSS, no changes are made to the Journal Body. 

 

Example_1_Preview.png

Example_1_CSS.txt

 

Example 2: Adding a background image    We’re going to keep the simple dA color scheme and just add an image as background. Again,  simple stuff that only deals with CSS. 

 

Example_2_Preview.png

Example_2_CSS.txt

 

   

‐ 12 ‐   

Example 3: Adding divs    In this one, we’ll add a few divs, so that we can graphically separate the journal into sections. So  here we have CSS (of course) and now we start creating a layout, so we add divs to the Journal Entry. 

 

Example_3_Preview.png

Example_3_CSS.txt

Example_3_HTML.txt

 

Example 4: Creating a context box    Ah the famous rounded corner context box; wonder how it’s done? Here’s how i do mine. Just  be sure that all your corner images are the same dimensions. Another good thing to point out here is  that we’ll be using the absolute and relative positioning values. 

 

Example_4_Preview.png

Example_4_CSS.txt

Example_4_HTML.txt

 

Example 5: Two column layout    You’ve seen those layouts with the little menu on the left or the right of the journal and think  they’re nifty, well here I’m going to explain how to make it. Be warned though, it’s easier than you think. 

 

Example_5_Preview.png

Example_5_CSS.txt

Example_5_HTML.txt

 

Contact  If you think I forgot something, didn’t explain something quite right, looking to do something and  you don’t know how, feel free to send me a note on dA at http://dragonx141.deviantart.com. 

‐ 13 ‐