CSS Atoms | CSS3 Tutorials, Tips, and Articles » Declarations http://cssatoms.com Thu, 01 May 2014 20:03:32 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Declaration of Colors and Borders in CSS http://cssatoms.com/basic/declaration-of-colors-and-borders-in-css-2/ http://cssatoms.com/basic/declaration-of-colors-and-borders-in-css-2/#comments Wed, 06 Apr 2011 12:59:48 +0000 http://cssatoms.com/basic/declaration-of-colors-and-borders-in-css-2/ There are several ways that CSS will allow you to make elements on your page stand out. Without some creative styling, most of your page will simply be text and […]

The post Declaration of Colors and Borders in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
There are several ways that CSS will allow you to make elements on your page stand out. Without some creative styling, most of your page will simply be text and images. While this can be OK in simple situations, most sites will require a bit more flavor. Today we’ll see how to make our page elements stand out by using the CSS background-color property along with the border property. Let’s jump in and see how it works.

STEP ONE:

The HTML

We’ll start with a very simple HTML page that contains nothing but a Div element with some placeholder text inside of it. Here’s what the HTML file should look like initially:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> CSS Colors and Borders </title>
    <link rel="Stylesheet" href="style.css" />
</head>
<body>
    <div id="demo">
        Vel elementum platea rhoncus, dis mattis, a sagittis risus augu montes lorem urna! Turpis 
        magna pid in! Turpis rhoncus facilisi dignissim massa aliquam urna cras amet placerat a tortor, 
        in ac platea sociis nunc lorem tincidunt magnis ridiculus, elementum integer mid porta! Integer 
        etiam. Dolor tortor ac? Nisi! Cursus Phasellus amet turpis montes! Quis vel purus magnis sagittis 
        pu porta vut! Quis scelerisque etiam, nascetur augue eu quis duis. Dapibus, tristique nisi pulvinar 
        integer, scelerisque ridiculus Ut vel ultrices ridiculus vel, quis nunc, non proin, pid arcu turpis 
        cum, velit in ut dis? Dolor amet adipiscing? Ridiculus tortor diam! Integer urna, sit habitasse 
        lacus cursus? Augue Lectus adipiscing, auctor vel! Cum turpis rhoncus porttitor, Quis nec ac et 
        aenean in porta vel adipiscing habitasse.
    </div>
</body>
</html>

STEP TWO:

The CSS

Now, in our CSS file we’ll want to target the Div with the ID of “demo”. Therefore, we’ll use a regular old CSS ID selector like so:

#demo
{
 
}

This is, of course, where we’ll be writing all of the CSS declarations to make our Div stand out. Let’s start by adding some padding and a width declaration so that the text on our page has some sort of dimensional restraints:

#demo
{
    padding: 5px;
    width: 800px;
}

Excellent, now if you load up the page in your browser, you’ll see nothing but a fairly large, 800 pixel wide paragraph. Now, let’s go ahead and put a border around our Div. The CSS border property takes 3 values:

  1. The width of the border in pixels.
  2. The type of border (solid, dashed, transparent, etc…)
  3. The color of the border

So, to add a 2 pixel, light-blue border to our Div, we simply need to do this:

#demo
{
  border: 2px solid #38739F;
  padding: 5px;
  width: 800px;
}

Notice that we’ve used a hex value color property for our border. You could just as easily use the real word for most colors like “blue”. Now if you check out our paragraph, it’s starting to look a little bit nicer. Next, we’ll add a background color and change the font size to make our paragraph a bit easier to read.

The background-color in CSS is just as easy to use as the border property, and all you have to do is tell it what color you’d like the background of the element to be. I’ll also add a new font-size declaration to make the font a bit bigger. Here’s what the CSS looks like now:

#demo
{
    background-color: #C1DEFE;
    border: 2px solid #38739F;
    font-size: 20px;
    padding: 5px;
    width: 800px;
}

Now, if you take a look at the page, you’ll see that the text has far more contrast and just plain looks better than the plain black on white version.

Before:
Before Adding Style

After:
After Adding Style

CSS borders and background colors are essential to creating outstanding looking web pages. These fundamentals will have you styling up elements in no time. Join us in our next beginner CSS tutorial where we’ll be talking about how to comment your code to make your life with CSS easier and more organized. See you then!

Download Source Files

