CSS (Cascading Style Sheets), or cascading style sheets, are used to describe the appearance of a web document written in markup language. CSS sets style rules that change appearance elements placed on web pages perform fine tuning their details, such as color, font, size, borders, background, and location in the document.

You can embed CSS code directly into a markup element as an attribute value style. This attribute is available for all HTML elements. WITH using CSS You can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each declared property is separated by a semicolon (;).

This is what it looks like for an element

:

Ways to add CSS styles

The CSS standard offers three options for applying a style sheet to a web page:

• External style sheet - defining style sheet rules in a separate .css file, and then including this file in the HTML document using a tag
• Internal Style Sheet - Define style sheet rules using a tag

  Example: Internal Style Sheet

  • Try it yourself "

  Heading

  Text first

  Text two

  Text three

  Heading

  Text first

  Text two

  Text three

  IN in this example we set the background color for the element using CSS : background-color:palegreen, color and font type for headings

  : color:blue; font-family:verdana, as well as font size, color, and center text alignment for paragraphs

  : font-size:20px; color:red; text-align:center.

  Built-in style

  When to format separate element HTML pages, the style description can be placed directly inside the opening tag using the already specialized style attribute. For example:

  Paragraph

  Such styles are called built-in (inline), or embedded. Rules defined directly within an element's opening tag override rules defined in the external CSS file, as well as rules defined within the element

  Heading

  Text first

  Text two

  Text three

  Tasks

  • Center text alignment

    Using the inline paragraph style, center the text.

  Document table of contents
  There are several ways to add styles to a web page, which differ in their capabilities and purpose. The following describes how to include CSS.

  Associated Style Sheet

  When using a linked style sheet, the description of selectors and their properties is located in a separate file, usually with a css extension, and a tag is used to link the document to this file . This tag placed in a container , as shown in example 1.

  Example 1: Connecting a linked style sheet
  

  "http://www.htmlbook.ru/main.css">

  Heading

  Text

  
  Tag parameter values - rel and type remain unchanged, as shown in this example. The href parameter specifies the path to the CSS file; it can be specified either relative or absolute. Note that this way you can connect a style sheet that is located on another site.

  Contents of the mysite.css file connected via the tag shown in example 2.

  Example 2. File with style
  

  H1 ( color: navy ; font-size: 200% ; font-family: Arial, Verdana, sans-serif ; text-align: center ; ) P ( padding-left: 20 px ; )

  
  As you can see from this example, the style file does not store any data other than CSS syntax. In turn, the HTML document contains only a link to the file with the style, i.e. In this way, the principle of separating the content and design of the site is fully realized. Therefore, using a linked style sheet is the most versatile and convenient method of adding style to a site. After all, styles are stored in one file, and in HTML documents only a link to it is indicated.

  Global style sheet

  When using a global style sheet CSS properties are described in the document itself and are usually located in the header of the web page. In terms of its flexibility and capabilities, this method of adding a style is inferior to the previous one, but it also allows you to place all the styles in one place. In this case, right in the body of the document, using a container

  Hello, world!

  
  This example defines a tag style

  , which can then be used throughout a given web page.

  Comment

  The global style sheet can be placed not only inside the container , but also anywhere in the HTML document code.
  Internal styles

  An inline style is essentially an extension to a single tag used on a web page. The style tag parameter is used to define a style, and its attributes are specified using a style sheet language, see Example 4.

  Example 4: Using Internal Styles
  

  Heading

  
  In this example, the tag style

  is specified using the style parameter, which lists style attributes separated by semicolons.

  Comment

  It is recommended to use internal styles on a website only sparingly or not to use them at all. The fact is that adding such styles increases the overall size of files, which leads to increased loading time in the browser, and makes editing documents more difficult for developers.

  All described methods using CSS can be used either independently or in combination with each other. In this case, it is necessary to remember their hierarchy. The internal style is always applied first, then the global style sheet, and last the associated style sheet. Example 5 uses two methods for adding style sheets to a document.

  Example 5. Combination different methods connecting styles
  

  "font-size: 36px; font-family: Times, serif; color: red"> Heading 1

  Heading 2

  
  In this example, the first heading is set to 36px red using an inline style, and the next one is set to green via the global style sheet.

  Import CSS

  You can import the contents of a CSS file into the current style sheet using the @import command. This method can be used in conjunction with a linked or global style sheet, but not with inline styles. General syntax next.

  @import url ("filename") media types;@import "file name" media types;

  After keyword@import specifies the path to style file in one of the two ways given - using url directives or without it. Example 6 shows how you can import a style from external file to the global style sheet.

  Example 6: Importing CSS into a Global Style Sheet
  

  Heading 1

  Heading 2

  
  This example shows the connection of the header.css file, which is located in the style folder.

  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 (browser Internet 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 (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.

  type- MIME data type of the attached file.

  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 it is written this link) 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