DNS Technology Consultants, Inc.
 
 
 

How CSS Works

What is CSS?

CSS stands for Cascading Style Sheets. These set of definitions describe how HTML elements are to be displayed on the screen, paper when printed, and in other media. It is mentioned that CSS saves a lot of work. Well, no it doesn't, actually it creates more work, but what it does do is saves on lines of coding. Since you are able to make site wide definitions for fonts, headings, colors, etc. you can reuse those definitions throughout your site.

About the Cascading

Most coders will overlook this part, so we think it is important to mention this. The word cascading within the definition is important. CSS will take the definitions in the order in which they are defined and then will use the last of the definition. This could be a great asset to your programming; however, if you don't fully understand this, it could also drive you insane.

So, what exactly does this mean? Well here is the order in which you can define CSS files.

  1. In a file outside of the webpage, and linked to by every page on your site (Mostly how it is done.)
  2. Within the heading of the webpage itself.
  3. Inline - or as part of the HTML tag as an attribute.

Ok, so let's talk about a cascading example. You have defined the tag BODY in a document (or style sheet) that is linked to the web page. Then you define BODY within the heading of the web page. Which definition will be displayed in the browser. The correct answer is the one in the webpage... it redefined the one that is linked. You could even override (or add to) that definition within the attributes of the body tag itself within the HTML. So if you are trying to troubleshoot a display issue. It is recommended to work your way backwards from the tag, to the heading, to the attached files.

Now, to complicate things a little more... what if you have multiple pages links as style sheets? The answer, it (the browser) will take the definitions in order, keeping the information from the last defined reference.

Declaring your CSS

CSS Can be declared in three different locations (as mentioned above). Here some coding on where you can make these CSS definitions:

Linked style sheet (add within the heading section):

 <link rel="stylesheet" href="URL TO FILE" media="all">  

In the page Heading definition (again in the heading section):

 style type="text/css">  
 .  
 . DEFINTIONS  
 .  
 </style>  

Within the TAG as an attribute:

 <TAG style="DEFINITIONS" />  

Using !Important

Most developers out there consider using !important to be harmful or poor coding; however, it was designed for a reason. You can use this to override previous CSS declarations if needed.

The following is an example of using the !important in CSS:

 .button {  
   background: red      !important;  
   color: white        !important;  
   padding: 3px        !important;  
   border-radius: 5px     !important;  
   border: 1px solid black  !important;  
   /* For good measure */     
   text-decoration: none   !important;  
 }  

Classes, ID, redefine, Oh My!

When using CSS, you can make declarations for redefining the parameters for existing HTML tags, you can create your own custom classes, or you can make declarations for items within a specific ID.

Most people thinking that CSS is only used to redefine HTML tags, but in reality... creating custom classes is the most popular use of CSS. The class selector uses the HTML class attribute, and is defined with a "." This will allow you to set a particular style for many HTML elements with the same class; whereas, the ID selector will be unique to only one element since by standards you can ID's are unique on a page.

Let's explain this a little further. Let's say we are going to redefine an HTML element that will be the same throughout your entire website. Maybe we want all of our images to have a rounded border, and you can redefine any HTML element, this is just an example.

To redifine an HTML element

 img {  
    border-radius: 10px;  
 }  

Ok, now all of our images will have a rounded border, but what if we would like to put that same setting on more than images, or maybe just some of the images. What we could do is create a rounded class and then apply that to the elements on the pages that we want to have that feature.

Creating a custom class

 .rounded {  
    border-radius: 10px;  
 }  

Now, we can apply that class to any of our HTML elements on our page that will accept those definitions as an attribute.

example:

 <img src="XXXX" class="rounded" alt="XXXX" />  

Now, what if you want to create a sub-section on a page, and define elements just for that section. This is where the ID declarations would come in. You can create a DIV section on your page and give it and ID. Then the elements that are within that DIV will get the declarations. There are more advanced ways of doing this as well, but for this document, here is a basic example.

Declaring CSS with and ID

 #rouded {  
    border-radius: 10px;  
    background: blue;  
    color: white;  
 }  

If you apply the following to your HTML, you will get a box with rounded edges that has a blue background and all text within the box will be white.

CSS ID Example:

 <div id="rounded">  
 .  
 . Coding  
 .  
 </div>  
 
 
 
 
 
 
Copyright © 2017, DNS Technology Consultants, Inc.
all rights reserved