Attributes of the style tag. Tips for a webmaster
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 using 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 cheer you up a little - I myself don’t know everyone 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 😆 .
To create the presentation of Web pages, the technology of cascading style sheets (CSS), or simply style sheets, is intended. Table css styles contains a set of rules (styles) that describe the design of the Web page itself and its individual fragments. These rules determine the color of the text and paragraph alignment, indents between graphic image and the text that wraps around it, the presence and parameters of the table’s frame, the background color of the Web page and much more.
Each css style must be associated with a corresponding element of the web page (or the web page itself). After binding, described by the selected style css parameters are beginning to apply to this element. The link can be explicitwhen we ourselves specify which css style is bound to which element of the Web page, or implicit, when the css style is automatically bound to all elements of the Web page created using a specific tag.
Table css styles can be stored directly in the HTML code of the Web page or in separate file. The latter approach is more consistent Web concepts 2.0; As we remember from Chapter 1, it requires that the content and presentation of a Web page be separated. In addition, separate css styles can be placed directly into an HTML tag that creates a Web page element; This approach is now used quite rarely and mainly when experimenting with styles.
CSS style sheets are written in a special language called CSS. The standard describing the first version of this language (CSS 1) appeared back in 1996. CSS 2 is currently widely supported and used, and CSS 3 is in development, a limited subset of which is already supported by many Web browsers.
Just
CSS 3
(more precisely, its subset supported modern programs) we will study.
Creating CSS Styles
Common Definition Format CSS styling Listing 7.1 illustrates.
Here are the basic rules for creating a css style.
A css style definition includes a selector and a list of style attributes with their values.
- Selector used to bind a style to the element of the Web page to which it should apply its effect. In fact, the selector uniquely identifies a given style.
Following the selector, separated by a space, is a list of css style attributes and their values, enclosed in braces.
The style attribute (not to be confused with the tag attribute!) represents one of the parameters of a Web page element: font color, text alignment, indentation amount, frame thickness, etc. The value of the style attribute is indicated after it through the symbol: (colon). In some cases, the css style attribute value is enclosed in quotes.
Couples<атрибут стиля>:<значение>separated from each other by a symbol; (semicolon).
Between the last couple<атрибут стиля>:<значение>and a closing curly brace symbol; do not set, otherwise some Web browsers may not process the style definition correctly.
Definitions various styles separated by spaces or line breaks.
There should be no spaces or newlines inside selectors and style names. As for spaces and newlines placed elsewhere in the style definition, the Web browser ignores them. Therefore, we can format the CSS code to make it easier to read, just as we did with the HTML code.
But the rules are the rules, and most importantly, practice. Let's look at a small style example:
P (color: #0000FF)
Let's look at it piece by piece.
P is a selector. It represents the name of the tag
Color is a style attribute. It sets the text color.
- #0000FF is the value of the color style attribute. It represents the blue color code written in RGB format. (We'll talk more about RGB code and its definition in Chapter 8.)
When the Web browser reads the described style, it will automatically apply it to all paragraphs of the Web page (tags
). This, by the way, is a typical example of implicit style binding.
css style The one we looked at is called the tag override style. The selector here is the name of the HTML tag to be overridden by this style without characters< и >. Selector can be typed in both capital and lowercase letters; the author prefers capital letters.
Let's look at a couple more of these styles.
Here is the tag override style :
EM ( color: #00FF00;
font-weight: bold)
Any text placed in a tag , The Web browser will display it in green bold font. The font-weight style attribute specifies the degree of "boldness" of the font, and its value bold specifies a semi-bold font.
And this is the tag override style
:BODY ( background-color: #000000;
color: #FFFFFF )
It sets for the entire Web page White color text (RGB code #FFFFFF) and black background color (RGB code #000000). The background-color style attribute, as we already understood, sets the background color.
Now let's look at a completely different style:
Redtext (color: #FF0000)
It sets the text color to red (RGB code #FF0000). But the selector is clearly not the name of the tag - the HTML tag
This is a different variety CSS styling- style class. It can be attached to any tag. The selector here is the name of the style class, which uniquely identifies it. The name of the style class must consist of letters of the Latin alphabet, numbers and hyphens, and must begin with a letter. In the definition of a style class, its name is necessarily preceded by a dot symbol - this is a sign that it is a style class that is being defined.
A style class requires an explicit tag binding. This is done using the CLASS attribute, which is supported by almost all tags. The value of this attribute is the name of the desired style class without the dot symbol:
Attention!
Here we have bound the newly created redtext style class to the "Attention!" paragraph. As a result, this paragraph will be typed in red font.
In Listing 7.2, we created an attention style class that sets the font color to red and italic. (The font-style attribute specifies the style of the font, and its italic value makes the font italic.) We then bound it to a tag . As a result, the contents of this tag will be typed in bold, italic red font; the special importance and associated “boldness” of the text is determined by the tag , and the italic style and red color are the attention style class.
As a value CLASS attribute You can specify several style class names at once, separating them with spaces. In this case, the effect of style classes seems to add up. (For more information about the effect of several different styles we'll talk later.)
In the example in Listing 7.3, we bound to the tag two style classes at once: attention and bigtext. As a result, the contents of this tag will be displayed in bold, italic, red font and large size. (The font-size style attribute specifies the font size, and its value large is big size, comparable to the font size used for first-level headings.)
A named style is similar to a style class in many ways. The selector of this style is also a name that uniquely identifies it, and it is also explicitly bound to the tag. And then the differences begin.
In the definition of a named style, a # (hash) symbol is placed in front of its name. It tells the Web browser that it is a named style.
The binding of a named style to a tag is implemented through the ID attribute, which is also supported by almost all tags. The value of this attribute is the name of the desired named style, without the # symbol.
The ID tag attribute value must be unique within the Web page. In other words, only one tag with a given ID attribute value can be present in the HTML code of a Web page. Therefore, named styles are used if a style should be bound to a single element of a Web page.
In the example
#bigtext (font-size: large)
. . .
This large text.
The paragraph "This is large text" will be in large font.
All the types of styles we examined had one selector, with the help of which the binding was performed. However, CSS allows you to create styles with multiple selectors - so-called combined styles. Such styles are used to bind to tags that satisfy several conditions at once. So, we can point out that combined style must be bound to a tag nested within another tag, or to a tag that has a specific style class specified.
Rules that are established by the CSS standard when writing selectors in a combined style.
-Selectors may be tag names, style class names, and named style names.
Selectors are listed from left to right and indicate the nesting level of the corresponding tags, which increases as you move from left to right: tags to the right must be nested within tags to the left.
If a tag name is combined with a style class or named style name, then that style class or named style name must be specified for that tag.
Selectors are separated by spaces.
The style is bound to the tag indicated by the rightmost selector.
Tricky rules, aren't they?.. To understand them, let's look at a few examples.
Let's start with the simplest combined style:
P EM ( color: #0000FF )
Tag names are used as selectors
AND .
Tag comes first
Behind him is a tag . So the tag must be nested in a tag The style will be bound to the tag .
This text will turn blue. But this one won't. This- Same.
Here the words "This text" will be in blue font.
Here is another combined css style:
P.mini ( color: #FF0000;
font-size: smaller)
Tag name
Combined with the style class name mini. This means that this css style will be applied to any tag
For which the style class name mini is specified. (The value of the smaller font-size style attribute specifies a smaller font size.)
Little red text.
And the last example of a combined css style:
P.sel (color: #FF0000)
This style will be applied to the tag , located inside the tag To which the style class sel is bound. This the text will turn red.
IN in this example the word "This" will be highlighted in red.
The CSS standard allows you to define several identical styles at once, listing their selectors separated by commas:
H1, .redtext, P EM (color: #FF0000)
Here we have created three identical styles at once: tag override style
, style class redtext and combined style P EM. They all set the font color to red.
All four types of CSS styles we looked at can only be present in style sheets. If you specify them in the HTML code of a Web page, they will most likely be ignored.
The styles of the last - fifth - variety are indicated directly in the HTML code of the Web page, in the corresponding tag. These are inline styles. In a close-knit family of styles, they stand apart.
They do not have a selector, since they are placed directly in the desired tag. Selector in in this case just not needed.
There are no curly braces because there is no need to separate the list of css style attributes from the selector, which is not there.
An inline css style can only be bound to one tag - the one in which it is located.
The inline css style definition is specified as the value of the STYLE attribute the desired tag, which is supported by almost all tags:
Small
-italics.
We mentioned earlier that in some cases the attribute value css style must be enclosed in quotation marks. But the inline style definition uses apostrophes instead of quotation marks.
Built-in CSS styles are used quite rarely now, because they violate the requirement of the Web 2.0 concept to separate the content and presentation of Web pages. They are mainly used to bind styles to a single element of a Web page (very rarely) and when experimenting with styles.
In Chapter 14 we will look at another variety CSS styles. For now, let's finish with them and start looking at style sheets.
Style sheets can be added to a web page in three ways: different ways, which differ in their capabilities.
Related style sheets
The most powerful and convenient way defining styles and rules for the site. Styles are stored in a separate file that can be used for any web page. To connect a table of related styles, use the tag in the page title (example 1).
Example 1: Connecting a linked style sheet
Hello, world!
The path to the style file can be either relative or absolute, as shown in this example.
Advantages of this method
- One style file is used for any number of web pages; it is also possible to use it on other sites.
- You can change the style sheet without modifying the web pages.
- When you change the style in one single file, the style is automatically applied to all pages where there is a link to it. Undoubtedly convenient. We specify the font size in just one place, and it changes on all hundred or more web pages of our site.
- When the style file is first loaded, it is cached on your local computer, separate from the web pages, so the site loads faster.
Global style sheets
Style is defined in the document itself and is usually located in the head of the web page. In terms of flexibility and capabilities, this method of using a style is inferior to the previous one, but it also allows you to place all styles in one place. In this case, right in the body of the document. The style definition is specified by the tag