Raederle (
seleneheart) wrote in
acme_graphics2010-08-08 11:21 am
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png)
Entry tags:
CSS Tutorial
As requested by
lilithilien. ^_^
You might ask why CSS matters -- the reason is that lots of journaling systems will not let you access your theme layer unless you have a paid account. However, the CSS is open to all accounts, so this is a way to customize your journal without incurring any extra costs.
Credit for some of these ideas goes to
grrliz via the
the_lj_reboot comm, and the W3 schools.
The first thing to understand is what is meant by CSS. These letters stand for Cascading Style Sheet, but what it means is that each element of a web page cascades to the next. Or an easier way to understand it is the elements fit together like nesting Russian dolls. The most inner doll takes priority for compiling the page over the outer dolls. (Or a tree with multiple branches, because each level can have more than one sub-level).
Once again, a code for this level will override what is on the other levels.
Sometimes the base code for the journaling systems interacts oddly with the style sheets, so things seem to have no effect. Usually that can be fixed by adding the
Okay, time for a word about browsers. Most browswers abide by the standards created by the World Wide Web Consortium (W3C). However, Internet Explorer does not, so if you use that browser, you may find that your code creates unexpected results. I hate IE pretty stongly, because of this, and also, because it isn't a secure browswer. Anyway, in a lot of journal CSS you will see code that says things like "fixes bug in IE win" or "IE hack" that force IE to behave itself. Some of the things I'm going to talk about aren't possible in IE.
So, let's talk about how CSS changes the appearance of your journal.
That covers the basic look of your journal, so let's move on to some more fun things -- Links!!
There are four parts or states of a link: a (tells the browswer it's a link); a:link (the inactive state); a:hover (when you put the cursor on the link); and a:visited (if you've clicked a link in the recent past).
The most common way of coding links is to make a different color for each of the three states above. Other things to do with links could be to underline them, bold them, or strikethrough. Also, you can change the background color of the link or have a background image pop up when you roll the cursor over it.
However, that's not all we can do with links! We can use images for links and we can manipulate the margins to give us different images depending on the state of the link. For example, if I wanted my link to look like this for the inactive state:

