CSS styling rules. Structural pseudo-class selector

1. What are CSS Cascading Style Sheets?

So, what are cascading style sheets css?

css(English) Cascading Style Sheets - cascading style sheets) - description language appearance document written using markup language. To make it easier for a beginner to understand, cascading style sheets css are designed to create beautiful, easy-to-edit designs for html website pages.

Cascading style sheets were first used in the 90s of the last century. But at first they were not as popular as they are now, because different browsers perceived and displayed html pages that used css differently.

After some time, to simplify the work of site builders, browsers began to be “adapted” to the same standards. Today, almost all programs used to view Internet pages equally reproduce sites that use CSS cascading style sheets.

My observations!!! According to my personal observations, such latest versions browsers like Opera, Mazilla ForeFox, Maxthon, Google Chrome and Internet Explorer show pages that use cascading style sheets almost identically, but if the browsers do not last generations, then the website pages themselves will look different. And in order for your site to look the same in almost all browsers, there are special technologies for specifying cascading style sheets.

So let's start creating a new style sheet and attach it to our document.

2. How to create a cascading css style sheet?

In this part of the article we will create and connect a cascading style sheet to the simplest html page.

So, let's do this:

1. We create a folder that will contain our html page and cascading style sheet. Let my folder be called "css"

2. We create a simple html page (index.html). You can read how this is done here.

3. Now we create a simple text document (similar to creating html pages), just call it style.css.

As a result, you should get this:

That's it, the file that will contain the css styles is ready.

Now let's connect the created style sheet to the index.html file.

3. How to connect a cascading style sheet css?

So, in order to connect a style sheet to an html page, you need to in the index.html file in the tag add tag:

Here in the attribute href="style.css" the path to the file with css styles is specified. In this case, the css and index.html file are in the same folder.

For example, if our index.html file had the following code:

Important!!! By the way, do not forget to set the encoding to 1251 (ANSI-Cyrillic) when saving the index.html file in Notepad. Because if you don’t do this and save the file in a different encoding, the browser will show you “doodles” instead of texts.

If everything is done and saved correctly, then in the browser you will see the following:

That's all, the index.html file has been created, and css style sheets have also been connected to it.

Now let's check the working of css style sheets.

So, let's start with the simplest thing and set the tag a new style, which defines the background image of the html page, the background color of the page (if images are disabled in the browser of the page visitor), top and bottom margins, default font, its size and color.

In order to set a background image, you need to mark it in the folder with our files.

Download the bg.zip archive, unzip it and place the bg.jpg file in the folder css. You should have it like this:

Now to set the style for the tag html document, in the style sheet you need to write the following:

body (...) - setting css styles for the tag

background-image:url(bg.jpg); - background image, where the url(...jpg) parameter specifies the full path to the image that will be the background

background-color:#f6f6f6; - document body background (tag ). This attribute is enabled if the visitor's browser has images disabled

margin-top:0px; - the distance from the body of the document to the top of the browser. In this case, Cascading Style Sheets css set the spacing to 0 px.

margin-bottom:0px; - the distance from the body of the document to the bottom of the browser. In this case cascading css stylesheets set the spacing to 0px

font-family:Verdana; - setting the default font for a document

font-size:12px; - document font size 12 pixels

color:#000000; - text color. In this case, the css style sheets set the font color to dark blue.

After you save the style.css file, you will see the following in your browser:

Cascading Style Sheets, or CSS for Beginners (a workshop on "correct" HTML)

The Russian part of the Internet is growing day by day. Over the past year or two, the total volume of Russian-language pages has more than doubled. Today in Russia you will no longer surprise anyone with the phrase<домашняя страничка>or an English word . If earlier the creation of web pages was the lot of a select few and only the recognized reigned in the vastness of the Runet<киты>web design, now even my ten-year-old son, in his free time from school, is quietly creating his own page, intending to place it on some free server (like narod.ru or boom.ru), which Last year There are also a lot of them on the RuNet. People who aren’t involved in web design today are probably just those who are not connected to the Internet or are lazy. Many people, having wandered around the Internet, sooner or later think about creating their own page. It is for them that this article was written.

