How Does CSS Work?

/How Does CSS Work?

How Does CSS Work?


CSS (or Cascading Style Sheets) is a collection of formatting rules that manage the appearance of a webpage or an entire website. In general, CSS can reduce the time needed for designing your website. Instead of manually defining fonts, colors and sizes for elements in your website, you can standardize them, and apply styling to multiple elements at once. Almost all web browsers available today (e.g. Firefox, Chrome, Opera, Internet Explorer, etc.) support CSS. However, some of these browsers simply “read” CSS information. They don’t support all of its functionalities completely.

Things That You Can Do with CSS

CSS is a versatile and powerful tool that you can use for your websites. By using it, you can:

  • Create a layout for your website easily (for example defining the height and width of elements).
  • Adjust the colors and fonts of the text contained in your site.
  • Manage the location and positioning of images.
  • Improve your search results rankings – CSS allows search engines to “read” your website’s content fast. It will also reduce the codes included in your webpages. Since your website will be more readable because you reduce the amount of code by using CSS, you will achieve better rankings in search results pages.
  • Boost your website’s browser compatibility – CSS can enhance your website’s readability and adaptability. That means your site can be viewed and supported by various web browsers available today.

The Syntax of Cascading Style Sheets

In general, you can use any text editor to create CSS documents. However, you should save the file using a CSS extension (like filename.css).

The syntax of CSS instructions has two components:

  1. The Selector – It is the identifier found inside the body of your webpage.
  2. The Declaration – It is the code that determines the style that you want to apply in terms of rule and property.

Let’s assume that you are designing a website. You want to use Verdana as the font style and yellow as the font color. If you will work on your H1 headings, here are the codes that you need to use:

Selector {property: rule;}

H1 {color: yellow; font-family: Verdana}

Important Note: You should use “{}” to enclose rules and properties in your code.

Applying Your CSS Code

You can place your CSS code in three different places:

  1. Internal (i.e. in the head) – You should use this if you want a certain webpage to have a unique design.
  2. Inline (i.e. inside a separate tag) – This process requires the designer to incorporate the CSS code into the website’s content. Lots of website designers prefer to use this style when working on projects. This style is often used in newsletters as well, since the css is embedded in the body it does not require a separate css file.
  3. External (i.e. the instructions are saved in an external file) – Here, the code is not included in the webpage’s body. Instead, an external file is linked to the website in order to relay the information. You must use a link tag to connect that external file to your webpages.

Don’t Use It for Spamming Purposes

Like other programming codes, CSS instructions can be used for positive and negative things. There are some CSS techniques that you have to avoid if you want your website to stay active for a long time. Why? Because there are some CSS techniques that are considered as spam by search engines (e.g. Google, Bing, Yahoo, etc.). Thus, your website can get banned if you aren’t careful with the techniques that you are using. Here are some of these bad or “black hat” CSS techniques:

  • Using CSS to hide certain codes from website readers
  • Using CSS to hide, highlight, or italicize website content for the benefit of search engine “spiders” only.


CSS is an excellent tool that can help you to build and/or maintain websites. Its benefits are more apparent if it is applied on webpages that have the same style. You should study CSS techniques if you want your website to stay attractive and effective.

By | 2018-01-17T11:57:22+00:00 April 25th, 2016|Comments Off on How Does CSS Work?