The post Declaration of Colors and Borders in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/declaration-of-colors-and-borders-in-css-2/feed/ 0
Specifying Colors in CSS http://cssatoms.com/basic/specifying-colors-in-css-2/ http://cssatoms.com/basic/specifying-colors-in-css-2/#comments Wed, 30 Mar 2011 19:48:05 +0000 http://cssatoms.com/basic/specifying-colors-in-css-2/ You have your HTML ready to go; now you need a CSS to specify the colors for its background, sidebar, headlines, etc. How can we specify them?  There are three […]

The post Specifying Colors in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>

You have your HTML ready to go; now you need a CSS to specify the colors for its background, sidebar, headlines, etc. How can we specify them?  There are three common ways to specify web colors: by hexadecimal code, by percentages, or by color name. In this tutorial we are going to learn all about these three different ways and how to implement them.

First at all, learn that any of the three specifications will tell the browser the amount of Red, Green and Blue (RGB) that goes into a web color.

NOTE: The HTML and CSS files with the different ways of specifying color are available for download at the end of this tutorial.

Specifying Color by Hexadecimal (Hex) Code:

  • Hex codes are the most common, convenient, and upright way of specifying web colors.
  • When we use hex codes we are able to specify millions of different colors.
  • Hex code always starts with the number symbol: # followed with six digits or letters.
  • Hex code is based on ten digits: 0 to 9 and six letters: A to F.
  • The six characters are divided into sections of two characters. Two digits or letters for each RGB component; Red, Green, and Blue.

Example:
Hex Code Example

How can we find the hex code for the colors that we would like to use? Easy, the most particular way is to use a program, like Photoshop, to get the exact hex code for any color of our choice. Also, we can use color charts available online. There are also a lot of good websites that offer color palettes and color converters.

Now, let’s use a hex code to add a background-color to our HTML body:

body {
	background-color: #4088CC;
}

NOTE: If each pair shares the same character; for example, #FFFFFF, we can use shorthand to simplify it to #FFF. Here is another example, #4488AA to #48A.

Specifying Color by RGB Percentages:

  • RGB percentages are rarely used, but they are somehow common. Keep in mind hex codes are the most widely used method.
  • When we specify color with RGB percentages, we are specifying the right amount of red, green, and blue the color should be composed of.
  • RGB percentages starts with rgb followed with percentages for red, green, and blue within parenthesis.

Example:
RGB Percentage Example

Also, we can specify the colors using just the numeric values without the percent symbol:
Numeric Values Example

How can we obtain the percentages and numeric values? Remember that RGB is composed of numeric values of 0 to 255; consequently, 25% of 255 is 64, 53% of 255 is 136, and 80% of 255 is 204.

Now, let’s use a RGB percentage to add a background-color to our HTML sidebar:

.sidebar {
	background-color: rgb(25%, 53%, 80%);
}

To see how RGB numeric values specification works, let’s use a RGB numeric value to add a background-color to our HTML footer:

.footer {
	background-color: rgb(64, 136, 204);
}

Specifying Color by Name:

  • CSS only defines the name of 17 web colors; thus, is an old and quickly method to specify web colors for our websites.
  • To specify a color by its name we only need to write the color name. For example, I want to specify the color gray as the background-color for my content box, here is how we can specify it:

.content {
	background-color: gray;
}

Here is a list of the 17 different colors available for color name specification: Black, Gray, Silver, White, Aqua, Blue, Navy, Teal, Lime, Green, Olive, Yellow, Maroon, Orange, Red, Fuchsia, and Purple. (All of these colors are predefined amounts of Red, Green, and Blue.)

Now that you know how correctly specify color in CSS, it’s time to add some color to your HTML files. Remember to choose colors that work well together! As Gaudi once said, “Color in certain places has the great value of making the outlines and structural planes seem more energetic.”

Download Source Files

The post Specifying Colors in CSS appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/specifying-colors-in-css-2/feed/ 0
CSS Classes vs. IDs http://cssatoms.com/basic/css-classes-vs-ids/ http://cssatoms.com/basic/css-classes-vs-ids/#comments Wed, 30 Mar 2011 19:44:38 +0000 http://cssatoms.com/basic/css-classes-vs-ids/ When it comes to styling pages, it can become a bit confusing trying to figure out where to use classes and where to use IDs. If you don’t know how […]

The post CSS Classes vs. IDs appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
When it comes to styling pages, it can become a bit confusing trying to figure out where to use classes and where to use IDs. If you don’t know how to properly use them, it can cause you to write a lot of duplicate code in your CSS, and can make your styles hard to manage. Today, we’ll talk about how to properly use IDs and classes in CSS, and hopefully save you a load of headaches in the future.

