Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS below:

What is CSS? - Learn web development

• Next

CSS (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, what the basic syntax looks like, and how your browser applies CSS to HTML to style it.

In the Structuring content with HTML module, we covered what HTML is and how it is used to mark up documents. These documents will be readable in a web browser. Headings will look larger than regular text, paragraphs break onto a new line and have space between them. Links are colored and underlined to distinguish them from the rest of the text.

What you are seeing are the browser's default styles — very basic styling that the browser applies to HTML to make sure that the page will be readable even if no explicit styling is specified by the author of the page. These styles are defined in default CSS stylesheets contained within the browser — they have nothing to do with HTML.

The web would be a boring place if all websites looked like that. This is why you need to learn about CSS.

Using CSS, you can control exactly how HTML elements look in the browser, presenting your documents to your users with whatever design and layout you like.

• A document is usually a text file structured using a markup language, most commonly HTML (these are termed HTML documents). You may also come across documents written in other markup languages such as SVG or XML. An HTML document contains a web page's content and specifies its structure.
• Presenting a document to a user means converting it into a form usable by your audience. Browsers like Firefox, Chrome, Safari, and Edge are designed to present documents visually, for example, on a computer screen, projector, mobile device, or printer. In a web context, this is generally referred to as rendering; we provided a simplified description of the process by which a web page is rendered in How browsers load websites.

Note: A browser is sometimes called a user agent, which basically means a computer program that represents a person inside a computer system.

CSS can be used for many purposes related to the look and feel of your web page, for example:

• Text styling, including changing the color and size of headings and links.
• Creating layouts, such as grid layouts or multiple-column layouts.
• Special effects such as animation.

The CSS language is organized into modules that contain related functionality. For example, take a look at the MDN reference pages for the Backgrounds and Borders module to find out what its purpose is and the properties and features it contains. In our module pages, you will also find links to Specifications that define the technologies.

CSS is a rule-based language — you define rules by specifying groups of styles that should be applied to particular element or groups of elements on your web page.

For example, you might decide to style the main heading on your page as large red text. The following code shows a very simple CSS rule that would achieve this:

h1 {
  color: red;
  font-size: 2.5em;
}

• In the above example, the CSS rule opens with a selector. This selects the HTML elements that we are going to style. In this case, we are styling level one headings (<h1>).
• We then include a set of curly braces — { }.
• The braces contain one or more declarations, which take the form of property and value pairs. We specify the property (for example, color in the above example) before the colon, and we specify the value of the property after the colon (red is the value being set for the color property).
• This example contains two declarations, one for color and another for font-size.

Different CSS properties have different allowable values. In our example, we have the color property, which can take various color values. We also have the font-size property. This property can take various size units as a value.

A CSS stylesheet contains many such rules, written one after the other.

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

You will find that you quickly learn some values, whereas others you will need to look up. The individual property pages on MDN give you a quick way to look up properties and their values.

Note: You can find links to all the CSS property pages (along with other CSS features) listed on the MDN CSS reference. Alternatively, you should get used to searching for "mdn css-feature-name" in your favorite search engine whenever you need to find out more information about a CSS feature. For example, try searching for "mdn color" or "mdn font-size"!

As explained in How browsers load websites, when you navigate to a web page, the browser first receives the HTML document containing the web page content and converts it to a DOM tree.

After that, any CSS rules found in the web page (either inserted directly in the HTML, or in referenced external .css files) are sorted into different "buckets", based on the different elements they will be applied to (as specified by their selectors). The CSS rules are then applied to the DOM tree, resulting in a render tree, which is then painted to the browser window.

Let's look at an example. First of all, we'll define an HTML snippet that the CSS could be applied to:

<h1>CSS is great</h1>

<p>You can style text.</p>

<p>And create layouts and special effects.</p>

Now, our CSS, repeated from the previous section:

h1 {
  color: red;
  font-size: 2.5em;
}

p {
  color: aqua;
  padding: 5px;
  background: midnightblue;
}

This CSS:

• Selects all <h1> elements on the page, coloring their text red and making them bigger than their default size. Since there is only one <h1> in our example HTML, only that element will get the styling.
• Selects all <p> elements on the page, giving them a custom text and background color and some spacing around the text. There are two <p> elements in our example HTML, and they both get the styling.

When the CSS is applied to the HTML, the rendered output is as follows:

Try playing with the above example. To do so, press the "Play" button in the top-right corner to load it in our MDN Playground editor.

Do the following:

1. Add another paragraph of text below the two existing ones, and note how the second CSS rule is automatically applied to the new paragraph.
2. Add an <h2> subheading somewhere below the <h1>, maybe after one of the paragraphs.
3. Try giving the <h2> elements a different color by adding a new rule to the CSS. Make a copy of the h1 rule, change the selector to h2, and change the color value from red to purple, for example.
4. If you are feeling adventurous, try looking up some new CSS properties and values in the MDN CSS reference to add to your rules!

For some additional practice with CSS basics, see Write your first lines of CSS! from Scrimba ^{MDN learning partner}. This scrim gives a useful rundown of basic CSS syntax, and provides an interactive challenge where you can get some more practice with writing CSS declarations.

Now that you have some understanding of what CSS is and how it works, let's move on to giving you some practice with writing CSS yourself and explaining the syntax in more detail.

• Next

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4