Nested rules. Rules for constructing HTML documents Rules html general family rules 2

Hello, dear readers of the blog site. Today I propose to continue the conversation about which we started in the above article. Even earlier, we got acquainted with what cascading style sheets are, learned what they mean, and much more.

All materials on cascading style sheets that have already been published on this blog can be found in. Today we will first talk about how you can combine and group selectors, and then we will look in detail at the rules that apply to the same element in Html code (Important, counting selectors and writing rules in the style attribute).

Combinations and Grouping of Selectors in CSS

So, in previous articles we managed to consider 7 types:

Of these seven possible views, you can create combinations in CSS. All combinations that we will make are directly related to (ancestors - descendants, parents - children, brothers - sisters).

The first type of combination is called context selector. It takes into account the relationship of HTML code elements according to the “Ancestor - Descendant” principle:

Separate selectors in combinations are written separated by a space, and you need to read it from right to left. That. The CSS rules will only apply to the last one of this combination (the rightmost one), and everything that comes before it only allows us to specify a more precise application (targeting) for our rules (emphasize).

The first example states that all B elements (in bold) that have Div elements as ancestors will be colored green.

In the above code, only the underlined fragment will be colored green, because among its ancestors there is a Div, and the second fragment of code, highlighted with the B tags, will remain the color that is selected for it by default, because the Div container is no longer among its ancestors (only P and Body):

Such combinations work in any browser.

The next type of combination would be child selector, which is built on the principles of relationships between code elements of the “Parent - Child” type:

They are written with a separating more familiar (>):

This entry will be interpreted by the browser as follows: for , the “parent” (closest ancestor) of which is the Div container, will be highlighted in red.

In the example above, only the outlined paragraphs will be colored red because they are enclosed directly in the Div container that is their parent (closest ancestor). If you modify the above example of a child selector to look like this:

Body > p (color:red)

Then only the last paragraph will be highlighted in red, because... its parent is the Body tag, and the first two paragraphs will remain in their default color (Body is their parent, but not their parent, which is Div). Child selectors don't work in Ie 6 browser.

How and why selectors are grouped in CSS code

The last combination is called adjacent selectors and meets the principles of relationships between HTML code elements of the “Sisters - Brothers” type. They can use either “+” or “~” as a separator:

This entry means that the contents of element I (italicized) will be colored red only if its nearest neighbor to the left (top in code) is element B (bold). For example, this condition would be met in this example:

If you write the adjacent selector in Css code like this:

H1 ~ p (color:red)

This will mean that all paragraphs (P) that have an adjacent H1 element (heading) located higher in the code will be colored red. This refers specifically to neighboring elements (relationships of the “Sisters - Brothers” type). In the example below, the given selector will be matched by the circled paragraphs:

Combinations of adjacent selectors in the Ie 6 browser are also, unfortunately, not supported. In Ie 6 only the first type of combination is supported, but in Ie 7 and higher all others are supported. In other browsers there should be no problems.

Selectors in Css you can also group. For example, if some of them use one or more identical rules, then they can be combined into a group to reduce the amount of Css code.

In the example shown in the screenshot, it is repeated for each header selector (h1-3), which can cause complexity (multiple work) if you want to change the value of this property. Therefore, the second option of a grouped entry looks a little preferable.

Please note that when grouping selectors are written separated by commas. If there are more identical rules, then the code savings will be more noticeable. And those rules that were unique must still be written down individually.

Priorities of CSS properties (with and without important)

Now let's think about what style the browser will use if no styles are specified for this Html code element? And for this there is a corresponding specification, where all this is described.

As you can see, the final separation of Html and Css has now occurred. Those. even for pure HTML code, the browser will still use the default properties of style sheets. So here are the default properties: have the lowest priority.

The properties that the user assigns in his browser settings have higher priority. These styles will be applied to any documents he views in this browser.

