Introduction to CSS
In this post, we will talk about what CSS is, why it was created and how it is used in web design and development.
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:
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.
More CSS Tips
Two Things You Should Know Before You Start Working with CSS How to Add Comments in CSS How to Add Inline Styles to HTML Elements How to Add Internal Style Sheets (CSS) to a Web Page How to Add External Style Sheets (CSS) to a Web Page A Great Free Resource for CSS Beginners Designing a Simple Testimonial Box with CSS Double Underline and Double Overline Text with CSS 7 Things to Avoid in CSS for Browser Compatibility Simple CSS Table Tutorial: Create a Colorful Table with CSSCSS Tips