Introduction to CSS

f t g+ in

In this post, we will talk about what CSS is, why it was created and how it is used in web design and development.

Thumbnail Blaster - Video Thumbnail Creation Software

What is CSS?

CSS (Cascading Style Sheets) is a set of rules that define the style of a web page. When we talk about the style of web pages, you can think of fonts, colors, backgrounds, borders, formatting, effects etc., pretty much everything that contribute to how a web page looks. All elements of a web page can be styled with CSS.

Styles were first added to HTML 4.0 to separate content from formatting. This addition improved the web design process as a whole considerably.

Why Do We Need CSS?

CSS basically separates content from style allowing you to better organize your code with the ability of much faster coding and modification.

Using CSS, styling web pages in other words, is not a requirement in web design. You can present your content without styling it if you want. However, if you want to style your content, as you will better understand soon, CSS makes things a lot easier and faster for the web designer. It can be said that using CSS is a best practice in web design.

Let's imagine that you have a large website that has 1,000 pages (there are websites with millions of pages!). If you don't use CSS, whenever you want to change the size of a text block or background color of a section, you would need to go through all those 1,000 files and modify them all. Can you imagine how much time this would take? On the other hand, with a single CSS file, you would need to change only one file which will affect the whole site.

How to Use CSS?

There are three methods of using CSS in web design; as external stylesheet, as internal stylesheet or as inline styles. You can learn about each of this methods in detail in the tutorials below:

- External Style Sheets
- Internal Style Sheets
- Inline Styles

Which Type of Style Sheet to Use?

There is no best way to add CSS into your design because it all depends on what you want to accomplish. As a general consensus, using a single external style sheet and doing the entire styling job in it is the most preferred way.

One thing you should know is that CSS styles will cascade in the order you use them, actually this is why they are called Cascading Style Sheets. If you use all three methods above, it will work like this:

If you have an inline style for an element, it will be the effective one even if it has internal and external styles as well. If you don't have an inline style for an element, but you have an internal style sheet, it will be the effective one. And if you only have an external style for an element, it will be the effective one.

Was this post helpful?

Please consider sharing it, and supporting us with a small tip. Thank you :)

f t g+ in