Home - Settings - User Settings and configure the display of banners:

You can do it differently if you want other banners to be displayed.

Usernames

Now let's move on: " Users» => « User groups» => « List of groups» choose the desired group and let's start styling.
To do this you need to set a style CSS in paragraph " CSS style for username" We will use styles for the text:

color - nickname color. You can use color values: RGB format- rgb(r, g, b); hexadecimal notation - #RRGGBB; RGBa format- rgba(r, g, b, a); Basic color names: aqua, black, blue, fuchsia, gray......
font-family - font family for nickname (Arial, Georgia, Verdana....) The list of fonts can include one or more names, separated by a comma. If the font name contains spaces, for example Trebuchet MS, it must be enclosed in single or double quotes. When the browser encounters the first font in the list, it checks for its presence on the user's computer. If there is no such font, the next name from the list is taken and also analyzed for presence. Therefore, multiple fonts increases the likelihood that at least one of them will be detected on the client computer.
font-size - nickname font size. You are allowed to use any valid CSS units: em (height of the element's font), ex (height of the x character), points (pt), pixels (px), percentages (%), etc. The font size of the parent element is taken as 100% (or not specified).
font-style - determines the font style of the nickname - normal, italic or oblique (normal, italic, oblique).
font-weight - sets the saturation (boldness) of the font (bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900).
You can also use a text shadow for your nickname:
text-shadow - four parameters are specified: x-shift, y-shift, blur radius and color (1px 1px 2px black). It is allowed to specify several shadow parameters, separating them with a comma (1px 1px 2px black, 0 0 1em red)

Example:
We indicate CSS nickname style:

Color: red; font-weight: bold; font-size: 12px;

Aligns nickname to the center
Style Settings>>Message Elements>>Username
In the "Other" block add

Text-align: center;

What we got

Animated background for username(s)

IN "CSS style for username" add background

Background: url(folder with the image/glitter_001.gif) no-repeat

There are 14 different backgrounds in the archive below.

User titles

"User banner text"we write any, it will not be visible, "" - the name of the class, for example admin, V EXTRA.css set the style:

Admin ( background: url(image folder/admin.gif) no-repeat; display: block; width: 120px; height: 30px; color: rgba(0, 0, 0, 0); margin-left: -5px; )

Let's see what happened

"User banner text"we write the name of the group" Another, using your CSS class name" - class name, for example admin-ribbon, V EXTRA.css set the style:

/* User ranks */ .admin-ribbon, .moder-ribbon, .member-ribbon ( color: #FCE2E3; display: block; font-size: 12px; font-weight: bold; height: 38px; line-height: 38px; margin-left: -12px; text-align: center; 0 0 0 transparent; width: 134px; "styles/default/xenforo/icons/admin_ribbon.png") no-repeat scroll 0 0 transparent; ) .moder-ribbon ( background: url("styles/default/xenforo/icons/moder_ribbon.png") no-repeat scroll 0 0 transparent; ) .member-ribbon ( background: url("styles/default/xenforo/icons/member_ribbon.png") no-repeat scroll 0 0 transparent; ) /* END User ranks */

In the archive below you will find 3 ribbons for the banner.

Custom color for banners:
Go to the group list page: /admin.php?user-groups/ - select the group you need - In the "User banner text:" field, enter the name you need - In the "User banner design:" setting, select the "Other, using your CSS name" option -class:" and in this field we indicate: userBanner my-style- We save this whole thing into a template EXTRA.css add this code:

UserBanner.my-style ( color: white; background-color: green; )

or like this

UserBanner.my-style ( color: white; background-color: green; border-color: green; )

Example of banners using CSS styles.
Let's make banners using only CSS. As already mentioned, for this we use "Another, using your own CSS class name", we set for each group its own class, and in EXTRA.css, specify the styles for these classes:

Admin_style, .lamer_style, .moder_style, .user_style ( background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0)); border-radius: 3px ; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; font-size: 11px; margin: 4px 0 5px; padding: 2px 6px; position: text-align: center; text-shadow: 0 0 0 transparent, 1px 1px black; .admin_style ( background-color: rgba , 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.7); .moder_style ( background-color: rgba(0, 155, 4, 0.5); border: 1px solid rgba(0, 155, 4, 0.7); ) .user_style ( background-color: rgba(0, 51, 155, 0.5); border: 1px solid rgba(0, 51, 155, 0.7); ) .lamer_style ( background-color: rgba(0 , 158, 217, 0.5); border: 1px solid rgba(0, 158, 217, 0.7);

CSS (Cascading Style Sheets), or cascading style sheets, are used to describe appearance document written in markup language. Typically, CSS styles are used to create and change the style of web page elements and user interfaces written in HTML languages and XHTML, but can also be applied to any kind of XML document, including XML, SVG and XUL.

Cascading style sheets describe rules for formatting elements using properties and acceptable values these properties. For each element, you can use a limited set of properties; other properties will not have any effect on it.

A style declaration consists of two parts: the web page element − selector, and formatting commands - ad block. The selector tells the browser which element to format, and in the declaration block (code in curly braces) formatting commands are listed - properties and their values.

Rice. 1. CSS style declaration structure

Types of cascading style sheets and their specifics

1. Types of style sheets

1.1. External style sheet

External style sheet represents text file with the .css extension, which contains a set of CSS styles for elements. The file is created in a code editor, just like an HTML page. The file can only contain styles, without HTML markup. An external style sheet is connected to a web page using a tag , located inside the section . These styles work for all pages of the site.

You can attach multiple style sheets to each web page by adding multiple tags in sequence , indicating the purpose of this style sheet in the media tag attribute. rel="stylesheet" specifies the type of link (link to a style sheet).

The type="text/css" attribute is not required by the HTML5 standard, so it can be omitted. If the attribute is missing, the default value is type="text/css" .

1.2. Internal styles

Internal styles embedded in a section HTML document and are defined inside the tag. Internal styles take precedence over external ones, but are inferior to inline styles (specified via the style attribute).

...

1.3. Built-in styles

When we write inline styles, we write the CSS code into the HTML file, directly inside the element tag using the style attribute:

Pay attention to this text.

Such styles only affect the element for which they are set.

1.4. @import rule

@import rule Allows you to load external style sheets. For the @import directive to work, it must appear in the style sheet (external or internal) before all other rules:

The @import rule is also used to include web fonts:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Types of selectors

Selectors represent the structure of a web page. They help create rules for formatting web page elements. Selectors can be elements, their classes and identifiers, as well as pseudo-classes and pseudo-elements.

2.1. Universal selector

Matches any HTML element. For example, * (margin: 0;) will reset to zero margins for all site elements. The selector can also be used in combination with a pseudo-class or pseudo-element: *:after (CSS styles) , *:checked (CSS styles) .

2.2. Element selector

Element selectors allow you to format all elements of this type on all pages of the site. For example, h1 (font-family: Lobster, cursive;) will set the overall formatting style for all h1 headings.

2.3. Class selector

Class selectors allow you to specify styles for one or more elements with same name class located in different places pages or on different pages site. For example, to create a title with the headline class, you need to add the class attribute with the value headline to the opening tag

and set the style for the specified class. Styles created using a class can be applied to other elements, not necessarily of that type.

Instructions for use personal computer

.headline ( text-transform: uppercase; color: lightblue; )

2.4. ID selector

The ID selector allows you to format one specific element. The id must be unique and can appear only once on one page.

#sidebar ( width: 300px; float: left; )

2.5. Descendant selector

Descendant selectors apply styles to elements within a container element. For example, ul li (text-transform: uppercase;) - will select all li elements that are children of all ul elements.

If you need to format descendants specific element, this element needs to be given a style class:

p.first a (color: green;) — this style will apply to all links that are descendants of a paragraph with class first ;

p .first a (color: green;) - if you add a space, links located inside any .first class tag that is a child of the element will be styled

First a (color: green;) - this style will be applied to any link located inside another element, designated by the class.first .

2.6. Child selector

A child element is a direct child of its containing element. One element can have several child elements, and each element can only have one parent. The child selector allows you to apply styles only if the child element comes immediately after the parent element and there are no other elements between them, that is, the child element is not nested within anything else.
For example, p > strong will select all strong elements that are children of the p element.

2.7. Sister selector

Sisterhood occurs between elements that share a common parent. Sibling selectors allow you to select elements from a group of elements of the same level.

h1 + p - will select all first paragraphs immediately following any tag

without affecting the remaining paragraphs;

h1 ~ p - will select all paragraphs that are sister to any h1 heading and immediately after it.

2.8. Attribute selector

Attribute selectors select elements based on the attribute name or attribute value:

[attribute] - all elements containing the specified attribute - all elements for which the alt attribute is specified;

selector[attribute] - elements of this type containing the specified attribute, img - only images for which the alt attribute is specified;

selector[attribute="value"] - elements of this type containing the specified attribute with a specific value, img - all pictures whose title contains the word flower;

selector[attribute~="value"] - elements partially containing given value, for example, if an element is given several classes separated by a space, p — paragraphs whose class name contains feature ;

selector[attribute|="value"] - elements whose list of attribute values ​​begins with the specified word, p - paragraphs whose class name is feature or begins with feature ;

selector[attribute^="value"] - elements whose attribute value begins with the specified value, a - all links starting with http://;

selector[attribute$="value"] - elements whose attribute value ends with the specified value, img - all images in png format;

selector[attribute*="value"] - elements whose attribute value contains the specified word anywhere, a - all links whose name contains book .

2.9. Pseudo-class selector

Pseudo-classes are classes that are not actually attached to HTML tags. They allow you to apply CSS rules to elements when an event occurs or obeys a specific rule. Pseudo-classes characterize elements with the following properties:

:hover - any element over which the mouse cursor is hovered;

:focus — interactive element, which was accessed using the keyboard or activated using the mouse;

:active - element that was activated by the user;

:valid - form fields whose contents have been checked in the browser for compliance with the specified data type;

:invalid — form fields whose contents do not match the specified data type;

:enabled - all active form fields;

:disabled - blocked form fields, i.e., in an inactive state;

:in-range - form fields whose values ​​are in the specified range;

:out-of-range - form fields whose values ​​are not within the specified range;

:lang() - elements with text in the specified language;

:not(selector) - elements that do not contain the specified selector - class, identifier, name or form field type - :not() ;

:target is an element with the # symbol that is referenced in the document;

:checked — selected (user-selected) form elements.

2.10. Structural pseudo-class selector

Structural pseudo-classes select child elements according to the parameter specified in parentheses:

:nth-child(odd) - odd child elements;

:nth-child(even) - even child elements;

:nth-child(3n) - every third element among children;

:nth-child(3n+2) - selects every third element, starting with the second child (+2) ;

:nth-child(n+2) - selects all elements starting from the second;

:nth-child(3) - selects the third child element;

:nth-last-child() - in the list of child elements, selects the element with specified location, similar to:nth-child() , but starting from the last one, in the opposite direction;

:first-child - allows you to style only the very first child element of the tag;

:last-child - allows you to format the last child element of the tag;

:only-child - selects an element that is the only child element;

:empty - selects elements that have no children;

:root - selects the element that is the root in the document - html element.

2.11. Structural type pseudo-class selector

Indicates a specific type of child tag:

:nth-of-type() - selects elements similar to :nth-child() , but only takes into account the type of the element;

:first-of-type - selects the first child of a given type;

:last-of-type - selects last element of this type;

:nth-last-of-type() - selects an element of the given type in a list of elements according to the specified location, starting from the end;

:only-of-type - selects the only element of the specified type among the child elements of the parent element.

2.12. Pseudo element selector

Pseudo elements are used to add content, which is generated using the content property:

:first-letter - selects the first letter of each paragraph, applies only to block elements;

:first-line - selects the first line of element text, applies only to block elements;

:before - inserts generated content before the element;

:after - adds generated content after the element.

3. Selector combination

To more accurately select elements for formatting, you can use combinations of selectors:

img:nth-of-type(even) - will select all even-numbered images whose alternative text contains the word css .

4. Grouping selectors

The same style can be applied to multiple elements at the same time. To do this, you need to list the required selectors on the left side of the declaration, separated by commas:

H1, h2, p, span ( color: tomato; background: white; )

5. Inheritance and cascade

Inheritance and cascade are two fundamental concepts in CSS that are closely related. Inheritance is where elements inherit properties from their parent (the element containing them). The cascade manifests itself in how different types style sheets are applied to a document, and how conflicting rules override each other.

5.1. Inheritance

Inheritance is the mechanism by which certain properties are transmitted from an ancestor to its descendants. The CSS specification allows for inheritance of properties related to the text content of the page, such as color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space and word- spacing. In many cases, this is convenient because you don't have to set the font size and font family for every element on the web page.

Properties related to block formatting are not inherited. These are background , border , display , float and clear , height and width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align and z-index .

Forced inheritance

By using keyword inherit can force an element to inherit any property value of its parent element. This works even for properties that are not inherited by default.

How CSS styles are set and work

1) Styles can be inherited from the parent element (inherited properties or using the inherit value);

2) Styles located in the style sheet below override styles located in the table above;

