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
SelectorDeclaration
h1
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
TypeSelectorDeclaration
id
#id-name
color: #ff0000;
class
.class-name
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
    Comment
    */
}
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
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

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?

Search

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: support@InMotionHosting.com
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!