CSS Examined and Explained

CSS Examined and Explained

CSS Examined and Explained

What the heck is CSS and why is it on my website?

Cascading Style Sheets (CSS), is a coding language complementary to HTML. You can throw any old HTML website onto the internet, but without CSS you are missing out on important pieces to creating a clean design that is integral in Search Engine Optimization (SEO). When reviewing the most current, well structured website code, you will notice experienced web developers lean on CSS for styling far more than they do HTML.

The first, most notable positive of CSS is in it’s name “Style.” CSS can transform a website more than HTML could ever. When creating a website, you should view the HTML as your paint and CSS as your paint brush. CSS can adjust and style the HTML content.

In the language’s most basic form, HTML content can be tagged by their attribute name. A simple example would be changing your body’s background image. That CSS code would look something like this:

body{

background-color:green;

}

Boom! That easy, right? The language basically takes a tag found in HTML code, and allows you to add styling properties. Once the basics are grasped, you can start getting crafty. At an advanced level divs are nested to create stickers, create templates and form a better structured website.

<html>
<head>
< link rel=”stylesheet” href=”YOUR_CSS_FILE” type=’text/css’ media=’all’ />
< /head>
< body>
< div class=”container”>
<h1>Some Content</h1>
<div class=”subcontainer”>Some More Conent</div>
Another blerp here to top it all off
</div>
</body>
</html>

h1{
font-family:’Yanone Kaffeesatz’;
font-size:4em;
}

.container{
font-family:’Arvo’;
font-size: 1.3em
}
.subcontainer{
font-family:’Arvo’;
font-size:2em;
}

Will Translate to…



Some Content

Some More Conent

Another blerp here to top it all off


This allows a web developer to better organize your website. As long as you reference the file in the head of your document, the style can be referenced on any page. This eliminates styling the same attributes over and over, creating somewhat of a style template.

By moving all of your styling to a separate file, your style and content can be managed separately. One of the advantages of this is control. I can create a website, and hand the content to my client to manage with less worries. In theory, by clients only managing the content, only HTML attributed can be affected. Using a Worpress environment makes it even easier, by creating a GUI that eliminates complicated code altercations. They will literally only manage content.

CSS in websitesCSS helps SEO

Splitting your content and styles not only makes amendments easier, but it is key in search engine optimization. Search Engines are becoming more and more creative in an ever demanding market. There is more pressure than ever for these companies to ensure results are relevant. CSS creates a more relevant website. By moving your website’s style attributes to a separate file, these search engines can better identify meaningful keywords.

By eliminating colors and cell-width from your HTML, you are eliminating internal competition. Now meaningful keywords will makeup a higher proportion of you content. That’s all a search engine really cares about right? Separate your content and style with CSS.

Leave a reply

We Build Better Websites.