We will learn what cascading style sheets are, what CSS style is, and learn how to set it for HTML elements.
For this article you already have clear understanding that Hypertext Markup Language is used to describe the content of a web page. When surfing the Internet, we notice that the pages look different: colors, fonts, different line spacing, background images and even animation. Without putting it in a distant box, I want to immediately explain to you that the way these pages will look, are influenced by the cascading style sheets (Cascading Style Sheets - CSS). As part of the HTML tutorial, we will briefly look at the use of cascading style sheets, you can study them in detail after this course in the CSS tutorial section.
What is style? Style sets appearance any element of the page, i.e. roughly speaking, it is a rule that tells the browser how to format a certain element (for example, change the background or font color).
Every HTML element has default style... Changing the default style in an HTML element can be done using the global style attribute. The attribute specifies built-in (inline) CSS style for the element. Inline CSS is used to apply a unique style to one HTML element... Within the framework of learning HTML we'll only cover using inline CSS.
Hint: This example uses the following colors: white(White), khaki(khaki), gray(grey). Verdana font is used for the text of the poem.
If you have any difficulties in completing the task, then inspect the page code by opening the example in separate window by clicking on the image.
We already know that in order for the website to look nice and stylish, we need to work with a CSS file. And in order for our styles to be applied, it is necessary to connect HTML file and a CSS file.
There are several options for performing this operation: using nested style sheets, external style sheets, and inline style.
Today we will talk about the latter method.
Styling the HTML tag
The essence of this method is that we embed the necessary design inside the tag. For this, a separate attribute - style. This attribute can be applied to any tag, but only within the body of the site, that is within body... The value of this attribute is the style statements that need to be applied to the specified element.
For example, let's set different sizes font for two different paragraphs of text:
< p style= "font-size:25px;" >Give this piece of text a letter height of 25 pixels. < p style= "font-size: 15px; color: # 2400ff;"> And this text will be with letters, height 15 pixels, and also tint it blue to demonstrate the application of several styles at the same time.
Flaws
The example perfectly demonstrates how this kind of styling clogs up the page code.
You can also note a couple more disadvantages of using this styling technique. The first of them can be called the spread of style throughout the document, which in the editing perspective will complicate the process at times.
It will also be difficult to format large volumes of text. I think no one is happy with the prospect of prescribing a font size for each paragraph, especially if there are 40 such paragraphs.
Even when using inline styles, it becomes impossible to use pseudo-classes, which largely ties the hands of a web designer.
It is also worth noting the confusion that will surely surface in the use of the style attribute. This confusion will arise from the use of different quotation marks when writing styles.
For clarity, let's take a look at the example below:
< div style= "font-family:" Roboto Condensed ", sans-serif"> The entry is correct. < div style= "font-family:" Roboto Condensed ", sans-serif"> This is also correct. < div style= "font-family: " Roboto Condensed ", sans-serif" >This is not a valid entry. < div style= "font-family: " Roboto Condensed ", sans-serif" >And that's not true either
Looking at the calculations presented above, the logical conclusion suggests itself that the use of inline styles is associated with a number of significant complications and inconveniences.
When to use inline style
Despite all the flaws, the inline style was not invented for nothing. Webmasters often refer to them for programmatic styling. For example, let's look at this code.
< div id= "productRate" > < div style= "width: 40%" >
Writing the required width for this block will be the simplest operation.
A similar situation can arise when it is necessary to replace the background image (for example) of a user under the administrator role. In this case img tag may not work. Therefore, it is worth referring to the style attribute:
< div style= "background:url(fon.jpg)" >
Also, programmers often turn to inline styles when designing pop-up windows. Often this process takes place as follows: a block, over the design of which work in progress, display: block is written, and the rest of the windows are hidden by display: none, so that they do not visually interfere with the programmer's work. Here's an example:
< div class = "element" style= "display:block" >The popup that is currently being rendered
Outcome
Using inline styles is associated with a number of difficulties and inconveniences, however, in the process of styling some elements, webmasters often turn to this method to optimize their work.
There are four ways to set CSS style for tags Html.
1) Inline style.
2) Introduced style
3) Imported style.
4) Style from file.
And in this article we will go over all four methods.
To begin with, the first way is inline style... This style is specified directly in the tag itself. For instance:
text
V in this case we set the element to " text"will be in size 150% and aligned to center... This is an example inline-style.
The second way is embedded CSS style, that is, the style that is set in the head of the document, in the tag ... For example, like this:
Here the following will happen: for all elements inside the tag
the following will be done: their color will be red and the top margin will be 100 pixels.
Third way of assignment CSS styling- it imported styles... They are also like embedded are set in the head of the document, but already from a file. Here's an example:
Here the styles from the file will be applied to the whole page " my.css".
And the last look CSS styles are the styles from the file. This method is the most common, and it consists in including the style file through the tag in the head of the document. For example, in this way:
This method is very similar to previous way but the tag is not used here
If you write code like this between tags ... , then all first level headings will be blue. With this method, styles are set using tags ... Also tegu , but not the site as a whole.
First level heading
Third level heading centered in the html document
Sixth-level heading, right-aligned on the web page
After that we create new file such content:
H1 (color: blue;)
H3 (color: red;)
H6 (color: green;)
And save it as style with extension * css... See the result. This is our html file with headers. Let us now analyze how this construction works. In an html document with headings, we are between the tags ... wrote the following line:
Here using the tag we are linking stylesheets to the html document. Attribute href refers to the location where the stylesheet is located, this is a required attribute. Attribute type we already know it specifies the type of the stylesheet. Attribute rel indicates the relation of the included file to the given html-document. In our case, the attribute value rel = "stylesheet" indicates that we have added the main style sheet. The advantage of this method of specifying stylesheets is that if you want to change the design of the site as a whole, you only need to change one file with stylesheets.
