In this chapter we will talk about how to implement CSS into an HTML document, that is, link the style description of an element directly to the element itself, some HTML tag.
Implement this task possible in three ways:
- Write a style description directly in the element itself. This method is good only if there is only one such element in HTML document e which needs a separate style description.
- Write a style description for all identical elements of the HTML document. This method is justified if the style of the page is fundamentally different from the overall design of the site (a group of interconnected pages).
- Extract the style description of HTML elements into a separate CSS file. This will allow you to manage the design of the entire site, each page of the site in which a reference to a CSS file is indicated. This method is the most effective use of a cascading style sheet.
Let's take a closer look at each option, and at the same time get acquainted with the rules of CSS writing syntax.
The style attribute.
Almost every HTML tag has an attribute style, which indicates that a certain style description is applied to this tag.
It is written like this:
style="">
Everything that will be written between the attribute quotes style and will be a style description for this element, in in this case element
Well, for example:
style="color: #ff0000; font-size:12px"> this is a paragraph with a personal style
In this case, we specified that this paragraph should be displayed in red and have a font size of 12 pixels. In subsequent chapters I will talk in detail about what is written in quotes, but now we are talking about how to apply CSS to any HTML tag.
Using the same principle, you can specify an individual style for almost every HTML element.
style="background-color: #c5ffa0">
style="color: #0000ff; font-size:18px">All about elephants
Buy an elephant
style="color: #ff0000; font-size:14px">
style="color: #0000ff; font-size:16px">Rent an elephant
style="color: #ff0000; font-size:14px">
But once again, this method of introducing CSS is good only if you need to set a certain style for a small number of HTML elements.
Tag (not to be confused with the attribute of the same name) in which the elements we need are described.
Take a look at the example, there will be comments below.
All about elephants
On this site you will find any information about elephants.
Buy an elephant
With us you can favorable prices buy the best elephants!!
Rent an elephant
Only here you can rent any elephants!!
As can be seen from the example, we achieved exactly the same result as in the first case, only now we do not assign a style to each element individually, but placed it in the “head” of the document, thereby indicating that all headings ,
- the paragraphs will be blue
- red. Imagine how much easier our work would be if there were a hundred such paragraphs and about fifteen headings on a page, and the document itself would weigh less by “removing” all repeating style descriptions for each individual element.
Now the promised comments:
Tag the styles of certain HTML elements are directly declared according to the following syntax:
If several properties of an element are specified in a style declaration block, they are separated by a semicolon.
CSS in a separate external file.
How long does it take to short, we come to the main, in my opinion, advantage of CSS, namely the ability to put all information related to the design of the site into a separate external file.
So, open notepad (or another editor) and write the following text in it:
Body (background-color: #c5ffa0)
a (color:#000060; font-weight: bold;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (color: #0000ff; font-size:18px)
h2 (color: #ff00ff; font-size:16px)
p (color: #600000; font-size:14px)
I will try to tell you in detail about what we wrote about this strange thing in the subsequent chapters of this textbook.
All! The style description file has been created! Now all that remains is just a little bit, namely to force required pages our website to obtain information from this file.
This is done using the tag (connection). Tag multi-purpose and serves to “link” an HTML document with additional external files that ensure its proper operation. Tag is a kind of link, only intended not for users, but for browser programs (browsers). Because carries exclusively service information; it is located in the head of the HTML document between the tags and is not displayed on the screen by browsers.
Tag has attributes:
href- The path to the file.rel- Defines the relationship between the current document and the file being referenced.
- shortcut icon - Specifies that the included file is a .
- stylesheet- Specifies that the included file contains a style sheet.
- application/rss+xml - File in XML format to describe the news feed.
Since we include a cascading style sheet as an external file, our service link takes the following form:
I repeat, to certainly dispel possible misunderstandings. Attribute rel assign a value stylesheet Since we are connecting a cascading style sheet as an external file, we indicate the path to the css file (in this example the file is called mystyle.css and lies next to the HTML document in which this link is written) we also indicate that this file text and contains a style description type="text/css"
Now we insert this line into the page headers of our site and enjoy the result..
mystyle.css file
body (background-color: #c5ffa0)
a (color:#000060; font-weight: bold;)
a:hover (color:#ff0000; font-weight: bold; text-decoration:none)
h1 (color: #0000ff; font-size:18px)
h2 (color: #ff00ff; font-size:16px)
p (color: #600000; font-size:14px)
index.html file
Menu:
All about elephants.
Buy an elephant.
Rent an elephant.
All about elephants
On this site you will find any information about elephants.
File elephant.html
Menu:
All about elephants.
Buy an elephant.
Rent an elephant.
Buy an elephant
With us you can purchase the best elephants at competitive prices!!
File elephant1.html
Menu:
All about elephants.
Buy an elephant.
Rent an elephant.
Rent an elephant
Only here you can rent any elephants!!
In the example above, "site about elephants", on this moment, there are three pages, each of which is associated with one single external css file - mystyle.css. Thus, we significantly “unloaded” it and made the design of the entire site “mobile-friendly”. Imagine how many kilobytes we would win if this site had a hundred full-fledged pages!? And also, how much time would we save if we needed to change anything in its design!?
In this chapter, we looked at three ways to embed CSS in an HTML document. Which one is better to use?
- Use attribute style for any element, if this element with a different style from other elements is the only one on the entire site.
- Use 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 set styles for one or more elements with the same class name, placed in different places on the page or on different pages of the 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.
.headline ( text-transform: uppercase; color: lightblue; )If an element has multiple class attributes, their values are concatenated with spaces.
Instructions for using a personal computer
2.4. ID selector
The ID selector allows you to format one specific element. The id value must be unique, can appear only once on a single page, and must contain at least one character. The value must not contain spaces.
There are no other restrictions on what form id can take; in particular, identifiers can be all numbers, start with a number, start with an underscore, only have punctuation marks, etc.
An element's unique ID can be used for a variety of purposes, including as a way to refer to specific parts of a document using fragment IDs, as a way to target an element when scripting, and as a way to style a specific element from CSS.
#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, but each element can have only one parent element. 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 a 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 - an interactive element that was navigated to 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 the specified location, similar to :nth-child() , but starting from the last, 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. The CSS specification allows for inheritance of properties related to the text content of the page, such as color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space and word- spacing. In many cases, this is convenient because you don't have to set the font size and font family for every element on the web page.
Properties related to block formatting are not inherited. These are background , border , display , float and clear , height and width , margin , min-max-height and -width , outline , overflow , padding , position , text-decoration , vertical-align and z-index .
Forced inheritance
By using keyword inherit can force an element to inherit any property value of its parent element. This works even for properties that are not inherited by default.
How CSS styles are set and work
1) Styles can be inherited from the parent element (inherited properties or using the inherit value);
2) Styles located in the style sheet below override styles located in the table above;
3) Styles from different sources can be applied to one element. You can check which styles are applied in the browser developer mode. To do this, click on the element right click mouse and select “View code” (or something similar). The right column will list all 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 a mechanism that controls the final result in a situation where different CSS rules are applied to the same element. There are three criteria that determine the order in which properties are applied—the!important rule, specificity, and the order in which style sheets are included.
Rule!important
The weight of a rule can be specified using the!important keyword, which is added immediately after the property value, for example, span (font-weight: bold!important;) . The rule must be placed at the end of the declaration before the closing bracket, without a space. Such announcement will take precedence over all other rules. This rule allows you to cancel a property value and set a new one for an element from a group of elements in the case 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 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.
There are several ways to add styles to a web page, which differ in their capabilities and purpose. Let's look at them in more detail next.
External style sheet
Styles are located in a separate file with the css extension; the element is used to link the HTML document with the CSS file . It is located inside
, as shown in example 1.Example 1. Connecting external styles
Styles Heading
The value of the rel attribute there will always be a stylesheet and remains unchanged. The href value is the path to the CSS file; the path can be specified either relative or absolute. Note that this way you can connect a style sheet that is located on another site. In the example above, we connect the Cyrillic font Lobster from the Google Fonts website.
The contents of the style.css file are shown in Example 2.
Example 2: Contents of the style.css file
H1 (font-family: "Lobster", cursive; color: green; )
As you can see from this example, the style file is normal text file and contains only CSS syntax. In turn, the HTML document contains only a pointer to the file with the style; in this way, the principle of separation of code and site design is fully implemented. Therefore, using an external style sheet is the most versatile and convenient method of adding style to a site. This allows you to edit HTML and CSS files independently.
Internal style sheet
Styles are written in the HTML document itself, inside the element.
Heading