A CSS style sheet, by definition, is a description language appearance document. That is, HTML is responsible for the structure of the page, and CSS style sheets are responsible for the entire design. I have compiled information here that will allow you to use the style sheet freely. I won’t write about how necessary it is to know it, because it’s already clear - without it you won’t be able to bring the site to a more or less normal look. If someone is just starting to learn CSS styles, then these materials will be enough to start learning CSS.

1. Basic things

I'll start with the very basics. When I started this site, I wrote little tutorials on learning CSS style sheets. The lessons are well suited both for those who are just starting out and for those who already know something to refresh their knowledge. Everything is presented there in pictures and real examples.

A small digression: When I started studying the topic of website building myself, I learned almost all the HTML tags and they didn’t inspire me much. But after I started studying the CSS style sheet and trying to apply each of the properties - I liked it so much (I wouldn't have created it if I didn't like it). I saw that you can do amazing things just with CSS. This is not a programming language that takes months to learn. The style sheet can be mastered in one (maximum two) weeks.

Of course, you will not study absolutely all the properties and their meanings, and this is not necessary! You only need to know the basics so that you can start applying and using it in your projects. One important nuance is that you need to IMMEDIATELY apply the property that you just learned to real example. Let it be your own website or simple HTML website - no difference. The important thing is that you try to write it yourself and see the result.

I have a lot of examples on my site that use CSS. Together they contain more than 100 lessons! When you know at least the basics, then you can safely change and apply all the examples from the lessons.

My tutorials on the basics of cascading CSS styles

2. CSS and CSS3 cheat sheets

Well, you learned the basics and after a couple of days you forgot everything with “success” and, probably, you think that this is not your thing and everything is complicated. I want to give you a little encouragement right away - I myself don’t know all the CSS properties. But what’s stopping me from watching them on the Internet?

True, for now you will go to Yandex or Google, then you will type the request that you need. And if the search still doesn’t give you what you need. You can spend a lot of time this way and still not find what you were really looking for.

Fortunately, good people They compiled very useful cheat sheets that helped me out more than once. It is enough to figure out where everything is and then finding the necessary properties is not difficult.

CSS and CSS3 cheat sheets

These are simply irreplaceable materials when laying out and developing a website design. The time it takes to get distracted and search the Internet for descriptions of properties is reduced many times over.

True, as you understand, the more you build websites or do design, the less you have to look at this tooltip, since all the necessary properties always remain in memory. But still, it will not be superfluous to have this set of cheat sheets on hand.

It's like at school: even if you don’t use a cheat sheet, your soul is still somehow calmer with it 😆 .

From the author: Hello, dear readers of the webformyself portal. In website development, the design of a web resource is of great importance. This is what the CSS language (cascading style sheets) is responsible for, which we will talk about today. Or rather, about its connection and use. Let's look at some css styles for the site that are used when designing web pages.

Connecting css

Today you can hardly find a web page anywhere that was created purely using the capabilities of html. In fact, the appearance of such sites would be simply terrible, therefore, when the markup of the necessary elements is ready, they immediately need to be designed, and this is done with using css V separate file.

It must be said that in general there are also possibilities for including styles in an html file. For example, they can be defined using the style attribute or the same tag. This is called inline styles. This approach is not welcome today and violates modern standards development.

How to do it right, you ask? To do this you need to create new file with css extension and then connect it to html. This is done very simply using the link tag, which is responsible for connecting external files. This is done like this:

< link rel = "stylesheet" type = "text/css" href = "style.css" >

The tag is single, as you already understood. I’ll tell you a little more about its attributes:

rel = “stylesheet” – in general rel attribute is written to determine the role of the file on the page. In our case, the role is a style sheet, which is what is indicated.

type = “text/css” – the so-called MIME type, which is usually specified to all included files so that the browser interprets them correctly. In modern web browsers, this attribute can be omitted.

href = “style.css” is a standard attribute indicating the address of our external file. IN in this case it is written based on the fact that the file has the name style, the extension css and is located in the same folder as the html document.

As you can see, when connecting css files you will only have to change href attribute, everything else does not need to be changed. You can connect as many style sheets as you like to a page, but no more than 2-4 are considered optimal, because too many requests to the server is also not very good.

Where can I get ready-made CSS styles for the site?

Well, okay, with the connection, I hope everything is more or less clear. But you create empty file, and in order for the effect of adding it to be visible, you need to either write the rules yourself or take them from somewhere.

