At first it will seem to some that this is not at all the right tool, but viewing the entire HTML code of a site is great for searching within the code necessary elements, these can be links, tags, meta tags, attributes and other elements.

Hotkey combination +open the search window, in the Chrome browser it appears at the top right:

Figure 3. Search by site code

After you enter a request into the search form, the screen will move to the first element found, using the arrows you can move between them and select the one you need:

Figure 4. Search by HTML site code

Instruction 2: how to view and edit the HTML and CSS code of a site in the Google Chrome browser

Now the most an important part, in which I will show how you can edit the HTML and CSS code of a website in a browser. then transfer the changes to the browser.

Like this useful tool always available in your browser, experiment with other commands that will make editing your site easier.

The size and color of some important elements of the blog - such as the title of the blog or post, the more tag, and the like. I searched for the required code manually, experimenting with the test domain, on the basis of which the article was later written.

And recently I needed to change the color of links. Having sifted through a bunch of literature on this issue, I realized simple thing: everyone gives examples from own templates, but we all have different templates and it’s good if the code from the example is at least a little similar: if you don’t whine, I’ll still find it by searching - at random.

The number did not work with the link code. Everyone pointed completely different paths. I wondered if there was a simple and accurate tool, how to find required code html on any site. Many bloggers, even with experience, have difficulty in minor modifications to the template. There is nothing wrong with this, because everyone has their own interests and goals for creating a website.

If you want to deposit minor changes into a template, for example change any heading, title of articles and sections, color and size of fonts and links, Usually it is enough to learn the simple principle discussed in this article. But there are also complex cases that require either deeper learning html and css, or the help of a specialist.

One day, an acquaintance asked me to find where to change the color of the category panel in his template. Uploaded a topic to a test subdomain. The settings for this element were not stored in style.css, but in another file, so a person could not find it.

How to find and change the html and css code of a site

If you don't like long articles, this is for you at the end of the article a video tutorial that tells how you can see the website’s html code using Notepad++ and make changes to the design of any template using an example of how to change the font color. In the video there are other subtleties of handling a blog. And for those who are closer and clearer to the text, below detailed analysis themes with screenshots.
httpv://youtu.be/uIlVvwCt2ho

Terms and concepts

It would be more accurate to title the article “ How to find css code “, but I decided to go with the “wrong” name, because basically the answer to this question is found in html. CSS and HTML are very different things, even though they are two parts of the same system. There are many technical articles on the Internet, here it will be enough for us to understand that:

• HTML— is responsible for the structure of the site (what follows what, in what order, etc.). This is the basis on which the site is created. If we compare it with a house, then this is its layout, the arrangement of rooms.
• CSS— is responsible for the design (what fonts, sizes, colors, etc.). This is the general style of the house and the style of its individual rooms: what kind of wallpaper there will be, lamps, curtains, furniture. Therefore, the document that states css codes, called "style sheet"

And if you are wondering how to change, for example, the color of the site title, the font size in the texts, or the color of the headers in the sidebar, then you need to look for all this in the CSS style sheet. This is the only thing worth understanding first in order to make changes to the code yourself.

I like to make the complex simple. I remember a long time ago, when I had my first car, it was very old, the wiring was rotten, fuses often blew, and every time I towed it to the service station. Imagine how much money was wasted, given that self-replacement, as it turned out, costs a penny.

One day I looked at what exactly the master does. I still don't know how the fuse works. But I know where to change it). I wouldn’t repair the motor myself, and it’s not difficult to replace the fuse. It's the same with websites.

If you don't want to become a programmer, then there is no need to have a deep understanding of programming. It is sufficiently clear to understand what is intended for what, where to look for it and how to change it. It’s better to change what you can yourself, and leave everything else to specialists. In the article about there is useful link about this theme.

Do you need to be an expert in everything?

There are often discussions on SEO blogs about whether a beginner needs to have a deep understanding of HTML, or even better, learn how to write websites themselves so that everything is unique.. Well, I don’t know - to each his own, and here what’s closer to whom is closer. I’m interested a little more, so I’m now learning more from Vladimir. In November of this year, Vladimir opened his own blog. His blog is made in the simplest way, free template, he only slightly changed it to suit himself.

After 10 days of existence, the blog took 104th place in the ranking of all Runet sites with a traffic of about 1.5 thousand people per day. In 10 days. So what's the deal? Vladimir is well versed in HTML, he can order and buy it for himself unique template. So you must understand that The secret lies not in the templates, but in the usefulness of the information.