True, not all browsers have this feature, but at least Ie and Opera have it. Those. If desired, the user will be able to include his own CSS file as a source of style markup.

For example, in Ie, to do this, you need to select “Tools” - “Internet Options” from the top right menu, and then on the first “General” tab click on the bottom “Appearance” button. In the window that opens, you need to check the “Design using a custom style” box and use the “Browse” button to find the CSS style markup file you need on your computer:

Those. the user has the ability to make any site opened in the browser look in accordance with his requirements described in the CSS file. It is called "custom styles" and they take precedence over the styles that are defined in the default specification. But the so-called author's styles will have even greater priority.

That is, if I (the site developer) wanted to use styles other than the default ones in the design of any Html code element (remember, they are described in the specification), then the user will not be able to override my design with his own Css file.

Will the user be forced to accept this? No. He has the opportunity Increase the priority of your CSS properties by adding Important at the end of each of them. This word is written separated by a space character and preceded by an exclamation mark:

P (color:red !important;)

If the user has the same property with Important in his own style file, which he connected to the browser, then he will see all paragraphs in red. But the author (developer) of the site could also use Important for this property. Who will win then and whose priority will be higher?

We decided that custom styles with Important will in any case have a higher priority than the author's styles, whether with or without Important.

Let's summarize in the form of a list all the information presented regarding the priorities of style properties. The priority will decrease from top to bottom:

1. Custom with Important
2. Copyright with Important
3. Copyright
4. Custom
5. Styles accepted for Html elements in the specification by default (when neither the author nor the user have specified anything else)

Those. without Important, author's styles are more important, and with them, user styles are the most important and priority. Well, now let’s deal with the author’s tables, because what the user does is unknown to us and is shrouded in darkness.

How to increase the priorities of CSS properties in author styles

It is now that we move on to the question cascading CSS style sheets. Let's look at this with an example to make it clearer. Let's say we have a piece of code with the following Html elements (a paragraph inside a Div container):

Let's first write down the following properties:

