To be able to style an element on a page, a browser has to know three things [Part 2]

4-The Class Selector
Style multiple HTML elements through the class attribute. This is handy when you want to give the same type of formatting to a number of unrelated HTML elements.
.Highlight
{
font-weight: bold;
color: Red;
}
The class attribute can be reused a piece of CSS for many different purposes, regardless of the HTML element that uses the class.

Grouping and Combining Selectors

CSS also enables you to group multiple selectors by separating them with a comma. This is handy if you want to apply the same styles to different elements. The following rule turns all headings in the page to red:
h1, h2, h3, h4, h5, h6
{
color: Red;
}

To be able to style an element on a page, a browser has to know three things:

What element of the page must be styled?

What part of that element must be styled?

How do you want that part of the selected element to look?

The answers to these questions are given by selectors, properties, and values.

Selectors

Used to select or point to one or more specific elements within your page.

The selector answers the first question: What element of the page must be styled?

Types OF CSS Selector:

1-The Universal Selector

Indicated by an asterisk (*), applies to all elements in your page.

The Universal selector can be used to set global settings like a font family.

*

{

font-family: Arial;

}

2-The Type Selector

Point to an HTML element of a specific type.

h1

{

color: Green;

}

This Type selector now applies to all

elements in your code and gives them a green color. Type selectorsare not case sensitive, so you can use both h1 and H1 to refer to the same heading.

3-The ID Selector

Always prefixed by a hash symbol (#) and enables you to refer to a single element in the page. Within an HTML or ASPX page, you can give an element a unique ID using the id attribute.

#IntroText

{

font-style: italic;

}

Because you can reuse this ID across multiple pages in your site (it only has to be unique within a single page)

ID selectors are case sensitive, so make sure that the id attribute and the selector always use the same casing.

How css Fixes HTML Formatting problems

1-It offers a rich set of options to change every little aspect of your web page, including fonts (size, color, family, and so on), colors and background colors, borders around HTML elements, positioning of elements in your page, and much more.

2-CSS is widely understood by all major browsers today, so it’s the language for visual presentation of web pages and very popular among web developers.

3-CSS overcomes the problem of mixed data and presentation by enabling you to define all formatting information in external files. Your ASPX or HTML pages can then reference these files and the browser will apply the correct styles for you.

4- CSS can be placed directly in an HTML or ASPX page, which gives you a chance to add small snippets of CSS exactly where you need them.

5-Because all CSS code can be placed in a separate file, it’s easy to offer the user a choice between different styles — for example, one with a larger font size. You can create a copy of the external style sheet, make the necessary changes, and then offer this alternative style sheet to the user.

6-The decrease in bandwidth that is required for your site. Style sheets don’t change with each request, so a browser saves a local copy of the style sheet the first time it downloads it. From then on, it uses this cached copy instead of requesting it from the server over and over again.

Problems of html Formatting:

1-Limiting the formatting possibilities that your pages require.

You can use tags like , , and <font> to change the appearance of text and use attributes like bgcolor to change the background color of HTML elements. You also have a number of other attributes at your disposal for changing the way links appear in your page.

2-Data and presentation are mixed within the same file

<font face=”Arial” color=”red” size=”+1”> </font>

3- HTML doesn’t allow you to easily switch formatting at runtime in the browser.

Difficult change the formatting at runtime in the user’s browser. There is no way to let your visitor change things like the font size or color.

4-The required formatting tags and attributes make your pages larger and thus slower to load and display. This makes it slower to download and display because the information

Cascading Style Sheets (CSS) language.

CSS is the language for formatting and designing information on the Web.

With CSS you can quickly change the appearance of your web pages, giving them that great look that your design or corporate identity dictates

Why do you need css?

In the early days of the Internet, web pages consisted mostly of text and images. The text was formatted using plain HTML, using tags like to make the text bold, and the <font> tag to change the font family, size, and color.

Web developers realized needs for more power to format their pages, so CSS was created to address some of HTML’s styling shortcomings.