CSS How-To Lesson 2 Tutorial

6 min read

Deviation Actions

CeloTheImpossible's avatar
By
CeloTheImpossible
Published:
909 Views
My Gallery      My Prints      Note Me      Watch Me


Here's the previous lesson if you haven't seen it yet: CSS How-To Lesson 1 TutorialYou want to customize your page?
So I noticed in the journal poll I made that a lot of people actually did want a CSS or html tutorial from me. Well, here it is.
CSS and HTML coding can kind of fit together, the same way anatomy and physiology do. Anatomy is the study of where different parts of the body are, and physiology is the study of what they do. HTML and CSS is like this.
HTML stands for Hyper Text Markup Language. It is pretty much what describes the content in the document.
CSS stands for Cascading Style Sheets. It is made to show HOW the html text is displayed.
Seeing as HTML coding is what describes what is inside a document, I will first show you the html coding available for DA- you can find that here:

Now for CSS formatting- and I really hope you read the link part before you continue reading.
this is a good image to use in describing it (found on w3schools.com)
Whatever begins the section is like a selector- if you read the HTML guide I sent, y

Wave your mouse over the image below. Tell me what happens:


With coding, you can apply special features that change something whenever you wave your mouse over it- this is done with a simple "hover" command.

As an example, I will show you the coding I used to add this hover effect to pictures in this journal:

img {
    opacity:0.4;
}
img:hover {
    opacity:1.0;
}

I seriously changed up the coding of the journal just do use that example.
As you can see by the example, I used two selectors; img, and img:hover.
The hover command says when this command (or selector, as discussed in the previous lesson) will take place; in other words, whenever you hover your mouse over it. There are several other commands you can use, however. Just follow the link below:
Seriously if you want to learn CSS you should click this

There are several commands, as you can see, that you can use for parts of CSS coding.

NOW FOR COMBINING COMMANDS.



Sometimes, when you are coding, there might be a specific area of a large area of things you wish to address.

One example is of the comments link at the bottom of the journal. Here is the coding for that:

.journalbox .journalbottom a.commentslink {
    color: #000000 !important;
    text-align: right !important;
    font-family:segoe print;
}

See how I said .journalbox to imply it was inside the journal, then .journalbottom to imply where it was, and then a.commentslink to imply WHAT it was? That's how you select something important. It takes some practice, but after some practice with selecting things it gets easier- honest.

Now for some of you you might not want a fixed journal skin like the one you are reading from right now. After all, fixed journal skins don't really work that well for mobile users.
The repeat command is easy for this
this command makes the background repeat in picture whenever the picture is used up.

Here is an example of how it would be set up:

.journalbox .journaltext {
    background-image: url(IMAGINE SOME PICTURE LINK HERE, 'KAY?);
    background-repeat: repeat;
    background-position: top left;
}

The makes the picture continuously repeat. 

Okay well I need to go and I think this is good for a quick lesson, so I will do another lesson later on. Sorry for the abrupt stoop- Bye!

Skin by CeloTheImpossible

This is not just a derpy journal. This is the most amazing derpy journal you will see in your entire life. People see this journal and weep in its beauty. People see this journal and wish to touch one strand of its non-existent hair. This. Is. JOURNAL.

© 2015 - 2024 CeloTheImpossible
Comments15
Join the community to add your comment. Already a deviant? Log In
NekoUsada's avatar
NekoUsada
I have a question. I just started an imageboard site and for the last couple of hours I have been trying to get certain tags to be different colors. The css already has specific coding for what I want, but I cannot for the life of me figure out how to change the colors.