We'll talk here about<правильном>HTML for beginners, namely, about some additional features officially approved by the Internet Consortium (http://www.w3.org/). In particular, about some of the capabilities provided by dynamic HTML (DHTML). And even more precisely - about how to use CSS (cascade style sheets, or cascading style sheets) to make a page that will look better than pages created using<классического>HTML, while taking up less space and, accordingly, loading faster.

Few people who decide to create their own web presence for the first time arm themselves with Notepad or another text editor like HomeSite. Usually a beginner thinks like this:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - I create texts in MS Word, presentations in MS PowerPoint, so I’ll take a similar program to create a web page - MS FrontPage...> Having made such a decision, the newly minted web sculptor robs himself twice.

The first time - in the sense of rational use of web space. The fact is that all visual editors of web pages, which include the mentioned MS FrontPage, insert into created pages <отсебятину>- a lot of extra unnecessary tags. The exception, perhaps, is Macromedia Dreamweaver (for which it has gained well-deserved popularity among both beginners and professionals). But even he is not ideal in this regard - he likes to litter original text quotes (in most cases completely unnecessary), as well as insert non-breaking space characters in the most inappropriate places. In fairness, it is worth noting that all visual editors provide the user with the opportunity to work with the source code of the page being created, but FrontPage, so beloved by many, will again redo everything in its own way, as soon as you switch back to visual mode.

It follows from this that for the second time a beginner robs himself precisely in terms of flexibility and complete control over the created page content - visual editors do not provide the same freedom of creativity that working directly with the source code of the page being created will give you.

Well, now let's get straight to the point - creating beautiful and small web pages using cascading style sheets (in further text I will use their abbreviated name - CSS). It is assumed that you, dear readers, having read the introduction, agreed with me, abandoned visual editors, got a book on HTML, studied at least a small number of basic tags and attributes and are eager to know what CSS is and what it is used with.

Logical and physical formatting

Classic HTML version 3.2, most common on this moment on the Web, provides us with a means of physically formatting documents, for which there are special tags (for example, tags , , ) and many different attributes (size, color, height, width, etc.). Features of web formatting force us to write these tags and attributes again and again for each new paragraph, which, of course, greatly increases the size of the page code. In addition, with this formatting method, in the case of analyzing the structure of the document, it remains unclear why this word is highlighted in bold- just for beauty or to attract special attention from the end user? If a living person is still able to at least understand the logical construction of pages in classic HTML, then this cannot be said about search engines or, for example, voice browsers. Take them out and put pure logic in the structure of the page. It is precisely because of this<неподвластности>To logical analysis, this formatting method was called physical formatting. In contrast, when creating the new HTML 4.0 specification, logical formatting was put at the forefront, that is, formatting in which the structure and design of the document would be clearly separated. This formatting method is recommended for use by the Internet consortium, as it provides expanded capabilities for searching information on the Internet, allows you to more accurately structure and analyze information using search engines, and also significantly reduces the size of pages and the time they take to fully load. The separation of document structure and design is realized using CSS.

It is worth noting the fact that the beginnings of logical formatting were also present in classic HTML tags

,

,

, of course, contributed to the division of documents into some logical blocks. But many page authors used, and to this day continue to use, these tags for other purposes: due to the scarcity of resources for page design, heading tags, for example, were used to highlight elements on the page that were not actually headings. CSS, on the other hand, provides enough styling tools to allow you to more closely follow logical formatting rules and truly separate the structure of the page from its visual presentation.

Assigning styles to individual page elements

CSS allows you to assign your own visual style to any HTML tag, including the . If the style is set for the tag , it is inherited by all elements (paragraphs, headings, etc.) placed inside this container tag, in case there are no custom styles for these elements. Thus, we no longer need to write tags and attributes color, size, etc. for each paragraph on the page - just set a certain style for the tag , and all paragraphs on the page will be displayed according to this style. How to do this?

Let's say we want all paragraphs to be displayed in 12-point Times New Roman font in dark green. To do this, you need to specify the style attribute of the tag , assigning it the appropriate value. The syntax is:

12pt; color: darkgreen;">