3) Styles from different sources can be applied to one element. You can check which styles are applied in the browser developer mode. To do this, click on the element right click mouse and select “View code” (or something similar). The right column will list all properties that are set on this element or inherited from a parent element, along with the style files in which they are specified, and serial number lines of code.

Rice. 2. Developer mode in Google browser Chrome

4) When defining a style, you can use any combination of selectors - an element selector, an element pseudo-class, a class or an element identifier.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Cascade

Cascading is a mechanism that controls the final result in a situation where different CSS rules are applied to the same element. There are three criteria that determine the order in which properties are applied—the!important rule, specificity, and the order in which style sheets are included.

Rule!important

The weight of a rule can be specified using the!important keyword, which is added immediately after the property value, for example, span (font-weight: bold!important;) . The rule must be placed at the end of the declaration before the closing bracket, without a space. Such announcement will take precedence over all other rules. This rule allows you to cancel a property value and set a new one for an element from a group of elements in the case when there is no direct access to the style file.

Specificity

For each rule, the browser calculates selector specificity, and if an element has conflicting property declarations, the rule that has the most specificity is taken into account. The specificity value has four parts: 0, 0, 0, 0. The selector specificity is defined as follows:

for id, 0, 1, 0, 0 is added;
for class 0, 0, 1, 0 is added;
for each element and pseudo-element, 0, 0, 0, 1 is added;
for an inline style added directly to an element - 1, 0, 0, 0 ;
A universal selector has no specificity.