This tutorial may help you to think of CSS classes and IDs in a way that is easy to visualize.
An ID is unique. No one has the same social security number as you; therefore, it’s a good way to ID someone. The same thing applies to HTML. In your documents, things that are entirely unique in themselves should be garnished with an ID. On the opposite note, we’ve all been in a Class of people before. For instance, a classroom called “Science” has several students in it. Each student may be slightly different, and could even have their own student ID if necessary. However, since each student was a part of the “Science” class, we can easily group them together. In CSS, when you have elements that share common attributes, you should apply a class, because those elements cannot share the same ID in an HTML document. Let’s take a look at this in practice.

STEP ONE:

HTML

Our HTML setup will consist of 3 Div elements. The “top” Div element will have a unique background color, whereas the bottom 2 elements will each share a background color and have some drop shadow applied to them. However, to get started, here’s what the initial HTML setup should look like:

<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS Classes vs. IDs</title>
    <link rel="Stylesheet" href="style.css" />
</head>
<body>
    <div id="div1" class="scale"> </div>
    <div class="blue shadow scale"> </div>
    <div class="blue shadow scale"> </div>
</body>
</html>

Notice that in our HTML file, our bottom 2 div elements have 2 classes; “blue” and “shadow”. You denote multiple classes simply by adding a space between them. As you can see, since “div1″ is a unique element, we’ve given it an ID as opposed to the other 2 Divs that will share styles.

STEP TWO:

The CSS

Recall that any elements that will share styles should have those styles placed into a CSS class. This makes it far easier to style multiple elements than to give each one unique IDs and repeat the same CSS code over and over. However, before we go into our classes, let’s give “div1″ some unique styling. Here’s what the CSS file should look like now:

#div1
{
	background-color: #939;
	height: 200px;
	width: 200px;
}

Now, viewing the HTML page in the browser will reveal a “purple” square on the page. This is good, and I promise this will be the only purple element for now. Notice that I’ve given the Div a height and width declaration as well.
Div 1 Style

Since all of our Divs will be the same height and width, there may be a better way to implement this which we’ll get into shortly. For now, let’s go ahead and add the styles for our classes; “blue” and “shadow”:

#div1
{
	background-color: #939;
	height: 200px;
	width: 200px;
}
 
.blue
{
	background-color: #06C;
}
 
.shadow
{
    border: 1px solid #999;
    -webkit-box-shadow: 5px 5px #888;  
}

Now if you view the page in your browser, you’ll see that with those declarations, we’ve styled both of our bottom Divs. Again, we chose classes for the bottom 2 Divs because they both had to share more than one style. If we had styles that these Divs did not share, it may help to go back and give each one its own ID, that way styles will be applied to that Div only. I’ve thrown a little problem in here on purpose.
blue and shadow Classes with Style

You’ll notice that we’ve repeated the exact same height and width declaration 3 times in our CSS page. When you have elements that use the same CSS code repeatedly, this is when it helps to refactor the code and create a class for them. Let’s take our height and width declaration and put them in a new class called “scale”, and then apply that class to each of our Divs:

#div1
{
    background-color: Fuchsia;
    height: 200px;
    width: 200px;
}
 
.blue
{
    background-color: #1b83f2;
}
 
.shadow
{
    border: 1px solid #999;
    -webkit-box-shadow: 5px 5px #888;  
}
.scale
{
    height: 200px;
    width: 200px;    
}

As you can see, adding the “scale” class has allowed us to delete all of the repeating height and width declarations in our CSS code. This is the essence of classes vs. IDs. When you have repeated code throughout your CSS, find the elements that have those styles in common and create a new class. This will keep your CSS code lighter and more manageable.

Now if you preview the page in your browser, we can see how the elements were styled.
Final Result

Knowing when and how to use CSS IDs and classes can mean the difference between easily manageable websites and completely unreadable, unmanageable spaghetti code. Using these techniques will enable you to better keep track of your styles, as well as to code more efficiently. Join us next time when we learn to create a simple navigation bar in CSS. See you then!

Download Source Files

The post CSS Classes vs. IDs appeared first on CSS Atoms | CSS3 Tutorials, Tips, and Articles.

]]>
http://cssatoms.com/basic/css-classes-vs-ids/feed/ 0