P (color:red) .sbox (background:#f0f0f0)

As a result, both the first of them will be applied to the paragraph (since it is formed by the P tag), and the property that sets the gray background for the element with the “sbox” class, which this paragraph again has:

Now let's add one more property to the second selector (of the class), which will conflict with the first line (they both set , but use different values):

P (color:red) .sbox (background:#f0f0f0;color:blue)

This will cause the paragraph text color to change to blue instead of red.

Why? Because this is exactly the way to resolve a conflict when the same Html code element receives several identical rules at once, but with different values ​​and from different places in the Css code. In order to determine which rule has higher priority, you need to count its selectors.

Besides this yourself selectors have gradation according to priorities. ID has the highest priority. In this example, the text color will be blue precisely because the priority of the Id (#out) will be higher than that of the tag selector (p):

P (color:red) #out (color:blue)

Further down the priority ladder are selectors for classes, pseudo-classes and attributes. In the following example, the tag (p) will play again and the color of the paragraph text will be blue, because it competes with the selector of a higher priority (class):

P (color:red) .sbox (color:blue)

Well, the lowest priority (not counting the universal *, which has the lowest weight and does not make any changes to such butting) is the selectors of tags and pseudo-elements.

Div p (color:red) p (color:blue)

What color will the resulting paragraph text be? That's right, it's red, because... This property has more tag selectors (two versus one). Oh how. Those. Ids are considered first. If the winner is not identified, then classes, pseudo-classes and attributes are considered. Well, if nothing was resolved there or no such ones were found, then selectors of tags and pseudo-elements are considered.

But it is quite possible that a winner will not emerge and the selectors of competing classes will have equal priority in total. For example, for our long-suffering paragraph enclosed in a Div container:

It would be quite possible to write a piece of CSS code like this:

Div.box #out(color:red) #in p.sbox(color:blue)

And what color should the paragraph text be? Both combinations describe exactly our paragraph. The first should, as usual, be read from right to left: apply these properties (color: red) to an element with Id #out, which is located somewhere inside (have it among the “ancestors”) of the Div container with the class.box (div.box ). Completely matches our paragraph.

The second combination: apply these properties (color:blue) to a paragraph element with the sbox class (p.sbox), which is inside any element with Id #in. Again, it completely describes our paragraph. Let's count the selectors.

IDs occur once in both combinations, and the same can be said about classes. All that remains is to count the tag selectors, but they are also used the same number of times in both combinations (one). Ambush.

We got it equal priorities the same property having different values ​​(text color red or blue). How will the browser solve this dilemma?

The rule will apply here - who is last, he's right. Therefore, in my example, the color of the paragraph text will be blue, because this property (color:blue) is located lower in the code. If these rules are reversed:

#in p.sbox(color:blue) div.box #out(color:red)

As a result, the color of the paragraph text will change to red. Q.E.D. You can add, for example, another tag selector to any combination and we will tip the scales in its favor, even if it is not lower in the code:

Body #in p.sbox(color:blue) div.box #out(color:red)

In this case, the color of the paragraph will change to blue. The universal selector “*” has no effect on the calculation of priorities at all. By the way, just above we looked at a way to increase the priority of CSS rules by adding Important. In our example it might look like this:

P (color:green !important) #in p.sbox(color:blue) div.box #out(color:red)

What color will the paragraph text be in this case? Green, of course. And you don’t even need to count anything, because adding Important to a style property resolves this controversial issue unambiguously, no matter where it is in the code and no matter how many selectors it has.

But Important is not the only way to unconditionally increase the priority of a property. The second way to increase may be to use style properties in the Style attribute the HTML element you need.

Those. inside the same long-suffering P tag, add a Style attribute specifying any color:

That's it. Now, regardless of what properties are specified for this element in an external style sheet file or inside the Style Html code tags, the paragraph text color will be yellow.

But it won’t be able to beat the properties with Important. Those. in the last example, where we added the rule "p (color:green !important)", the text color will still be green, even though style="color:yellow".

In fact, the priority of the two rules (with Important in the external style sheet file and in the style attribute) is equal, which means we need to proceed to counting the selectors. Can they really be inside the style attribute?

Yes, there cannot be any, which means that the rule written in the style attribute will always lose to the rule with Important only due to the smaller number of selectors (zero will be less than any number).

Well, what then? will give the highest priority to the Css property? That's right, it will be written in the style attribute and even with Important:

In this case, the color of the paragraph text will be yellow and it will be impossible to interrupt this with anything in the author’s styles. We have found an absolute way to set styles. It can only be interrupted by a user with his own style file and the Important property specified for this.

So let's try to compose list of factors influencing priority properties in author's styles in descending order:

1. Specifying the property in the style attribute of the desired tag along with Important
2. Adding Important to a property in an external style sheet file or in the style tag directly in the Html code
3. Simply setting this property in the style attribute is needed on the element
4. Using a larger number of Ids for a given property
5. Using more class selectors, pseudo-classes, or attributes
6. Using more tag selectors and pseudo-elements
7. Lower property placement in CSS code, all other things being equal

In fact, rules in the style attribute are used very rarely (imagine how difficult it would be to make changes in the entire site code in this case, rather than in a separate CSS file).

This attribute is mainly used when you just need to quickly test something. Well, it’s also convenient if you insert your code into other people’s Html pages, which have their own style and which can be inherited () for your inserted elements.

Why and how to insert your code into other people's pages? We may not need to, but Yandex and Google do this when or on other people’s sites (our sites).

By adding the style attribute to all elements of the ad block code, with the properties specified in it and the added Important, you no longer have to worry about the ad code being changed in any way (although Yandex ads can still be changed using CSS and Important, apparently they did not use this method).

Good luck to you! See you soon on the pages of the blog site

You might be interested

Tag, class, Id and universal selectors, as well as attribute selectors in modern CSS
Selectors of pseudo-classes and pseudo-elements in CSS (hover, first-child, first-line and others), relationships between Html code tags
List style (type, image, position) - Css rules for customizing the appearance of lists in Html code
What is CSS for, how to connect cascading style sheets to an Html document and the basic syntax of this language
CSS - what is it, how cascading style sheets are connected to Html code using Style and Link
Dimension units (pixels, Em and Ex) and inheritance rules in CSS
Background in CSS (color, position, image, repeat, attachment) - everything for setting the background color or background image of Html elements
How to find and remove unused style lines (extra selectors) in your site's CSS file Different styling for internal and external links via CSS

Rules are part of our world and constantly guide our daily actions. In almost every area of ​​our lives there are rules - rules of behavior, rules of etiquette, rules of crossing the street - the list can be endless.

What are the rules? It is a set of instructions that must be followed or obeyed. There are many English words that imply rules, or refer to rules:

• Cautions - warning
• Commandments – order, directive
• Directions - instructions
• Forewarnings - warning
• Guides
• Guidelines
• Instructions - instructions
• Laws - laws
• Policies - settings
• Procedures
• Regulations - rules
• Warnings - warnings

Google shortcode

Rules affect us every day and are hard to avoid even in the simplest places, even when we are just walking down the street it is impossible to miss all the signs posted around us giving warnings and directions to the rules to follow. The easiest way to explain a rule is to write it down in a book or put up signs that everyone can see. Here are some rules posted in the form of signs that we can often see on the streets and in public places, known as warning signs.

• no cycling – you cannot ride bicycles
• no entry – entry is prohibited
• no skating allowed - you cannot roller skate
• beware of oncoming bicycles - beware of oncoming bicycles
• Keep clear = do not block this area – do not occupy this area
• you can’t fill your gas cans here - you cannot fill gas cylinders
• poison = do not eat it – poison = you can’t eat
• no smoking allowed - no smoking
• beware of people crossing the road - be careful, pedestrians
• no parking allowed – parking is prohibited
• do not drop litter - do not throw garbage
• no children allowed – children are not allowed
• no photography allowed – photography is prohibited
• please clean up after your dog – clean up after your dog
• danger of death – danger, high voltage electricity nearby – dangerous! – dangerous, high voltage
• no spitting allowed - you can’t spit

As you can see, there are a lot of rules around us, and we must follow them, although it must be said that sometimes people do not follow the rules, they break the rules, or go against the rules. the rules), sometimes they are “caught” and punished (they are punished). If you break a rule, you may be forced to pay money, i.e. a fine/penalty, or worse, may force you to go to the police station.

Have you ever broken the rules? People who always follow the rules are called “law abiding”, and people who break the rules are called “law breakers”.

Finally, we would like to wish you “be good!” , “follow the rules!”, “stay out of trouble!”

How to write correct CSS code?

Without knowing the basics, it is impossible to move forward. Moreover, these basics must be trained to a subconscious level. You must know all the rules for writing clean, understandable code by heart and apply them everywhere. Start right with your current or, at most, your next project. This will be your CSS bible

Below, see 15 golden rules for writing user-friendly and professional CSS code

1) Use CSS-Reset

CSS-reset- this is a certain piece of code that is written at the beginning of our style file, in which all values ​​are reset and all the basic parameters are set for all styles, which we would most likely have to write for each specific id/class. This allows you to shorten the code later, as well as avoid differences in display between browsers.

Here is a CSS-Reset example taken from http://meyerweb.com/eric/tools/css/reset/index.html

/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del , dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul , li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q: before, q:after ( content: ""; content: none; ) /* remember to define focus styles! */:focus ( outline: 0; ) /* remember to highlight inserts somehow! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* tables still need "cellspacing="0"" in the markup */ table ( border-collapse: collapse; border-spacing : 0; )

2) Use abbreviations

