Why do we need css

To this day, support for certain CSS functions varies from browser to browser. Web developers lay out pages according to the "box model. These boxes are nested, one inside another. For example, a page's header is a box, and it contains several smaller boxes comprising all the elements that make up a header: logo, navigation, social media buttons, shopping cart buttons, etc. Using CSS, a developer assigns styles to the "header" box. When your visitor navigates to additional pages on your site, only the pages themselves need to load Another big benefit of CSS is the ability to customize pre-existing templates.

Here's what I mean And, let's imagine you're using WordPress to run your website a great choice , by the way. In this scenario, you could dig into your site's template called a theme in WordPress lingo and customize it to your exact liking.

So rather than building a website from complete scratch, you could instead find an existing template layout that's relatively close to the design you want. From there, you could simply modify it and tweak it to get the exact design you want. Here's another benefit of CSS that's worth mentioning: Animation. Without CSS, if you wanted some kind of animation or interactive element on your page, the only option was to use JavaScript. But now, you can create simple animations and small feedback effects with just a few lines of code.

And it's this sort of small, subtle interactive feedback that makes your pages really pop for your visitors. CSS Frameworks are pre-created libraries that allow you to rapidly prototype and develop layouts. The two most popular frameworks are Bootstrap and Foundation.

Personally I haven't used Foundation, but I know it's fantastic. Instead, I opted for Bootstrap and I absolutely love it. Bootstrap makes building custom web layouts fast and easy. Instead of creating everything from scratch, you simply use building blocks that have already been created for you. And, using Bootstrap with a site builder like Pinegrow makes building layouts even faster! And now that you have a solid idea of the big benefits of CSS, let's now dig deeper and learn about the types of CSS that we can use So by now, you've got a very good handle on the importance of CSS and what it can do for you.

But here, let's address the different types of CSS and how you can apply all this stuff to your web design projects. Now sometimes, CSS rules are also called selectors. The terms rule and selector are often used interchangeably. And in CSS, there are actually a variety of rule or selector types that we can use. Here's a quick run-down: We can use class selectors , element selectors also sometimes called redefined HTML element selectors , ID selectors , descendant selectors , pseudo class selectors The good news is, the more comfortable you get with CSS, the more this stuff becomes second nature.

The most common approach and what's considered best practice is to use what's called an external style sheet. We briefly touched on this earlier. And, you may have seen an externals style sheet in your travels -- it's a file in your website directory with a.

Often, external style sheets are named something simple like style. An external style sheet is simply a file that contains a list of CSS rules that you'd like to apply throughout your website.

Then, your individual HTML pages link to your external style sheet, putting themselves under it's control. So whatever the rules that are stored in an external style sheet say, the static HTML pages that are connected to it do. It's that simple! Now although using an external style sheet is the most efficient way to work with CSS, there are other approaches.

For instance, you can create what's called an internal style sheet. In other words, an internal style sheet can only control the page that it's a part of. Internal style sheets come in handy for small stand-alone pages that contain formatting that's unique only to that page While this might be handy for fast, one-off formatting needs, this isn't a preferred method.

So there's a detailed look at the importance of CSS. For this reason, the importance of CSS in web designing is difficult to overstate! CSS allows web designers, developers, bloggers, etc. CSS gives us the opportunity to play with a page layout, adjust colors and fonts, add effects to images, etc. Why do we use CSS? Ultimately, it makes our lives easier. This is done through an external stylesheet using a. CSS also makes websites more accessible.

In the past, setting up HTML files so that they were accessible to screen-readers and other kinds of methods was a pain. CSS3 has made this easier, enabling the same markup page to be rendered in different methods like on-screen, in print, by voice, and on tactile Braille devices.

This means that CSS has an inherent hierarchy and styles of a higher precedence will overwrite rules of a lower precedence. What this means is basically, there is a cascading order to the CSS styles you set. But then, inside your HTML document, you make a single paragraph a red color. Because of the cascading order, the red style declaration will win over the blue, and that paragraph will be red.

This may sound confusing to beginners. And cascading is a good thing. When a user prints a web page, you might provide different style information that makes the printed page easy to read. There are exceptions to this rule, of course, and HTML also provides some ways to specify style. Save the file and load it in a browser. Now you have a sample document linked to a separate style sheet, you are ready to learn more about how your browser combines them when it displays the document.

See the other tutorials in this section for more information.