Thus, all paragraphs on the page are displayed the way we wanted, and the code is not clogged with tags and their attributes. Imagine the file size savings if your page consists of a lot of text!

Please note that when we specified the font style, after the name Times New Roman we specified the serif style, which means any font with serifs. If the end user's machine does not have the Times New Roman font installed, the browser will substitute any of the available serif fonts, and the page display will be as close as possible to what you intended. Moreover, the given example will be understandable for both IE (4.0 and higher) and NN (4.0 and higher). Although we must immediately make a reservation that Netscape Navigator does not support all the features provided by CSS and DHTML, and this, of course, does not increase the number of its fans.

The example above uses embedding the style directly into the document tag - the so-called inline style. This method of linking CSS to an HTML file is recommended in isolated cases - if this style is planned to be applied to only one element on only one page of the site. If the style must be applied to several elements on the same page or to several pages at once, other methods of linking CSS and HTML are recommended, which we will discuss next.

Assigning styles to multiple elements on the same page - creating an embedded style sheet

So far we have been talking about setting only one style for one element. Now we will learn how to create style sheets.

Let's say we want all the paragraphs on the page to look like the previous example, with all first-level headings in green 16-point bold Arial, and all second-level headings in 14-point Helvetica bold italic yellow-green. . To do this we need to create in<голове>pages (anywhere between tags And) an embedded style sheet in which we will write several rules at once. To do this, create a style sheet container tag starting with an opening tag. Inside this container tag, we are free to define any number of CSS rules, consisting of a selector (the name of the HTML tag to which the rule will be applied) and its definition (directly a set of formatters), enclosed in curly braces. The syntax for the above example is:

font-size: 12pt;

color: darkgreen;

font-size: 16pt;

font-weight: bold;

font-family: Arial, sans-serif;

font-size: 14pt;

color: greenyellow;

font-weight: bold;

font-style: italic;

This way of linking CSS and HTML is called embedding. It is recommended to use it in cases where you decide to set a certain set of formatting rules for only one page of the site, and according to your plan, all other pages should look different.

Assigning styles to several site pages simultaneously

In addition to inlining and embedding, style sheet importing and linking are used to link CSS and HTML. These are, of course, the best ways to give a consistent look and feel to multiple (or even all) pages of the same site. In this case, the entire style sheet is stored in one file (the file extension must be standard - .css).

Here is an example of the contents of such a file (for example, my.css):

font-family: "Times New Roman", serif;

font-size: 12pt;

color: darkgreen;

font-family: Arial, sans-serif;

font-size: 16pt;

font-weight: bold;

font-family: Arial, sans-serif;

font-size: 14pt;

color: greenyellow;

font-weight: bold;

font-style: italic;

Please note: tags no style sheets are used inside the file - the .css extension clearly indicates to the browser that the file is a style sheet. One such file can be linked to several pages at once (or imported into several pages at once). In the html file for linking you need to write anywhere between the tags And the following line:

This line indicates that the file being linked is a style sheet (rel="stylesheet"), the format of this file is .css (type="text/css") and it is located in the same directory as the html file, or has a different URL (href="my.css"). Obviously, we can write this line in any (or all) of our html files. Thus, a single style design will be prescribed for several pages at once.

Please note that inline styles (styles specified for individual page elements using the style attribute) and embedded styles (styles specified in<голове>pages inside a container 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 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 the 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 the same class name, placed in different places on the page 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 using a 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 want to format the descendants of a particular element, you need to give that element a style class:

p.first a (color: green;) — this style will apply to all links descendant 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 several classes are specified for an element 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

Point to specific type 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 the 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 its child elements 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 one element can be applied different sources. 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 the properties that are set on this element or inherited from a parent element, along with the style files in which they are specified, and the ordinal number of the line 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 the mechanism that controls end result in a situation where different CSS rules are applied to one 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 where 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 will meet different meanings properties of one element, then as a result the rule in the style sheet listed below will be applied to the element.

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» => « Group of users» => « List of groups» choose the desired group and let's start styling.
To do this you need to set a style CSS in point " CSS style for username" We will use styles for the text:

Code snippet - 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, such as 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).
for all paragraphs of the current page! - 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 his CSS name-class" - 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);