For example, to write a long

Border-top: 5px; border-right: 10px; border-bottom: 15px; border-left: 20px;

we can write briefly:

Border: 5px 10px 15px 20px;

that is, clockwise starting from the top.

Mainly abbreviated border, margin, padding, font and background.

You can see more about this

But colors can be reduced like this:

If the color code consists of 3 repeating digits, then you can simply write down these three digits.
For example: #FFFFFF can be written as #FFF, or #990055 can be written as #905, but #F091A4 cannot be abbreviated.

3) Use comments

Use comments wherever you should - they really help organize the code, making it more understandable for yourself and for those who will work with it

It looks something like this:

/* Your comment here */

Comment:

a) Title of the style page - write who the author of the code is and when it was written

b) Mark style sections - this will organize all the code into sections.
For example:

/************************************************/ /* Sidebar */ /** **************************************/

c) Comment on problem areas. For example, those where the page may have differences in different browsers. For example:

Input /* IE6 Problem */

d) Write small comments to those with whom you work - for example, when something needs to be improved.

4) Add a Flower Legend

With small CSS files it is not difficult to track all the colors of the site.
But what if we have 5000 lines of code? - you can’t allow the wrong colors to be used.
For this purpose, there is a color legend - that is, a list of the colors that we use in our file. For example:

/* /* light blue: #4595be /* dark blue: #367595 /* red for links: #9F1212 ************************** ******/

5) Remember what Position:realtive and Position:absolute are

Most beginning layout designers get confused by these concepts, but there is a rule that allows you to avoid confusion.

Position:absolute positions the object relative to the page - and it does not matter where it is located in the HTML stream. The default value is 0 on the left and 0 on the top.

Usually this option is not used because it is inconvenient and has limited options. But what will be useful to you is that if you set the parent (“wrapper”) of our element to Position: realtive, then Position: absolute will be aligned already Relative to the top left corner of the parent. So you can add this property as needed. Clearly in the picture:

6) Avoid using hacks

Sometimes browsers like IE6 and IE7 simply force us to use hacks. Khaki is an immediate error for the validator. So put it in special css files for each browser.
You can see special entries for hacks for each browser and how to put them into separate files

7) Use Margins in your location descriptions

This is not something that gets noticed very often, but it helps avoid problems across different browsers.

The idea is this: instead of using padding on the parent, we use margin on the child elements. So, instead of

#main-content ( padding-left: 10px )

#main-content ( ) #main-content #left-column ( margin-left: 10px )

There's nothing wrong with using padding, but experience shows that margin is better

8) Use floats

If you want to assign a float to an element, then write to its parent overflow:hidden

Ul ( overflow: hidden; ) ul li ( float: left; )

Without this property, the element may flow unattractively; problems may also arise when setting margins or borders.

If you want the element not to flow around - specify clear:both below the streamlined element. This is often used instead of overflow: hidden;

9) Add display:inline for float elements

A fairly well-known problem in IE6 with doubling margins on float elements. That is, if we need 20px, then we have to write 10px, because this indent doubles. Although IE6 is already dying out, and many designers do not spend time optimizing the site for it, still a small piece of code will make the display in it more pleasant. So, let's put

Display: inline /* IE6 Problem */

for an element that has a float applied to it

10) Making life more comfortable with sprites

Sprite pictures are a very convenient thing. They give an overview of the entire page's graphics and reduce loading times.

If you know English, then here

11) The structure of the site files should be clear

Take the time to make the site structure clear. Put everything on the shelves.
For example:

Here "Website Name"- the name of the site we are working with. This folder contains the HTML files for the site, plus the folders assets And styles.
In folder assets contain files that can be downloaded from the site, for example, archives or PDF files. In folder styles contain, in turn, the css, images, javascript folders.

• css- contains all css files like reset.css, layout.css and main.css
• images- all pictures of the site. This folder can also be divided into sections.
• javascript- all javascript files.