and like this for hover:
,
I would use this graphic:
, which, as you can see, is a combination of the two link states. (Obviously, if you wanted to have the a:visited state have a third graphic, that's up to you).
And I would code it like this:
The important thing is to specifiy how high your link is going to be, 40px in this case. Then you add a negative margin that is the same amount of pixels as the height of your link. When you hover over the link, the negative margin makes the bottom graphic pop up. You can see a live example of this at this journal in the sidebar.
Another place where I've used this trick is at my graphics journal. In that case the graphic looks like this:
.
You are only limited by your imagination as to what you can make your links look like. Doing something like this with your links is called 'rollovers' if you want to google for more ideas.
The last thing I'm going to discuss with links is the image map. Anytime you have a group of links in your journal, such as the default links (which are: recent entries, friends, profile, and archive, for most journal systems), you can make an image map for the links. An image map is one image and you make 'hot spots' in the image that are links. The only issue with this is you would need some sort of graphics program that can give you the coordinates of your link on your image (I do mine on Dreamweaver, but almost any graphics program can give you the numbers, and there's several free ones on the web, such as Paint.net). An example of an image map can be found on my Livejournal account. Each poster on the header is actually a link.
The code for an image map, once you've located your coordinates, is:
(I put some extra spaces in there so the code would show up in this post).
Some links aren't accessible through the style sheet, but you can do the same thing to them on the theme layer.
Animation can be done with CSS, but it's a lot of coding. This is a very new thing and is part of html5, so most animation you see on webpages will be either Flash or Java.
So, go through some journals you like and have a look at the CSS. I have an add-on to Firefox that shows it to me, but you can always click 'view source' to look for the style sheet. It will be found in the < head> part of the web page, and will be within the < style> tag. Look at the CSS, and then try to see how it functions in that journal. If you like it enough, snag it and tweak it (giving credit for the inspiration). Many of the journal styles have places where you can get the base code, so you don't have to type it from scratch, just change the elements you want. Another thing I do is take screen shot of journals that interest me and then mess around with the elements.
I've done lots of different things with my journals on Insanejournal, Livejournal, and Dreamwidth. I'm seleneheart in all those places if you want to have a look. Another heavily customized journal is my fiction journal, although some of that was done when I pay for a month to be able to get to the theme layer, but most of it is through the custom stylesheet.
I'd be happy to help with any questions or any specific things you'd like to do with your journals.
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
You might ask why CSS matters -- the reason is that lots of journaling systems will not let you access your theme layer unless you have a paid account. However, the CSS is open to all accounts, so this is a way to customize your journal without incurring any extra costs.
Credit for some of these ideas goes to
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-community.gif)
The first thing to understand is what is meant by CSS. These letters stand for Cascading Style Sheet, but what it means is that each element of a web page cascades to the next. Or an easier way to understand it is the elements fit together like nesting Russian dolls. The most inner doll takes priority for compiling the page over the outer dolls. (Or a tree with multiple branches, because each level can have more than one sub-level).
Okay, so the outermost nesting doll (or tree trunk) for any journal will be body. This is the most general part of the journal, like the background color, the default font, and the look of the links.
The next doll inside is anything that has a # in front of it. There will be several of these for each journal, such as
#header, #main content, #footer, #container, #banner, or #sidebar
These are just a few examples of this level of the style sheet. Each journal layout calls things on this level by different names. Any change to this level will supercede the code for the body level.
The inner doll for most journal is indicated by a period. For instance
.entry, .skiplinks, or .userpic
Once again, a code for this level will override what is on the other levels.
Sometimes the base code for the journaling systems interacts oddly with the style sheets, so things seem to have no effect. Usually that can be fixed by adding the
!important
tag to the element you are trying to change.Okay, time for a word about browsers. Most browswers abide by the standards created by the World Wide Web Consortium (W3C). However, Internet Explorer does not, so if you use that browser, you may find that your code creates unexpected results. I hate IE pretty stongly, because of this, and also, because it isn't a secure browswer. Anyway, in a lot of journal CSS you will see code that says things like "fixes bug in IE win" or "IE hack" that force IE to behave itself. Some of the things I'm going to talk about aren't possible in IE.
So, let's talk about how CSS changes the appearance of your journal.
- Punctuation - this is the most important thing, because it tells the browser compiler what to do. For each element that you code, the element name has to be followed by a pair of curly braces: { }. Within those braces, each thing you change has a semi-colon at the end. For instance:
.entry { color: #000000; } - Color - color is specified on the web by hex codes, which look something like this: #ffffff (white) or #000000 (black). You can make pretty much any color you can imagine by using a combination of six letters and numbers. There's literally millions of hex codes. In a journal, there are two color elements to work with: background color, which changes the color of the entire element, and; color, which changes the font color in that particular element. If you wanted to get crazy, you could have a different font color for every single element in your journal, which could included the title, the entry content, the username, the date, the comments, the links, etc. Here is an example You get the picture. However, just from an asthetic standpoint, it's not a very good idea to have more than a few colors in your journal. Lots of times I get color inspiration from a picture, but you can google 'color scheme' and there's lots of places on the web that will offer you different color ideas.
- Background - a fun thing to do is to put a background image onto an element. Any of the elements can have a background image, down to the tiniest imaginable. Depending on the size of your element, and the image, you can either repeat the image (like the body of a journal) or you can have it be fixed (like if you want a specific image for the bullet points in your sidebar). For example, if I wanted a background image on each journal entry, the code would be
.entry { background-image: url(location of the image) top left repeat transparent; }
- Borders - this code will put a border around any element in your journal. It is done by specifying how big it is in pixels. Also, there are several different styles of borders, solid, dashed, grooved, etc. Or you could have no border. You can also make it any color you want. Heck, you can make the bottom border one color and the top border a different color. Another example
- Margins and Padding - these are two of the most confusing things about CSS, and this is another area where IE messes up. 'margin' is how far away one element is from another element (including the one it is inside), and 'padding' is how far away the content of that element is from the sides of the element (for instance, how far away the text of an entry is from the edges of the entry element). These are also coded in pixels.
- Sides - As I said above, you can code different things for different sides of an element. For instance, if I wanted different margins on each side of my entries, I could code
Those code in a particular order: top right bottom left. So in the example, the top margin would be 10px, but the bottom would be 8px..entry { margins: 10px 5px 8px 2px; }
- Font - once again, you can change the font for every element if you wanted. However, if a computer viewing your page doesn't have that font installed, then it will default to either a serif font or a sans-serif font. I try not to get too crazy with fonts in the code -- save that for images. Fonts can also be different sizes, and different colors.
- Cursor - there are a variety of standard cursors you can put in your code, and you can do images as well.
- Transparency - you can make an element partially transparent by lowering the opacity of that element, for instance if you wanted your background image to partially show through on your entries. The code for that is { opacity: (usually a percentage); } (I believe it is possible to change the code for IE to make it work).
- Corners - You can make the borders round if the viewer is using Firefox, Safari, and possibly Opera and Google Chrome. The code for this specifies how big you want the radius of the corner to be. For example:
will give you rounded corners on your entry..entry { moz-border-radius: 10px; webkit-border-radius: 10px; }
That covers the basic look of your journal, so let's move on to some more fun things -- Links!!
There are four parts or states of a link: a (tells the browswer it's a link); a:link (the inactive state); a:hover (when you put the cursor on the link); and a:visited (if you've clicked a link in the recent past).
The most common way of coding links is to make a different color for each of the three states above. Other things to do with links could be to underline them, bold them, or strikethrough. Also, you can change the background color of the link or have a background image pop up when you roll the cursor over it.
However, that's not all we can do with links! We can use images for links and we can manipulate the margins to give us different images depending on the state of the link. For example, if I wanted my link to look like this for the inactive state:
and like this for hover:
I would use this graphic:

And I would code it like this:
a:link {height: 40px; background: url(location of the combined graphic) 0px 0px no-repeat transparent; }
a:hover {background: url(location of hte combined graphic) 0px -40px no-repeat transparent; }
The important thing is to specifiy how high your link is going to be, 40px in this case. Then you add a negative margin that is the same amount of pixels as the height of your link. When you hover over the link, the negative margin makes the bottom graphic pop up. You can see a live example of this at this journal in the sidebar.
Another place where I've used this trick is at my graphics journal. In that case the graphic looks like this:

You are only limited by your imagination as to what you can make your links look like. Doing something like this with your links is called 'rollovers' if you want to google for more ideas.
The last thing I'm going to discuss with links is the image map. Anytime you have a group of links in your journal, such as the default links (which are: recent entries, friends, profile, and archive, for most journal systems), you can make an image map for the links. An image map is one image and you make 'hot spots' in the image that are links. The only issue with this is you would need some sort of graphics program that can give you the coordinates of your link on your image (I do mine on Dreamweaver, but almost any graphics program can give you the numbers, and there's several free ones on the web, such as Paint.net). An example of an image map can be found on my Livejournal account. Each poster on the header is actually a link.
The code for an image map, once you've located your coordinates, is:
< map>
< area name="Recent" shape="poly" coords=" numbers of your link" />
< area name="Friends" shape="circle" coords="numbers again" />
< area name="Archive" shape="rect" coords="numbers" />
< area name="Profile" shape="poly" coords="more numbers" />
< /map>
(I put some extra spaces in there so the code would show up in this post).
Some links aren't accessible through the style sheet, but you can do the same thing to them on the theme layer.
Animation can be done with CSS, but it's a lot of coding. This is a very new thing and is part of html5, so most animation you see on webpages will be either Flash or Java.
So, go through some journals you like and have a look at the CSS. I have an add-on to Firefox that shows it to me, but you can always click 'view source' to look for the style sheet. It will be found in the < head> part of the web page, and will be within the < style> tag. Look at the CSS, and then try to see how it functions in that journal. If you like it enough, snag it and tweak it (giving credit for the inspiration). Many of the journal styles have places where you can get the base code, so you don't have to type it from scratch, just change the elements you want. Another thing I do is take screen shot of journals that interest me and then mess around with the elements.
I've done lots of different things with my journals on Insanejournal, Livejournal, and Dreamwidth. I'm seleneheart in all those places if you want to have a look. Another heavily customized journal is my fiction journal, although some of that was done when I pay for a month to be able to get to the theme layer, but most of it is through the custom stylesheet.
I'd be happy to help with any questions or any specific things you'd like to do with your journals.