For example, there are a lot of free HTML templates on the Internet. If you download any of them, there will definitely be a ready-made style sheet inside with the necessary rules for website design. But it will only work correctly for its own html document. The fact is that these two languages ​​are connected using so-called selectors.

The selector is a feature css language, unique to him. What are they needed for? Well, imagine this code:

Header text

Text in paragraph

And how can we, for example, design a paragraph and a heading in CSS? This is why selectors are created to access only those elements that are needed. For example:

p( font-size: 12px; ) .title( font-size: 36px; )

font-size: 12px; Title ( font-size: 36px;

We set the font size for all paragraphs to 12 pixels, and elements with the title class (in our case, h1) received a much larger font size of 36 pixels. Note that in the case of paragraphs, styles apply to all of them, no matter how many there are on the page.

The second selector addressed only one element - with the title class. Of course, we can create other elements with exactly the same class, this is not prohibited, and they will receive the same rule, but if we simply write an h1 tag in the html (without the title class), then no rules will be added for it.

This convenient way allows CSS to select the elements you need and leave those that are not needed alone. What does this have to do with ready-made styles that you can find on the Internet? Everything there is tied to certain classes and identifiers, so you cannot easily connect these tables to any files; they will not work if the required elements do not have the appropriate classes in the html.

For example, in the style sheet we see the following code:

Nav( width: 300px; background: aqua; ... ) .nav a( display: block; color: #ccc; ... )

Nav ( width: 300px;

From this alone we can conclude that somewhere on our html page there should be an element with the nav class, and it should contain links. If this is true, then the design will be applied to them and their appearance will change accordingly. If no such elements are detected, the code will simply be ignored.

Again, you can find a ton on the web. ready-made templates, in which you can see this class relationship, so that if you change something in html, the corresponding operations must be performed in the style sheet.

How to make CSS styles for your website yourself?

Css is not something scary or extremely difficult. This is a common technology created by people to design web pages, and has its own rules. It is enough to understand them, and you too will be able to create the appearance of web resources using this language.

The most important condition for rapid mastery is constant practice, coupled with new knowledge that you will learn for yourself. Ours can give you similar practice.

In addition, you can learn and master the basics of CSS in our premium section. There is one of the courses that is entirely devoted to the basic properties of this language. .

The most important thing is to be determined to study and discard preconceptions that it is very difficult. Free materials on our website, articles and video tutorials can also help you. If you wish, you can also use them to acquire the basic knowledge that is needed when working with CSS.

With this I say goodbye to you. Read our blog webformyself to improve your knowledge in the field of website building.

The style attribute is used to style elements directly in the HTML code. The purpose of the style attribute is to provide simple way changes the appearance of almost any HTML element.

Note: here we are considering the style attribute for forming general idea about using CSS styles for designing web pages. Read more about CSS capabilities you can read the CSS tutorial.

The example code will introduce you to a new way to format a document:

This text is written in red using the Verdana font.

This text was written green using the Times font.

This text is 30 pixels in size.

Try »

Look carefully at the example, using the style attribute we set the CSS style inside HTML elements, this method of setting styles is called inline style. An inline style applies only to the element in which it was defined and to its children (if applied CSS properties are inherited).

Note: you can see whether the value of the applied property is inherited by child elements or not in the CSS reference book on the page with this property.

The background

Text alignment

Align text in HTML document is set using the text-align property, which allows you to align the text to the right or left side, as well as set the text alignment to the width. text-align property works only with block elements, aligning all inline elements within the block element:

Heading

Very small size text.

This text will be right aligned.

When the browser reads the style sheet, it formats the document according to it.

Three Ways to Insert CSS

There are three ways to insert a style sheet:

• External style sheet
• Internal style sheet
• Built-in style

External Style Sheet

An external style sheet is ideal when styles need to be applied to many pages. With an external style sheet, you can change the look of an entire Web site by editing a single file. Each page should link to the style sheet using the tag . Tag located in the head section:

Don't leave spaces between the property value and its units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE ( Internet browser Explorer), but not in Firefox browsers or Opera.

Internal Style Sheet

An internal style sheet is used when an individual document has a unique style. You define internal styles in the head section HTML pages using 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 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 multiple external style sheets and connect them to one web page. If they occur in different tables different meanings properties of one element, then as a result the rule in the style sheet listed below will be applied to the element.