This diagram is approximate and can be displayed in different ways. The idea is that it helps you work faster and makes the site clearer and neater.

12) Expand styles

Optional advice - It is better to write the names of classes and style ids in a tree-like manner so that everything is clear and visual.

13) Use pixels rather than relative values

Everything is quite simple - pixels load the code less, since the document does not have to calculate percentages of relative values.

The problem with relative quantities is the transmission of this relativity.
To make it clear, I will explain with an example:

body ( font-size: 62.5% ) means font-size: 1em, that is 10px.

If #blog-content needs 14px, write:

#blog-content ( font-size: 1.4em; )

Now if the H3 tag inside #blog-content needs 20px, then it could be set like this:

#blog-content ( font-size: 1.4em; ) #blog-content h3 ( font-size: 2.0em )

Everything would be fine, but we have relativity. And these 2.0em apply to 1.4em
#blog-content, and in the end, the size we will get is 28px.

So use fixed values.

14) Limit pseudo-classes to anchor tags

New browsers do not have this problem; it all comes down to a number of older browsers, led by IE6.
The problem is that in older browsers pseudo-classes (like :hover) only work when applied to a tag a, that is

#header ul li:hover ( background-color: #900 )

doesn't work in IE6

This problem is fixed with jQuery

15) Avoid problems with selectors

Use selectors where possible

For example, use instead

#main-content.main-header

#main-content h1

Be careful with grouping selectors

After all, relative values ​​can play wrong here if you use them

If everything is ok in this example,

Main-content div,.main-content p ( color: #000; )

On this note, be careful with relative values.

Main-content div,.main-content p ( line-height: 1.3em; )

And finally

To write successful code, avoid constantly wrapping one thing into another and so on.
Learn h1, ul and p tags.
The key to success is simple - practice, practice, practice

Good luck with your training)

» »

Sharing is caring!

Attribute of What does do? Was used to specify the display of internal borders between rows and columns. This attribute has been deprecated. Use CSS to style table borders instead.

The Rules Attribute has been Deprecated This attribute has been deprecated and should not be used. Browser support for this attribute is limited and using it may produce unexpected results. Instead, use CSS to style tables.

The RULES Attribute

RULES , an HTML 4.0 attribute, indicates if there should be internal borders in the table. We"ll go over each of the values ​​of RULES and demonstrate how they are used. RULES and FRAME have an annoying way of changing each other"s defaults. To simplify your life, here"s a rule of thumb: if you use RULES also use FRAME and BORDER. It"s easier to avoid getting confused.

The NONE Value for the RULES Attribute

RULES=NONE means that there are no inside borders. RULES=NONE is the default if you don"t use BORDER or set it to zero, but otherwise must be explicitly stated to have no inside borders. Note that currently Netscape does not recognize RULES .

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The ALL Value for the RULES Attribute

RULES=ALL indicates that all the internal borders should be visible. RULES=ALL is usually used in conjunction with FRAME=VOID so that there are outer borders but no inner borders.

When applied to a table, that value gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The COLS Value for the RULES Attribute

COLS indicates that there should be borders between the columns but not between rows.

When applied to a table, that value gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The ROWS Value for the RULES Attribute

RULES=ROWS indicates that there should be borders between rows but not between columns.

When applied to a table, that value gives us this result:

Name	Food
Starflower	stir fied tofu
Miko	vegetable rice soup
Andy	hummus
Ping	french toast

The GROUPS Value for the RULES Attribute

RULES=GROUPS allows you to put borders between groups of table cells. There are two ways cells can be grouped: by row and by column. Let's go over each of them. Note that currently Netscape does not recognize RULES.

Grouping By Row

To group by row use the , , tags. indicates the header rows of the table, indicates the main body of the table, and indicates the bottom rows. So, for example, this code creates a table with three groups. Borders appear just between groups:

