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 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 class attribute with the value headline in 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 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 be applied to all links descendants of the paragraph with the first class;

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. 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

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 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 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. CSS Specification Inheritance of properties related to the text content of the page is provided, 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 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 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 several external tables styles and connect them to one web page. If different property values ​​for one element are found in different tables, then as a result, the rule found 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:

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 own 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; margin-right: -12px; text-align: center; text-shadow: 0 0 0 transparent, 0 0 2px black; width: 134px; ) .admin-ribbon ( background: url( "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; display: block; font-size: 11px; margin: 4px 0 5px; padding: 2px 6px; position: relative; text-align: center; color: white; text-shadow: 0 0 0 transparent, 1px 1px 1px black; width: 98px; ) .admin_style ( background-color: rgba(255, 0 , 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); )

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 the color red.

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 the 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 colored yellow, and the password field is 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 - a child tag located in the 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