Adding CSS. What is CSS, what are CSS styles for? Own css styles

We already know that in order for the website to look beautiful and stylish, we need to work with the CSS file. And for our styles to be applied we need to combine 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.

Injecting style into an HTML tag

The essence this method thing is necessary registration we embed inside the tag. 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 operators of those styles that need to be applied to a given element.

For example, let's set different font sizes for two different paragraphs of text:

< p style= "font-size:25px;" >Set this piece of text to a letter height of 25 pixels. < p style= "font-size:15px; color:#2400ff;"> And this text will have letters, 15 pixels high, and we will also tint it blue to demonstrate the use of several styles at the same time.

Flaws

The example perfectly demonstrates how such styling clogs the page code.

You can also note a couple more disadvantages of using this stylization technique. The first of them is the spread of style throughout the document, which in the future of editing will complicate the process significantly.

It will also be difficult to format large amounts of text. I think no one is happy with the prospect of specifying a font size for each paragraph, especially if there are 40 such paragraphs.

Even when using built-in styles, it becomes impossible to use pseudo-classes, which largely ties the hands of the web designer.

It is also worth noting the confusion that is sure to emerge in the use of the style attribute. This confusion will arise due to the use of different quotes when entering styles.

For clarity, let's 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"> That's also correct. < div style= "font-family: " Roboto Condensed ", sans-serif" >This is not a correct entry. < div style= "font-family: " Roboto Condensed ", sans-serif" >And this is also not true

Looking at the calculations provided above, the logical conclusion suggests itself that the use of built-in styles is associated with a number of significant complications and inconveniences.

When to Use Inline Style

Despite all the shortcomings, the built-in style was not invented in vain. Webmasters often turn to them in case of programmatic style assignment. For example, let's look at this code

< div id= "productRate" > < div style= "width: 40%" >

Recording the required width for this block will be a simple operation.

A similar situation may arise if it is necessary to replace the background image (for example) of a user with the administrator role. In this case, the img tag may not be suitable. Therefore, it is worth referring to the style attribute:

< div style= "background:url(fon.jpg)" >

Also, programmers often turn to built-in styles when creating pop-up windows. Often this process goes like this: the block whose design is being worked on is assigned display:block, and the remaining windows are hidden using display:none so that they do not visually interfere with the programmer’s work. Here's an example:

< div class = "element" style= "display:block" >A pop-up window that is designed as this moment

Bottom line

Using built-in styles is associated with a number of difficulties and inconveniences, however, in the process of designing certain elements, webmasters often turn to this method to optimize their work.

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 this case the 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 purchase the best elephants at competitive prices!!

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 the necessary pages of our site to draw 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 official 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 - A file in XML format to describe the news feed.

type- MIME data type of the attached file.

Since we connect as external file cascading style sheet, then 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

On this site you will find any information about elephants.

Menu:

Buy an elephant

With us you can purchase the best elephants at competitive prices!!

Menu:

Rent an elephant

Only here you can rent any elephants!!

