WHAT you need to know:
Basic CSS:
HTML:
My first draft, was...terrible...so I have corrected it and made it much easier and much more complete. Here we go!
In CSS (cascading style sheets), one of the first things you need to know is how to label a tag. For people not that familiar with CSS, basically CSS allows you to move the configuration of HTML tags to another file and call that file ((something).css) for a variety of customizations.
Now labeling a tag for configuration has some flexibility but also some confusion. Let's try to move away from confusion to understanding. For the purposes of this tutorial, I'll be using one line of code for configuration. I'll change the background color to red (I dare you to do red in a document and like it :)
1) Basic Tag selection (Tag Selector)
If you want the least painful and quickest way to tag something than look no further than call your selector the tag itself. That's right, you can actually configure a tag in html by it's actual name.
Example. Suppose I want the background color of a button to be red (ug). Anyway:
IN HTML
<button>(not complete of course)
IN CSS
button
{
background-color:red
}
Now this has one big advantage. Anytime I call the stylesheet, the button tag in html will be red. The disadvantage is that this has zero customization. EVERY button will have the background color of red. If that's what you want then go for it, but CSS gives us some more flexibility than that.
1) Class Selector (a period)
This is pretty basic. Using a period for the label, you can assign a label to a variety of tags. This means that anytime I use this label, buttons, body, etc will all inherit this tag. The key is that this is designed to be used over and OVER and OVER again. Therefore use it when you need to use it a LOT for a variety of element.s
HTML
<body class='Fred'>
<button class='Fred'>
<input class='Fred'>
CSS
.Fred
{
background-color:red;
}
Ya, you can use this class with any element your heart desires. However, what if you want to filter it to only certain elements. NO PROBLEM. CSS gives us a nice feature and in my coding, most of the time I do it this way.
HTML
<body class='Fred'>
<button class='Fred'>
<input class='Fred'>
Fred.button
{
background-color:red;
}
Yes in this case ONLY the button will see red color. I filtered it so that only a button can have that feature (if you consider ugly red a feature). Now don't get discouraged. Using a comma we can actually do more than one element. Using the same example.
HTML
<body class='Fred'>
<button class='Fred'>
<input class='Fred'>
Fred.button, Fred.input
{
background-color:red;
}
Now both button and input get the red color. Body will be left alone. Cool!
ID Selectors (a pound symbol)
IDENTICAL except that you use this only ONCE. If you only need this label once use this; otherwise use the Class selector. As it's called, the ID selector means you use the id label of an element. Given that ID's must be unique to an element, this is something useful if you have need for it in only one element.
#Fred
{
background-color:red;
}
<table id = 'Fred'>
That's it. Now isn't CSS labeling flexible? Their are a few misc. things you can do but stick with the basics. Most of the time this will be just fine for your issues.
Love to read your informative post and i also wanna share Linux VPN Overview
ReplyDelete