Name	Food	Price
Starflower	stir fied tofu	5.95
Miko	vegetable rice soup	4.95
Andy	hummus	3.95
Ping	french toast	5.95
Total		20.80

Here's how that table renders:

Name	Food	Price
Starflower	stir fied tofu	5.95
Miko	vegetable rice soup	4.95
Andy	hummus	3.95
Ping	french toast	5.95
Total		20.80

Grouping By Column

To group by column use the tag and its SPAN attribute. takes a little getting used to because it doesn"t actually go around any table cells. It goes at the top of the table code where it sets rules about the table columns including which are grouped together. to indicates how many columns are in each group. If you leave SPAN out then it is assumed the group has just one column. So, for example, the following code says that the first column is in a group by itself and the three after that are together in a group. Notice that requires an end tag. Borders will go only between the groups.

At the moment, most browsers display sites, independently deciphering and correcting webmaster errors. However, you need to be careful when writing HTML - you need to follow the rules of validity, because correct layout is important for site optimization, and will also help not go crazy for users who open your site in earlier versions of browsers.

Use

Elementlocated on the first line of any HTML page. It determines the version of markup language that is used on the page. Currently it is recommended to use a doctype like- it is universal for any version of the language.

Use the correct document structure

Tags , , must always be present in the code, this makes the page compliant with standards and ensures that it will be displayed correctly.

Wrong

hello world!

Right

hello world!

Define technical page information correctly

Meta tags and styles should be specified in , and not somewhere in the body of the page. It is preferable to include scripts at the bottom of the page before the closing tag. The advantage of this approach is that before the page content is displayed, the browser only loads the styles, and it will load the scripts last, which allows the user to see the page content faster.

Wrong

Right

Follow markup standards

Use elements according to their semantics

Check the html code for validity

Use alt text for images

Images must always include an alt attribute. The browser relies on this attribute to provide context for the image. The alt attribute must contain text that will be displayed if the image has not loaded.

Wrong

Right

Don't use styles in HTML markup

This creates pages that take too long to load and are difficult to maintain. Write all styles in a separate CSS document. Try to use the tag and style attribute to a minimum.

Write comments

Comment the code, but don't overdo it. Comments that are written concisely and clearly can serve as a great help to other developers, as well as an important reminder for you after some time has passed.

Example:

Use appropriate class names

Give names to css classes in accordance with the content of the block, for example: header - header, footer - footer, menu - menu, content - content. This will make the code much clearer and easier to maintain.

Bad code

• Menu item 1


• Menu item 2


• Menu item 3

Good code

• Menu item 1


• Menu item 2


• Menu item 3

Rules for writing CSS

CSS also has rules that you can follow to keep your code simple, easy to read, and well organized.

Reset browser styles to default

They can interfere with the styles we actually want to apply. You can download the file for resetting standard browser styles here - reset.css.

Use shorthand properties and values

Bad code

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

Good code

padding: 5px 10px 15px 20px;

Specify selectors and rules on a new line

Bad code

Element (display:block;position: relative;padding:5px 10px 15px 20px;)

Good code

Element (
display: block;
position: relative;
padding: 5px 10px 15px 20px;
}

Enter zero values ​​without units

Bad code

padding: 10px 0px;
margin-left: 0%;

Good code

padding: 10px 0;
margin-left: 0;

Write comments

Separate the main blocks with comments, this will improve the readability of the code.

Example:

/*HEADER*/
header (
}
/*HEADER END*/

/*MAIN*/
main(
}
/*MAIN END*/

/*FOOTER*/
footer (
}
/*FOOTER END*/

Check the CSS code for validity

Conclusion

These guidelines and rules are just the basics, as HTML and CSS languages ​​are evolving faster and new methods of writing correct code are being developed. By following our recommendations, you will be sure that your code is simple, easy to read and optimized. You will also receive +100 karma and gratitude from the developers who will work on the site after you.