In the example above, "site about elephants", there are currently three pages, each 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
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  External CSS

  An external style sheet is used to define the style for many HTML pages.

  With an external style sheet, you can change the look of your entire website with just one file change!

  To use an external style sheet, add a link to it in the section HTML pages:

  Example

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  An external style sheet can be written in any text editor. The file must not contain HTML code and must be saved with the extension . CSS.

  This is what "styles.css" looks like:

  body(
  background-color: powderblue;
  }
  h1 (
  color: blue;
  }
  p(
  color:red;
  }

  CSS fonts

  The CSS color property specifies the text color to use.

  The CSS font-family property specifies the font to use.

  The CSS font-size property determines the size of the text that will be used.

  Example

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Border CSS

  The CSS border property defines the border around an HTML element:

  Example

  p(
  }
  

  CSS padding

  The CSS padding property defines the padding (space) between text and border:

  Example

  p(
  border: 1px solid powderblue;
  padding: 30px;
  }

  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 development standards.

  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, the 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 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, only the href attribute will change; 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 are creating an empty file, and in order for the effect of adding it to be visible, you either need to 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.

  A selector is a feature of the CSS language that is unique to it. 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 just write in html tag h1 (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.

  > Basic css styles for creating a website As a rule, display styles for containers and their contents are written in a style sheet, which is usually called stile.css, although it can be called anything you like. The main thing is that on the page in the tag was the correct path to the style sheet

  To set a style for a container on a page, you can give it a class. For example, a container

  you can assign a style called chapka_saita, then a class is assigned to the container on the page

  content

  . The style sheet specifies the styles for chapka_saita. The name in the stile.css table begins with a dot.

  Chapka_saita (in curly braces indicate styles)

  You can also specify the style for a container directly if it is not assigned a class. For example, style for a container

  content

  starts with the name of the container

  Header (we indicate styles in curly braces)

  You can also specify styles for containers using an identifier, then it looks like this

  content

  , in the style sheet the identifier starts with a hash symbol

  #blok1 (we indicate styles in curly braces)

  If you need to specify the styles of headings in containers, links, images, then it looks like this.

  Chapka_saita (main container style in curly braces)
  .chapka_saita h1, h2 (style for headings in tags

  And

  for this container)
  .chapka_saita a (style for links in this in this container)
  .chapka_saita a:hover ( styles for links on mouse over )
  .chapka_saita img (styles for images in this container)
  The styles themselves are written in these curly braces and separated by semicolons;

  Font-family: Arial; specifies the container font, usually used in a tag , in which all the contents of the page

  Line-height: 1.2; sets the line height for the font

  Indentations

  padding: 10px; sets the internal indent of the content from the border of the container, in this case the indent is 10 pixels, you can specify the value as a percentage, or in em
  margin: 5px; sets the outer margins of the container,
  margin: 10px 5px 0px 15px; Indents can be specified separately for each side
  margin-bottom: 10px; You can specify an indent on only one side, in this case the indent from the bottom is 10 pixels. The same can be applied to internal padding.

  Below is an example of styles for the tag

  Body ( margin-left: auto; margin-right: auto; width: 930px; font-size: 12px; font-family: Arial; line-height: 1.2; background-image: url(images/fon.jpg); )

  Text styles

  font-size: 12px; specifies the font size, can be specified in pixels, percentages, or ems
  color: #0000ff; specifies the font color, in this case #0000ff blue, you can specify a word, for example color: green; that is, the color is green.
  text-decoration: none; removes underscore, used for links to remove underscore
  text-transform:uppercase; makes all letters of the text capitalized; instead of uppercase, you can write other meanings and, conversely, make an upper or lower underline or strikethrough.
  font-weight:bold; makes the font bold; other values ​​can be used instead of bold
  text-align:left; sets the text alignment, in this case left, to the left side of the container, you can set the value conter, hight.
  text-shadow: 1px 2px 1px 0px #000000; color: #f9f5ed; shadow for text

  Container Styles

  background-color: #DCDCDC; assigns a background color to the container, in this case #DCDCDC gray
  background-image: url(images/fon.jpg); sets the background image

  Border: 1px solid #E8E8E8; will assign a border, the phrase solid means a solid border, #E8E8E8 is the color of the border. You can specify a separate border for each side, for example border-top: 2px solid #E8E8E8;
  border-radius: 10px; rounding the corners of the container, you can set a different rounding at each corner border-radius: 2px 6px 10px 0px;
  box-shadow: #2C2C29 10px 10px 10px; shade for containers

  Width:926px; indicates the width of the container
  height: 240px; container height

  float:left; presses the container to the left side, by default the containers are in order, and if you want to line up several blocks, then they need to set the property float:left; and width height: px; so that they fit the width of the parent container.
  float:right; the same thing, but the containers are pressed against the right side.
  If you want to make a container in the middle, then specify the width and the margins are avto , example: margin-left: auto; margin-right: auto; width: 150px;