What Is CSS: Explaining The Presentational Layer of Webpages

What is CSS Image 500px

If you’re new to web development, some of these questions may have crossed your mind: What is CSS? Do I need to know it for my business? Is CSS coding hard to learn? After reading this tutorial, you’ll:

  • know the definition of CSS
  • see how it interacts with HTML coding and
  • be able to write CSS

What is CSS?

CSS stands for Cascading Style Sheet, which is a presentational language that makes the content of a webpage stand out. How does it make your information stand out? Well, if you’ve used Microsoft Word or any word processing program, you would have had to bold, italicize, or underline certain words or phrases. That’s the most basic process that CSS does for your site. It can do way more than that but I wanted to give you a foundational understanding of the language before moving forward.

When you merge CSS with HTML, you end up creating a strong relationship between yourself and your audience by providing high quality and helpful content that looks pleasing to the eye.

If you are unfamiliar with HTML, take a minute to read my HTML article called What is HTML: Understanding the Content Layer of a Webpage.

What is CSS: How It Effects Layout Design

To get an idea of the power CSS has on your webpage, here is a screenshot of my single page site, Red Moon Creations, with cascading style sheets disabled, and below this image is the layout design of the same page with it enabled.

The HTML Content of a webpage with Cascading Stylesheet disabled.

 

My old page with Cascading Stylesheet enabled.

As you can see, using presentational code can bring your page to life by adding color to your background, placing borders around images, and formatting your copy (text). Properly using CSS in HTML for your layout design will, at a minimum, keep your customers on your page a few minutes longer, which may trigger a sale for your business or subscription to your blog.

What is CSS: Understanding Cascading Style Sheets Structure

CSS has a very simple structure: a selector and a declaration. The selector is the HTML tag, class, or id (the latter two will be discussed in Learn CSS – Part 7: Other Ways to Write CSS) that is to be modified, such as the image tag, <img />, or the paragraph tag, <p>. The declaration consists of a property that is to be used to modify the selector (background-color:) and a value that helps determine how that selector will be modified (red). The property and value is enclosed between two curly brackets ( { ) and ( } ). Below is an example:

p {background-color: #f00;}

This line of code says that a paragraph tag will have a background color of red. This is as simple as it gets when it comes to writing CSS code.

The value that represents the color red in the code above is called a hexadecimal color.

Your Thoughts on Cascading Style Sheets

What do you think of cascading style sheets? Does it seem complicated? Leave your thoughts on my Facebook Page.

Stay tuned to the next CSS installment: Learn CSS – Part 1: Where to Place Your Cascading Style Sheet.