The use of css

What Is CSS and Why Should You Use It?

Even if you’re not a programmer, you’ve probably heard of HTML. It’s the most fundamental markup language and it’s been around since the nineties. What you’re maybe not as familiar with is CSS. It’s an element of programming that’s just as important, and along with HTML and JavaScript, CSS is one of the three main cornerstones of technologies for the web. But just what is CSS, how does it work, and why is it so critical? Read on and learn.

What Is CSS?

CSS stands for cascading style sheets. In short, CSS is a design language that makes a website look more appealing than just plain or uninspiring pieces of text. Whereas HTML largely determines textual content, CSS determines visual structure, layout, and aesthetics. HTML is a markup language, and CSS is a style sheet language. Think “look and feel” when you think CSS.

How Does CSS Work with HTML?

If HTML were the engine components of a car, CSS would be the body style and the paint job. A website can run without CSS, but it certainly isn’t pretty. CSS makes the front-end of a website shine and it creates a great user experience. Without CSS, websites would be less pleasing to the eye and likely much harder to navigate. In addition to layout and format, CSS is responsible for font color and more.

Why Is CSS so important?

To illustrate the importance of CSS, here’s an example of a page on the DevMountain site with and without CSS, a type of visual CSS tutorial, if you will.

Here is a section of the DevMountain Courses page with CSS:

And here is that same section without CSS:

Stark contrast, right? You’ll notice quite a few differences between the two when it comes to overall presentation. With CSS, you see a change in font, font size, and font color. You also see a change in the format of the buttons and get an added blue background behind them. Each of these elements are possible because of cascading style sheets. As a user, which looks more enticing? It’s pretty easy to see why CSS is so crucial.

What are the Benefits of CSS?

There are a number of benefits of CSS, including:

1) Faster Page Speed

More code means slower page speed. And CSS enables you to use less code. CSS allows you to use one CSS rule and apply it to all occurrences of a certain tag within an HTML document.

2) Better User Experience

CSS not only makes web pages easy on the eye, it also allows for user-friendly formatting. When buttons and text are in logical places and well organized, user experience improves.

3) Quicker Development Time

With CSS, you can apply specific formatting rules and styles to multiple pages with one string of code. One cascading style sheet can be replicated across several website pages. If, for instance, you have product pages that should all have the same formatting, look, and feel, writing CSS rules for one page will suffice for all pages of that same type.

4) Easy Formatting Changes

If you need to change the format of a specific set of pages, it’s easy to do so with CSS. There’s no need to fix every individual page. Just edit the corresponding CSS stylesheet and you’ll see changes applied to all the pages that are using that style sheet.

5) Compatibility Across Devices

Responsive web design matters. In today’s day and age, web pages must be fully visible and easily navigable on all devices. Whether mobile or tablet, desktop, or even smart TV, CSS combines with HTML to make responsive design possible.

Want to Learn CSS?

As you can see, CSS is critical when it comes to the overall presentation of a web page. And not only that, it makes developers’ life a whole lot easier when it comes to formatting. Mastering CSS is a vital part of becoming a valuable asset and a solid programmer.

For even more guidance, consider enrolling in either our four-week $49 Coding Basics course to learn a few fundamentals of HTML, CSS, and JavaScript from live, online instruction (where you can ask professionals what languages they’re learning and using) or take the next step into a full web development bootcamp .

Источник

Learn to style HTML using CSS

Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first.

Once you understand the fundamentals of HTML, we recommend that you learn further HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can’t learn CSS without knowing HTML.

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up, as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both of which are parts of our Getting started with the web complete beginner’s module.

It is also recommended that you work through Getting started with the web before proceeding with this topic, especially if you are completely new to web development. However, much of what is covered in its CSS basics article is also covered in our CSS first steps module, albeit in a lot more detail.

Modules

This topic contains the following modules, in a suggested order for working through them. You should start with the first one.

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

This module carries on where CSS first steps left off — now you’ve gained familiarity with the language and its syntax, and got some basic experience with using it, it’s time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you’ll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

At this point, we’ve already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it’s time to look at how to place your boxes in the right place with respect to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

Solving common CSS problems

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

From the beginning, you’ll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there’s not much you can’t do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can’t be done, even if you don’t know how to do it yet!

«CSS is weird»

CSS works a bit differently from most programming languages and design tools you’ll come across. Why does it work the way it does? In the following video, Miriam Suzanne provides a useful explanation of why CSS works as it does, and why it has evolved as it has:

See also

The main entry point for CSS documentation on MDN, where you’ll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Источник

CSS Introduction

Here we will show one HTML page displayed with four different stylesheets. Click on the «Stylesheet 1», «Stylesheet 2», «Stylesheet 3», «Stylesheet 4» links below to see the different styles:

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Example

body <
background-color: lightblue;
>

h1 color: white;
text-align: center;
>

p font-family: verdana;
font-size: 20px;
>

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

This is a heading

When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

If you don’t know what HTML is, we suggest that you read our HTML Tutorial.

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

Источник