grouping in css

It is for static page, dynamic page, website, SEO, performance and other web development discussion
Joshi jahanvi

grouping in css

Postby Joshi jahanvi » Wed Sep 17, 2014 4:33 pm

What is grouping in css?


Guest

Re: grouping in css

Postby Guest » Tue Sep 23, 2014 6:04 pm

Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).

1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:

Code: Select all

LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}


To reduce the size of style sheets and also save some typing time they can all be grouped in one list.

Code: Select all

LI, P.first, .footnote {font-style: italic}


2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:

Code: Select all

H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}


What is external Style Sheet? How to link?
External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css,

e.g. style.css. <HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>

Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitive. However, font families, URLs to images, and other direct references with the style sheet may be.
The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

It is a good idea to avoid naming classes where the only difference is the case, for example:

div.myclass { ...}
div.myClass { ... }


If the DOCTYPE or XML declaration is ever removed from your pages, even by mistake, the last instance of the style will be used, regardless of case.


Return to “PHP, HTML, MYSQL and Web Hosting”

Who is online

Users browsing this forum: No registered users and 2 guests