H1 (color: lightblue;) /*specificity 0, 0, 0, 1*/ em (color: silver;) /*specificity 0, 0, 0, 1*/ h1 em (color: gold;) /*specificity: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: blue;) /*specificity: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (color: grey;) /*specificity 0, 0, 1, 0 */ #sidebar (color: orange;) /*specificity 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*specificity: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

As a result, those rules that are more specific will be applied to the element. For example, if an element has two specificities with values ​​0, 0, 0, 2 and 0, 1, 0, 1, then the second rule will win.

Order of connected tables

You can create multiple external style sheets and connect them to one web page. If in different tables If there are different values ​​for the properties of one element, then as a result the rule found in the style sheet in the list below will be applied to the element.

Cascading selectors

Any block on the page must be described by a class selector. Do not use cascading selectors as they violate the principle of component independence. The same rule applies to direct child (>) and neighbor (+) selectors.

Exceptions:

• State selectors ( selected, active, hover).
• Context selectors. There are cases where a component is used on different pages or in different environments. In this case, it is convenient to use context selectors. It is important that these contextual styles are contained in the parent component.
• Layout in which the structure of HTML tags cannot be changed.

Naming classes

• Class names are written in English in lower case. If you are not sure of the spelling of an English word, check it in a dictionary. PHPStorm has a built-in spell checker.
• It is desirable that the terminology in the class name coincide with the names used by the developer (names of fields in the database, names of PHP classes).
• A hyphen (-) is used to separate words in names.
• Make CSS selector names as descriptive and clear as possible. This will help make code development and debugging easier. Feel free to use long titles classes.
• The class name should reflect the essence of the block, not its appearance.
• The first word in the class name should be the name of the module. In second place is the name of the block. The block name can consist of several words. This format, on the one hand, immediately shows the identity of the styles, on the other hand, guarantees their uniqueness. The uniqueness of the styles ensures the independence of the layout of the components.
• Nested elements must preserve the block's naming context. The block does not have to be the direct parent of the element.

  Both naming options are valid:

• Avoid shortcuts. Abbreviations can lead to a situation where the same things are called differently (btn/button).
• Don't use the old bx- prefix.
• If an element is accessed by a class via JavaScript, then such a class must have the js- prefix.
• To layout a website template, it is allowed to omit the module prefix.

Inline styles

Avoid inline styles; all styles should be set in the CSS file by assigning classes to elements. Inline styles are only applicable if they are an integral part of the page content (user avatar, filter slider size, etc.).

Tag selector and attribute selector

Avoid using class names with a tag and attribute selector.

Div.task-detail-title ( margin: 20px; ) input ( margin: 20px; ) Good: .task-detail-title ( margin: 20px; ) .task-detail-user-field ( margin: 20px; )

Short form for writing properties

CSS offers many different shorthand forms (for example, margin, padding, border and others), which are recommended to be used wherever possible, even if only one of the values ​​is specified. Using shorthand property notation is useful for greater efficiency and better understanding of your code.

Meeting-sidebar ( margin-top: 5px; margin-bottom: 3px; border-width: 1px; border-style: solid; border-color: #fff; )

Meeting-sidebar ( margin: 5px 0 3px; border: 1px solid #fff; )

Abbreviated forms for font ( font) and background ( background) can be divided into several properties.

Units of measurement

Use pixel values. Dimensions shown in px, absolute, clear, understandable and do not depend on anything. It is acceptable to use % percentages everywhere except text size ( font-size).

0 and units

Do not specify units for zero values.

Bad: .timeman-task-list ( margin: 0px 12px 0px 13px; ) Good: .timeman-task-list ( margin: 0 12px 0 13px; )

Quotes in links

Don't use quotes with function url(), except when the link contains a space or is generated programmatically (usually when using inline styles).

Bad: .im-user-status ( background: url("images/im-sprite.png"); ) Good: .im-user-status ( background: url(images/im-sprite.png); )

Color

To specify the color of an element, use hexadecimal notation or rgba(), if you want to specify transparency. Do not use rgb() and uppercase in the property value.

Bad: .disk-invitation-popup ( background: #FFFFFF; ) Good: .disk-invitation-popup ( background: #fff; )

Khaki

Avoid hacks in CSS code. If you still need to make unique properties for a specific browser, use special classes .bx-chrome, .bx-firefox, .bx-ie10.

Bad: *+ html .vote-answers ( margin: 5px; ) Good: .bx-ie7 .vote-answers ( margin: 8px; )

Grouping rules

Try to keep selectors that describe a specific layout block in one place and not scattered throughout the CSS file.

Pseudo-selectors (:before, :after)

Pseudo-selectors allow you to avoid cluttering your HTML code unnecessary elements, having a decorative purpose. It is important to understand that these elements are not in the DOM and cannot be accessed through JavaScript.

Resetting styles (CSS Reset)

Do not use CSS Reset in layout. The components are independent blocks. They should not be affected by CSS rules created for the entire page. This breaks the independence of blocks and makes them difficult to reuse. A general style reset is implemented using global CSS rules, which in most cases are written to selectors on a tag, which is undesirable to use in layout. Additionally, resetting styles affects page rendering performance and may conflict with client layouts.

By using CSS selectors we choose which specific elements on the site to style. What does this recording tell us?

H1 ( color: red; ) = selector ( property: value )

Heading h1 assign red color.

In this lesson we will look at the main types CSS selectors:

1. Tag selector
2. Selector-identifier
3. Class selector
4. Attribute selector
5. Universal selector
6. Combination selectors

1.Tag selector

The tag name is written without corner quotes.

H1 ( ..
}

Let's take a look at the tool console for a website developer.

The screenshot clearly shows that for the tag selector h1 a property with a specific value is specified (font-size: 34px;) by font size. Certain property values ​​can be set for any tag on a website. However, the problem is that now all the headers on the site h1 will be 34 pixels in size. If that’s what we intended, then everything is OK, but if not, for example, on another page as planned by the designer, the header h1 should be 40 pixels. Then we move on to the next type CSS selectors.

2.Class selector

This special title h1 40 pixels in size and assign our own class with an arbitrary name, for example: "big".

IN HTML-document:

Heading

We mark on HTML-page only headings 40 pixels in size "big".

In file CSS styles:

Big (font-size: 40px; )

There is always a dot before the class name. .big– class selector. Can be used on the site many times. In case we know for sure that the title h1 40 pixels in size will be in a single copy. Let's move on to next type CSS selectors.

3.Identifier selector

Unlike classes, it is used only once on the site and a hash is placed instead of a dot. # .

IN HTML-document:

Heading

In file CSS styles:

#big (font-size: 40px; )

Just remember that id must be unique for the entire document and cannot be repeated.

Preferably id use for anchors or for scripts. Try to use only classes when coding.

4.Attribute selectors

Attribute selectors are most often used in forms, since form fields contain attributes with different meanings. For example, our form contains two fields with login and password.

IN HTML-document:

Login

Password

In file CSS styles:

/* Set background color#fcf8e3; login field */
input(
background-color: #fcf8e3;
}
/* Set the background color #f2dede; field for entering a password */
input(
background-color: #f2dede;
}

In our form, the login field will be yellow, and the password field will be pink. Attribute selectors are written to square brackets element [attribute].

5.Universal selector

In general, the syntax of a universal selector will be as follows. Its essence is that it applies styles to all elements of the site at once. Previously, it was used to reset all styles for site elements. For example, indentations and margins so that the site initially looks the same in each browser. The layout designer installed a universal selector, reset margins and paddings, this is already an outdated method.

* ( margin: 0;
padding: 0;
}

But now everyone uses it normalize.css from GitHub.

6.Combination selectors

This CSS selectors consisting of several selectors. Let's look at the most common types of combination selectors.

Multiclasses

You can add multiple classes to a tag at the same time. The value of the class in the code below is taken.

IN HTML-document:

Heading

In file CSS styles:

Big1 (font-size: 34px;)
.big2 (font-size: 40px;)

To title h1 the class value will be applied big2, he stands lower.

Nested selector

Specified separated by a space. A very familiar situation is when a word is italicized within a paragraph.

Example this option discharge

P i (
font-style: italic; /* italics */
}

Here

this is the parent tag, and - child tag located in a container

. In this case the style will be applied to the tag .

Child selector

div > span (..)

Tag span is a child and div– a parent. The style value is always applied to the child if it is a direct child and is directly located in the parent's container.

Adjacent selector

Page elements are called adjacent when they come after each other.

B + i ( color: gray; )

It suits you so well grey color, especially combined with pink.

And to learn how to apply your knowledge in practice, I recommend that you familiarize yourself with my course

In this article, we present a set of rules for creating CSS names. They have already been tested in several major projects. This helped us achieve certain successes. The purpose of the instructions is to eliminate the possibility of naming conflicts, simplify debugging, maintenance, and the naming process.

The naming rules given below can hardly be considered optimal for browsers. However, the rules provide a huge benefit and their impact on performance is negligible.

CSS class and file name

Use lowercase letters in the names of all CSS classes and files. To separate words in a name, use the “-” symbol. For example, we could name the classes something like widget-latest-comments and the files post.css.

Organizing CSS Files

Distribute CSS styles into separate files to make it easier for the development team and further system maintenance. CSS files can be named according to the following rules:

• global.css - This file contains global CSS styles that can be reused in different places.
• layout.css - this file contains CSS styles used in layouts.
• ControllerID.css - this file is accessed by the application controller. This means that each controller can have its own style file, which is named by its ID. For example, a PostController might have a CSS file named post.css.
• widget-WidgetClass.css - here, the name WidgetClass means the class of the widget for which it is written separate file CSS styles. For example, the LatestComments widget will access the file widget-latest-comments.css.
• FeatureName.css - great features may have their own CSS files named after the function itself. For example, the Markdown function is likely to use markdown.css.
• Other required CSS files, such as CSS frameworks.

Naming CSS classes

In general, in CSS, we should use classes instead of identifiers to style HTML elements. This is done because the same identifier cannot be used twice on the same XHTML page.

To assign names to classes, we rely on the following rules:

• CSS classes that are designed for sharing, must begin with the prefix g-. For example, we may have classes g-submit-button, g-link-button, the style description of which should be placed in the above-mentioned global.css file. You will end up with syntax like this: .g-link-button ( ... )
• Every file that outputs any record must have a root container that contains the content. It declares a class whose name exactly repeats the path to the file. For example, for a file available at post/index.php, this construction looks like this:
  ...view content here...
• The description of CSS styles must be placed in the CSS file corresponding to the controller. Each style declaration must begin with the name of the root container class. For example, to declare CSS styles for the item class of the root post-index container, we would insert the following entry into the post.css file: /* in post.css file */ .post-index .item ( ... )
• Creating CSS class names and styles for widgets follows exactly the instructions described above. For example, the LatestComments widget should use the root CSS name of the widget-latest-comments class and refer to the widget-latest-comments.css file for comment styles: /* in widget-latest-comment.css file */ .widget-latest-comments . comment(...)

The layout file must also contain a root container with the layout- prefix. For example, the main layout should use the CSS class layout-main as its root container. To avoid conflicts with CSS classes used to style content, container element classes in a layout can begin with the class name of the root container. For example, the header section could use layout-main-header and the content section could use layout-main-content.

Including CSS Files

In developer mode (when YII_DEBUG mode is enabled), each CSS file must be connected to the main layout file.

In production mode, all CSS files must be combined and compressed into one file. The file name must contain the date (for example, styles-201010221550.css).

By doing this, we allow the browser to cache the combined CSS file and thus eliminate the need to download the CSS file every time.

Merge and compress CSS files

Here we introduce strategies to achieve the said goal.

First, we declare all the CSS file names as an array in the application settings.

Secondly, we write console command to combine and compress CSS files. The YUI compressor can be used for these purposes. This command will read the names of the CSS files from the application settings, combine all the contents of the files into one file, and call the YUI compressor to compress the CSS styles. The created file must be named with a timestamp.

Third, modify main file layout by inserting the following code into the head section: ...... params["css.files.compressed"]): ?> params["css.files.compressed"]; ?>" /> params["css.files"] as $css): ?> " />
We assume that the CSS files are listed in the css.files application setting. And if files are merged and compressed, then the file name must ultimately be included in the css.files.compressed application setting. The console command must make changes to the application's configuration file to update the css.files.compressed setting after the combined and compressed CSS file is created.

Instructions for naming jQuery selectors

We can use the rules for creating CSS names for JQuery selectors in the application's JavaScript code. In particular, when selecting one or more elements using JQuery selectors, we must follow similar rules for declaring CSS styles. For example, if we want to attach "click" handlers to all hyperlinks within news blocks, then we would use the following JQuery selectors: $(".news-index .item a").click(function())( ... )) ;
That is, the selector must begin with the name of the root container of the CSS class (in this case, news-index).