Where is the html code hidden?

Sorry for the digression, let's return to our codes). Let's say you want to change the font color of your blog title. Let's look at the example of my test site.

1. Opening the site in Google browser Chrome (if you don’t use it yet, install it - it’s well designed for working with websites, it has a lot of built-in tools).
2. We move the mouse cursor over the element that we are going to change . IN in this case- to the name of the blog. We right-click on it and in the window that appears, select VIEW ELEMENT CODE.

IMPORTANT: do not confuse this with VIEWING THE PAGE CODE! We don't need the whole page right now, just separate element.

Click on it - a code viewing window appears at the bottom of the browser:

The line of code that we are changing is highlighted in red.

But the area highlighted in blue contains what we are looking for. This is where you can find the exact (not approximate) line of code responsible for fonts, color, size, highlighting, etc. This way you can find out ANY code of any element of any template.

Find the desired line in the block highlighted in blue. There is a slider on the right, you can scroll through and find the line you need.

General principle where to look for something:

Font name - in the FONT FAMILY line

Font size - in the FONT SIZE line

Font color - in the COLOR line

Here are three main lines in which the name, size and font color of any element change. Right in line style css The position of the line in the document is given. If you need to change some other element (for example, you need to find out where the line is where you can change the color of the menu bar or the color of links), everything is done exactly the same.

ATTENTION:

The line that we will copy is highlighted in red in the figure,

so that you can later find it in the style sheet.

4. Copy the line. Since in this example we want to change the color of the site name, I copy the line highlighted in the red rectangle in the second picture. In my template, it is responsible for changing the color of the site title:

#header h1 a, #header h1 a:visited (

Find the required line in the file “style sheet (style.css)”. This is already done in the admin panel. I strongly ask that, while there is no confidence and complete understanding, all experiments should be carried out on a test subdomain in order to exclude .

So, go to the admin panel: CONSOLE - APPEARANCE - EDITOR. In the right sidebar we find the file STYLE TABLE (STYLE.CSS), open it.

Now open the search bar CTRL keys+ F: an empty line-window will appear in the top window. We paste into it the line that we copied in step 4.

And you will see how this line will be highlighted in the style sheet (in orange in the picture):

We make a change to the element. In our case, we are changing the font color, so in the COLOR line we substitute another value - the color we want. In the example, the color is black, its meaning is:

You can choose a color in any web color palette service: type “Web color palette” in a search engine and select the one you want. We select a color, copy its digital value and carefully replace it with the old one. after which we click UPDATE FILE and go to see what happened.

If the changes are not displayed, for the past hour and go to the page again - this time everything should be displayed.

It takes a long time to describe, but in practice everything is done quickly, especially when the initial skill appears.

In more detail, how to change certain elements:

That's all for today, I won't bother you with codes anymore. I hope that now you yourself can easily find and change any element of the html code, or rather, the css code - may the experts forgive me for simplifying it. And if you don’t figure it out, still visit the page. Don't waste your time on nonsense.

I suggest watching Artem Abramovich’s video on how to search and find any word or element in any theme/template, for any engine (wordpress, joomla, etc.) and replace it with what you need:

Please share if you liked it:

You might also be interested in knowing:

If you open any web page, it will contain typical elements that do not change depending on the type and focus of the site. Example 4.1 shows the code simple document, containing the main tags.

Example 4.1. Web page source code

Heading

First paragraph.

Second paragraph.

Copy the contents this example and save it in the c:\www\ folder as example41.html. After that, launch the browser and open the file through the menu item File > Open File (Ctrl+O). In the document selection dialog, select the file example41.html. The web page shown in Fig. 1 will open in the browser. 4.1.

Rice. 4.1. Result of running the example

Elementis intended to indicate the type of the current document - DTD (document type definition, description of the document type). This is necessary so that the browser understands how to interpret the current web page, because HTML exists in several versions, in addition, there is XHTML (EXtensible HyperText Markup Language), which is similar to HTML, but differs from it in syntax. So that the browser “does not get confused” and understands according to which standard to display the web page, it is necessary to set in the first line of code .

There are several types, they vary depending on HTML versions, to which they are oriented. In table 4.1. The main types of documents with their descriptions are given.

The difference between a strict and transitional document description is a different approach to writing document code. Strict HTML requires strict adherence to the HTML specification and is unforgiving of errors. Transitional HTML is more relaxed about some code flaws, so this type is preferable to use in certain cases.

For example, in strict HTML and XHTML the presence of the tag is required

Tag