InMotion Hosting Support Center

Every modern website uses CSS to change the look and feel of the website. CSS is a standard that is required for modern browsers to function correctly. CSS is a w3c standard and necessary to understand website coding. This article will explain what CSS is and how it works.

What is CSS?

CSS stands for "Cascading style sheets". CSS is separate code that styles elements in your website like paragraph or header HTML tags. The CSS code can be stored in a separate file called a style sheet. This allows you to create styles for elements throughout the website, without having to code the styles into each page.

HTML originally had tags like <font>, <center>, and so forth that styled each element in each page. The problem with this is that when the developer wanted to change the style of some content, every page had to be edited throughout the website. CSS eliminates the need to edit all your pages by having the code for the styles stored in a separate file that can be edited once.

Where to put CSS code

CSS can be used in three different ways. You can use an external style sheet, and internal style sheet, or an inline style. There is more information on how to do this in our article on External, Internal, and Inline CSS styles.

How CSS selectors work

CSS has a selector that contains declarations. The "Selector" selects the element in the web document like an <h1>, <p>, or <div>. The "Declaration" contains the code that allows the element to be styled. For example, to change the color of a font you can use the "color" "property" with the "value" of "#ff0000" red. See the following example.

tag selector
color: #ff0000;

The previous code snippet looks like the following when used:

h1 {color: #ff0000;}

You can also use an "id" or a "class" to select an element.

class and id selectors
color: #ff0000;
color: #ff0000;

CSS syntax for selecting an id or class looks like the following.

.class-name {color: #ff0000;}
#id-name {color: #ff0000;}

How CSS Syntax works

To style your HTML elements, you will need to know how to use the CSS syntax. Each element can have multiple declarations added to it. For example if you want to center the text, make it red and bold it, you would use the following syntax.

.para {text-align: center; color: #ff0000; font-weight: bold;}

This allows the element with the class .para to be center, red, and bold. The following HTML tag would have these properties.

<p class="para">

You can also use CSS on multiple lines like the following.

.para {
    text-align: center; 
    color: #ff0000; 
    font-weight: bold;

CSS comments

CSS comments are used for disabling lines of code or adding instructions to your code for other developers to read. There are two types of comments in CSS. The Multiple line comment and the single line comment. The following snippets are how the comments are used.

h1 {
    // This is a single line comment
h1 {
    This is a 
    Multiple line
Continued Education in Course 203: Using and Understanding CSS
You are viewing Section 2: Introduction to CSS
Section 1: Simple CSS Drop Down Menu
Section 3: External, Internal, and Inline CSS styles

Support Center Login

Social Media Login

Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
need my background image centered on all browsers and all size screens
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!