Decorating html tags with the style attribute (inline CSS styles). Adding styles to a web page How to describe the style of an html page

CSS (Cascading Style Sheets), or Cascading Style Sheets, are used to describe the appearance of a web document written in a markup language. CSS establishes 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 on all HTML elements. With CSS, you can specify a number of style properties for a given HTML element. Each property has a name and value separated by a colon (:). Each declared property is separated by a semicolon (;).

Here's 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 - Define style sheet rules in separate file.css, and then including this file in an HTML document using the tag
• Internal style sheet - defining style sheet rules using a tag

  Example: Internal style sheet

  • Try it yourself "

  header

  Text one

  Text two

  Text three

  header

  Text one

  Text two

  Text three

  AT this example we set the background color of the element using css : background-color:palegreen, color and font type for headings

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

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

  Inline style

  When it is necessary to format a single element of an HTML page, the style declaration 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 inside an element's opening tag override rules defined in an external CSS file, as well as rules defined on an element

  header

  Text one

  Text two

  Text three

  Tasks

  • Center text alignment

    Use the inline paragraph style to center the text.

  In our course, we will cover CSS lessons - i.e. lessons of technology, one of the most important in the layout of web pages.

  In this tutorial, we will style our web page to be more colorful (Figure 1).

  Picture 1

  Before moving on to page design, let's study how color is set in the web.

  1. Definition of colors. CSS Lessons

  When defining colors for an HTML document, you can use either the names of the colors or their hex codes. The hexadecimal coding system is based on three components - red (Red), green (Green) and blue (Blue), hence its name RGB, after the first letters of the names of these colors. Each of the components corresponds to a hexadecimal number from 00 to FF (0 and 255 in decimal). These three values ​​are then combined into a single value preceded by a # sign, such as #800080, which corresponds to purple.

  The table shows the names of some colors and their codes. More complete color tables and their codes can be viewed in the folder colors located in the folder CD.

  Color		Color
  Black (black)		Silver (silver)
  Maroon (maroon)		Red (red)
  Green (green)		Lime (lime)
  Olive (olive)		Yellow (yellow)
  Navy (dark blue)		Blue (blue)
  Purple (purple)		Fuchia (fuchsia)
  Teal (dark green)
  Gray (gray)		White (white)

  Table of safe colors for website design development

  A safe color palette ensures the most accurate display match on different monitors.

  The safe palette consists of 216 colors. Safe colors are always the same from one browser to another or from one platform to another, from one monitor to another with their different color rendering capabilities and resolutions.

  If any of the three hexadecimal values is different from 00, 33, 66, 99, SS or FF, then the color is not safe.

  The safe color table can be viewed in the folder CD/ colors.

  2. CSS definition

  Our web page does not yet have a design that can be done in two ways:

  • first - means style sheets css (more progressive and correct method),
  • the second - by means tag attributes HTML .

  Let's start right away with a more advanced method.

  CSS - Cascading Style Sheets(hierarchical style specifications or cascading style sheets) are not a markup language replacement, but are a stand-alone technology that applies to the HTML tag.

  Purpose: allows you to automatically change HTML style element on all pages of the site. For example, we use an H1 heading on ten web pages, which should be green. When using style sheets, we only have to specify the green color once and it will be applied immediately on ten pages.

  Reverse situation: we are using HTML attributes set all H1 headings on ten web pages to be green, i.e. prescribed it ten times. Then we decided to change the color of the header to red, then we would have to change the green color to red ten times.

  With a style sheet, however, we only have to do this once, changing the heading from green to red in the style sheet itself, and it will automatically change on all ten web pages.

  The style sheet includes a set of CSS elements whose structure differs from that of an HTML element.

  Syntaxcss-element

  selector (property 1: value; property 2: value; ...property N: value)

  The name of the selector is written first, for example, h1, which means that all style properties will be applied to the tag

  , followed by curly braces that enclose the style property, and its value is specified after the colon. Style properties with values ​​are separated by a semicolon; this character can be omitted at the end.

  There can be as many style properties with values ​​as you like, their sequence does not matter.

  CSS is case insensitive, line breaks, spaces and tabs, therefore, the form of the entry depends on the desire of the developer.

  For example:

  h1 (font-family:Arial; font-size:14pt)

  or the same can be written like this:

  font-family:Arial;

  font-size:14pt

  In this example:

  • h1 - selector, in this case an HTML element,
  • font-family and font-size are style properties,
  • Arial - the value of the font-family property,
  • 14pt is the value of the font-size property.

  Ways to include style sheets in an HTML document

  1. External style sheet (linked style).
  2. Embedded style sheet (global style).
  3. Internal styles.

  3. External CSS Style Sheet (Related Style)

  Specifies the style of the entire site.

  It is a text file with the css extension.

  In this example, the style sheet is written in the style.css text file.

  Practice 1

  1. Open a blank document in Notepad++ and save it in the folder public_html under the name style. css. Please note that in the field File type was found All types(Figure 2).

  

  Figure 2

  2. Since CSS is a different technology, the HTML tags in the .css file are not written at all. Let's design our title "Catalogue of architectural projects" in the file main. html centered, blue, font Verdana, font height 20 pt. To do this, we will make the following entry in the css file (Figure 3):

  Figure 3

  In our CSS tutorials, let's break down what's written here according to the CSS element syntax we talked about earlier in this tutorial.

  • h1 - selector, i.e. the html element to which the style is applied;
  • text-align:center; - style text-align property(aligns the text) with the value center (centered);
  • color:#0000FF; - style property color (text color) with blue value #0000FF (value taken from the color table);
  • font-family:Verdana; - font-family font style property with value Verdana;
  • style properties with values ​​are separated by semicolons;
  • and so on, all according to the syntax.

  In order for our web page to “see” the style sheet and apply properties to html elements, we need to establish a link between the file main. html and style. css. To do this, open the main.html file and between the tags < head> and head> insert design , how in figure 4.

  

  Figure 4

  3. View the result in a browser. It should match Figure 5.

  

  Figure 5

  In this CSS tutorial, we will look at where to get the names of style properties and their values? There are also special directories and specifications for this (CSS Reference folder). To get started, use a small reference book as a reference. Sprav_CSS.doc.

  4. Let's style the heading h2 "Projects for your future home" with right alignment, burgundy color, Verdana font, font height 16 pt. For this in the file style. css h2 (Figure 6).

  Figure 6

  5. Check the result in the browser, it should match Figure 7.

  

  Figure 7

  6. Paragraphs will be formatted with alignment in width, dark blue color, Arial font, font height 12 pt. For this in the file style. css make the following entry for the selector p(Figure 8).

  Figure 8

  7. Also make the background of the entire web page light blue. To do this for the selector body add an entry (Figure 9)

  Figure 9

  8. View the result in a browser. It should match Figure 10.

  

  Figure 10

  I think from this CSS lesson, the principle of using an external style sheet is clear. In order to easily and colorfully decorate your web-pages, you need to study the style properties and their values ​​\u200b\u200bin the reference book and try it in practice. The more you remember such properties and values ​​without referring to the reference book, the higher your professionalism.

  Research assignments

  1. Using the directory Sprav_CSS.doc style the header < h3> in main.html file. Style properties to choose from.
  2. For the House Designs list, use styles to change the Arabic numerals to Roman numerals. The rest of the options are optional.
  3. For the "Areas of houses" list, use an image as a marker list_1.gif from a folder html_css_2. The rest of the options are optional.
  4. Apply an image as the background of a web page through styles fon9.jpg from a folder html_css_2.
  5. Use styles to make paragraphs bold.

  An example result is in Figure 11.

  

  Figure 11

  4. Classes in style specifications

  In our CSS tutorial, we'll look at classes in stylesheets that are used when you want to define multiple styles for a single element. When defining a class, an arbitrary unique class name is added to the desired tag, separated by a dot.

  For example, we have several headings in the text h1 and we need them to be different colors. Then you need to separate the styles as follows

  h1.golub(color:blue)

  h1.krasn(color:red)

  h1.green(color:green)

  The dot is followed by the class name, which must be unique and cannot contain only numbers.

  Now when using the tag < h1> attribute must be set in the document class to specify which style to apply:

  < h1 class=" golub"> It's a blue header h1>

  < h1 class=" red"> This is a red header. h1>

  < h1 class=" green"> This is a green title. h1>

  Practice 2

  1. Open the file pattern. html. Save it under a new name ploshady. html in folder public_html.

  2. Write Between Tags new heading "Areas of houses".

  3. Content copy text from file Square houses.txt from a folder html_ ccs_2 .

  4. Styles will be written in the same file style. css, which we created in the previous lesson. Therefore, in the file ploshady. html link to this stylesheet by inserting between tags and(picture 12)

  

  Figure 12

  5. Format your headings with a tag

  and assign a class to each heading (Figure 13).

  

  Figure 13

  Your file ploshady. html should now look like this (Figure 14).

  

  Figure 14

  6. Style sheet style. css create the following entry (Figure 15)

  Figure 15

  7. Check the web page in a browser. The result is in Figure 16.

  

  Figure 16

  8. You probably noticed that in our new record heading styles have repeating designs font-family:Verdana; text-align:left; font-size:14pt. Such constructs can be written once, grouping the selectors to which they are applied. To do this, you need to list the selectors separated by commas, and then write the common properties in curly braces. Then our style sheet for headings will look like this (Figure 17):

  

  Figure 17

  Practice 3

  Under each heading in the file ploshady. html there is text. Format paragraphs using different classes. Use different colors, alignment and typeface. Class names must be unique. It is undesirable to use the same names for different selectors. One of the options in Figure 18:

  

  Figure 18

  5. ID-style for a specific element

  CSS lessons include the study of so-called id-styles.

  Any element can be assigned an ID. id, and then assign some style to this element using id.

  For example:

  The entry in the style sheet file will be as follows

  # test { color:#00 ffff}

  Now we can match this style to any element in the html document:

  ...

  ...

  In this example, the word test is the name of the style. The name can be arbitrary from Latin letters, but it must be unique, i.e. no element in the stylesheet should have that name anymore.

  Practice 4

  Let's make a blank for the future menu of our site.

  1. Open the file pattern. html and save it under a new name menu. html in folder public_html.

  2. To the contents of the file page menu. html enter text from file menu. txt from a folder html_ css_2 .

  3. Use html tags to format the file as follows:

  • for the headings "Project categories", "Catalogue of architectural projects" and "House areas" use the tag

    ;

  • for the "Project Categories" list, use a numbered list
    ;
    1. for the lists "Catalogue of architectural projects" and "Area of ​​houses" use bulleted list

       4. Insert the logo at the top of the web page (file logo_myhouse.gif). The result should match Figure 19.

       

       Figure 19

       5. For this menu, we will make a separate style sheet called style_ menu. css. Establish a link between a file menu. html and style sheet style_ menu. css by inserting an entry between tags and in file menu. html.

       6. Create a blank document and save it with a name style_ menu.css in your folder.

       7. For the "Project Categories" group, which includes a title and a numbered list, and for the "Architectural Projects Catalog" group, which includes the title itself and a bulleted list, we will use the id-style name blue. Those. the code will look like this (Figure 20):

       

       Figure 20

       8. In file style_ menu. css we will make the style for these elements dark blue in Tahoma font (Figure 21):

       Figure 21

       9. For the "Areas of houses" group, which includes the title and the bulleted list, we will use the id-style name brown. Those. the code will look like this (Figure 22):

       

       Figure 22

       10. In file style_ menu. css we will make the style for these elements brown, in Times font (Figure 23):

       Figure 23

       11. And add another background color to the menu.html file (Figure 24)

       Figure 24

       12. As a result, we get the following web page (Figure 25)

       

       Figure 25

       As a result of this CSS tutorial, you should have the following files:

       • style. css
         
       • style_ menu. css
       • ploshady. html
         
       • menu. html
         

       From the author: hello, dear readers of the webformyself portal. In site building, 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. Consider some css styles for the site, which are used in the design of web pages.

       css connection

       Today, you will hardly find a web page anywhere that has been created purely using the capabilities of html. Indeed, the appearance of such sites would be simply terrible, therefore, when the markup of the necessary elements is ready, they need to be designed right there, and this is done with css in a 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.

       But how to do it right, you ask? To do this, you need to create a new file with the css extension, and then connect it to html. This is done very simply using the link tag, which is responsible for connecting external files. It 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 in order to determine the role of the file on the page. In our case, the role is a style sheet, which is indicated.

       type = "text/css" - the so-called MIME type, which is usually specified for all included files so that the browser interprets them correctly. Modern web browsers do not need to write this attribute.

       href = "style.css" is a standard attribute that specifies the address of our external file. In this case, it is written based on the fact that the file has the name style, the css extension and is located in the same folder as the html document.

       As you can see, in 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 the page, but no more than 2-4 are considered optimal, because too many requests to the server are also not very good.

       Where can I get ready-made css styles for the site?

       Well, with the connection, I hope everything is more or less clear. But you are creating empty file, and in order for the effect to be visible from its addition, you either need to write the rules yourself, or take them from somewhere.

       

       There are a lot of free html templates on the web, for example. If you download any of them, then inside there will definitely be a ready-made style sheet with the necessary rules for website design. But it will work correctly only 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:

       Title text

       Text in a paragraph

       And how can we, for example, style a paragraph and a heading in css? That's what selectors are for, to access only the elements you need. For example:

       p( font-size: 12px; ) .title( font-size: 36px; )

       font-size: 12px; Title ( font-size: 36px;

       We set the font size of all paragraphs to 12 pixels, while the elements with the title class (h1 in our case) received a much larger 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, you can create other elements with exactly the same class, this is not prohibited, and they will receive the same rule, but if we simply write the h1 tag in html (without the title class), then no rules will be added for it.

       This is how it conveniently allows css to select the necessary elements and leave alone those that are not needed. 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 can’t just connect these tables to any files like that, they won’t work if the corresponding classes are not affixed to the html of the necessary elements.

       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

       Already from this we can conclude that somewhere on our html page there must be an element with the nav class, and links must lie in it. If this is true, then the appearance will be applied to them and their appearance will change accordingly. If no such elements are found, then the code is simply ignored.

       Again, on the net you can find a lot of ready-made templates, in which you can see this class connection, so if you change something in html, the corresponding operations must be performed in the style sheet.

       How to make css styles for the site?

       CSS is not something scary and extremely complex. This is a common technology created by people for the design of web pages, which 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 development is constant practice, coupled with new knowledge that you will learn for yourself. Ours can give you a 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 completely devoted to the basic properties of this language. .

       Most importantly, resolutely tune in to the study and discard the prejudice that it is very difficult. You can also help free materials on our website, articles and video tutorials. If you wish, you can use them to acquire the basic knowledge that is needed when working with css.

       On this I say goodbye to you. Read our webformyself blog to improve your website building knowledge.

       In this chapter, we will talk about how to embed CSS in an HTML document, that is, link the style description of an element directly to the element itself, using some kind of HTML tag.

       Implement this task possible in three ways:

       • Write a style description directly on the element itself. This method is good only if such an element is the only one in HTML document e which needs a separate style description.
       • Write a style description for all identical elements in an HTML document. This method justifies itself if the style of the page is fundamentally different from the overall design of the site (a group of interconnected pages).
       • Move the style description of HTML elements to a separate CSS file. This will allow you to control the design of the entire site, each page of the site in which the reference to the CSS file is indicated. This method is the most efficient use cascading style sheets.

       Let's take a closer look at each option, and at the same time get acquainted with the syntax rules for writing CSS.

       style attribute.

       Almost every HTML tag has an attribute style, which indicates that some style description is applied to this tag.

       It is written like this:

       style="">

       Everything that will be written between the quotes of the attribute style and will be the style description for the given element, in this case the element

       Well, for example:

       style="color: #ff0000; font-size:12px"> it's a paragraph with a custom style

       In this case, we have specified that this paragraph should be displayed in red and have a font size of 12 pixels. In the following chapters I will go into detail about what is written in quotes, but now it is about how to apply CSS to any HTML tag.

       By 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 way of injecting CSS is good only if you want to set a certain style to a small number HTML elements.

       Tag (do not confuse with the attribute of the same name) in which the description of the elements we need occurs.

       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

       
       

       Here you can buy the best elephants at competitive prices!!

       
       

       Rent an elephant

       
       

       Only here you can rent any elephants!!

       
       
       
       

       As you can see from the example, we have achieved exactly the same result as in the first case, only now we do not prescribe a style for each element individually, but put it in the "head" of the document, thereby indicating that all the headings

       ,

       - will be blue and paragraphs

       - red. Imagine how much easier it would be for us to work if there were a hundred such paragraphs and about fifteen headings on the page, and the document itself began to weigh less by "removing" all the repetitive style descriptions for each individual element.

       Now the promised comments:

       Tag there is a direct declaration of styles of certain HTML elements according to the following syntax:

       If several element properties are specified in the style declaration block, then they are separated by a semicolon.

       CSS in a separate external file.

       How long and short, we have come to the main, in my opinion, advantage of CSS, namely the ability to take out all the information related to the design of the site in 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 is so strange we wrote in the subsequent chapters of this tutorial.

       All! file with style description created! Now it remains 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 service information; it is located in the header of the HTML document between the tags and is not displayed by browsers.

       Tag has attributes:

       href- The path to the file.
       rel- Defines the relationship between the current document and the referenced file.

       • shortcut icon - Specifies that the included file is a .
       • style sheet- Specifies that the included file contains a style sheet.
       • application/rss+xml - An XML file for describing the news feed.

       type- MIME data type of the included file.

       Since we include a cascading style sheet as an external file, our service link takes the following form:

       I will repeat, in order to certainly dispel possible misunderstandings. Attribute rel assign a value style sheet since we include a cascading style sheet as an external file, we specify 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 given file textual and contains a style description type="text/css"

       Now we insert this line into the headings of the pages of our site and enjoy the result ..

       File mystyle.css
       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.

       
       
       
       elephant.html file
       
       
       
       
       
       
       
       

       Menu:

       
       All about elephants.
       Buy an elephant.
       Rent an elephant.
       

       ---

       
       

       Buy an elephant

       
       

       Here you can buy 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, "elephant site", on this moment, there are three pages, each associated with a single external css file- mystyle.css Thus, we significantly "unloaded" it and made the design of the entire site "mobile". Imagine how many kilobytes we won if there were a hundred full pages on this site!? Also, how much time would it save if we needed to change something 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 style different from other elements is the only one on the entire site.
       • Use the tag

         header

         In this example, the element style is set

         , which can then be used everywhere on this web page (Fig. 1). Please note that we can safely combine co

         Heading 1

         Heading 2

         In this example, the first heading is set to red and is set to 36px using the style attribute, and the second heading is set to green color via element

         Heading 1

         Heading 2

         This example shows how to import a style file from the Google Fonts site to include the Cyrillic Lobster font.

         Liked the article? Share with your friends:

         Facebook

         Twitter

         My world

         In contact with

         Google+
         23.10.2020

         A computer
         The most interesting:

         

         Legacy Software

         

         How to add music to iPhone without iTunes

         

         How to add music to iPhone without iTunes