Program for decoding css style. List of useful tools for CSS developers

Today I want to talk about a simple but very useful algorithm for editing CSS template styles for Joomla websites. I would say that the algorithm itself is much more universal and suitable for any type of engine and website in general, I’ll just give examples when editing the design of website templates on Joomla, since this is what I’ve been doing quite often lately.

Why edit template CSS styles?

Of course, if you are reading this article, then you already have a reason, but many are only guessing why this is necessary. Therefore, for example, we can say that you created a website for yourself or someone else, added a template that interests you, but in the end one or more details do not suit you for some reason, for example:

• Very big size title fonts in template styles;
• you are not happy with the background color of the template or individual elements design;
• I want to change the size or location of certain elements or fields, for example a logo, etc.

All these seemingly little things very often upset webmasters and force them to ultimately decide either to hire a web designer to edit it, or to install another template. This article will help you edit website templates independently and for free.

Where is the required CSS file?

IN modern templates Joomla and other CMS usually contain many folders that contain files that support the operation of certain modules, output styles, etc. Almost always, the files responsible for the template design are located in the template folders called CSS. Such templates may have several folders with the same name, and the folders themselves may contain many files with the .css extension, and you need to clearly understand which file needs to be edited.

For this, in Firefox browser There is such a useful tool as element research. Next I will give examples. Let's edit the position, height and background color of the field intended for displaying the site header.

So, on the area of ​​interest that needs to be edited (for us this will be the site header), click right click mice. In the proposed menu, select the item Explore element. After this, the element under investigation will be highlighted with a dotted frame and an additional console will open, where the code of the page and the element itself will be displayed (let me remind you, in the example, the site header) - see the screenshot below.

I should immediately note that I have Lubuntu OS installed on my laptop, so the graphics of your programs and applications may differ, but this is not of fundamental importance.

On the right we see the HTML code of the template, but since we need to edit the CSS file responsible for the display style of the site header, we go directly to it by clicking on its name (click where it is shown in red in the screenshot above). As a result, the required CSS file opens for us (see screenshot below).

Convenient thing! You are immediately shown the desired section of code, which makes your work much easier! But before we start tricks with design, let's analyze in basic terms the piece of code that we will edit. I'll quote it below:

Td.logoheader(
margin: 0;
padding: 0;
background: url(../images/123.png) #4B6B94 no-repeat bottom center;
height: 146px;
width: 100%;

td.logoheader - the name of the site header in the CSS file

background - the background of the site header, which consists of a picture ( url(../images/123.png)) and from the background color html code ( #4B6B94), as well as from the rule that tells the picture not to be replicated ( no-repeat) and be at the bottom center ( bottom center)

height - height of the site header in pixels (in in this case- 146px)

width - the width of the site header in relation to the template, in the example expressed in % (100%)

To change the background color, the size of the site header and the fo new picture We will make changes to the background and height parameters, we will not touch the rest.

Where should I make changes to the CSS file?

The most interesting and pleasant thing is that We will make changes to the code directly in the style sheet editor in the Firefox browser(see second screenshot). And what is very convenient, changes will be displayed in real time and only for you! This way you can conduct experiments, find optimal solution in the design and only then make residual changes to the template’s CSS file! Agree - this saves a lot of problems :)

For clarity, let's make the following changes:

• make the site header height 200 pixels
• change the background color, for example, to white (html code white #fff)
• move the image position to the left and up
• Well, we can change the picture itself (I uploaded the second option via FTP to the server in advance in the folder in which the existing current picture is located. The name of the new picture header.jpg)

By the way, in order to find out exactly the path to the folder in which it lies desired image, you just need to right-click on the image itself in the browser, then select Open background image and in the browser line you will see full path from the domain to the name of the file itself :)

And let me remind you once again that I make all changes to the code directly in the browser editor, so see the result of all the above changes in the screenshot below.

What problems might you encounter when finalizing the Joomla template CSS file?

It seems that we have already practiced in the browser editor and decided on changes in the design. Log in to the server via an FTP client or through the hosting file manager, download the required CSS template file, open it in Notepad++ (or text editor JuffEd, if you have Ubuntu), make changes to the file itself, save, upload the changed file to the server, but in the end no visual changes occur? What should be done:

• Check the permissions of the CSS file being modified. If chmod is 444 or 644, then change it to at least 755. After making changes, return the chmod value to its previous state.
• refresh your browser cache - press CTRL+F5 at the same time

These simple manipulations should help :)

CSS is a styling language that defines the display of HTML pages. With this language you can control fonts, colors, sizes, positioning and many other elements of a web page. Any modern theme uses CSS in its markup. WordPress templates are no exception either.

Why edit CSS on a website?

There is often a need to change some design elements on a website. For example, logo size, background color, or insert a new block. Thus, many WordPress themes have a special settings window for this, which allows you to easily set new display parameters for one or another part of the site. But theme developers cannot provide for all the design nuances and add the ability to quickly edit them. Therefore, you often have to make changes yourself.

Editing CSS in WordPress

There are several ways to edit the styling language in WordPress. We will look at two of them, which are the easiest for users.

Editing on the theme settings page

Most modern WordPress themes allow you to add CSS code directly in the settings. To do this, just go to the admin panel Appearance -> Customize, choose Additional styles and paste into the field required code, then the button Save and activate.

Editing in the WordPress admin panel

So, to edit CSS files through the admin panel you need to go Appearance -> Editor. As a result, you will be taken to the WordPress theme editing window.

Here you need to select the theme you want to change. Further on the right, in the list of theme files, you should find and click on the item Style sheets style.css.

An editor window will appear in front of you, in which you can edit the style file.

After entering all necessary changes don't forget to press the button Update file. That's it, your edits have been applied and are displayed on the site.

Style Master v 5.0 (for Mac OS X), v 4.6 (for Window) 1997 - 2016 Interface and help in English. language. Weight 8.79 MB. Price: $59.99 After the trial period (30 days) ends, the program will continue to work in a stripped-down free version.
Works on Windows 2000/NT/XP/Vista, Mac OS X.

The purpose of the program is to create CSS style sheets. Create style sheets based on your HTML. Editing CSS, as well as PHP, ASP.NET, Ruby, etc. Support for CSS3 and HTML5. Copyright information on the Internet (English)
Download

TopStyle Pro v 5 (1999 - 2006). Interface and help in English. language (there is a localization). Price $79.95 Available free version programs (TopStyle Lite).
The purpose of the program is to create CSS style sheets for web pages.
CSS3 and HTML5 support. You will have access to all the latest tag features and properties.
Preview HTML and CSS while you create CSS rules.
TopStyle supports IE, Chromium, Firefox and Safari browsers.

Astyle CSS Editor

Astyle CSS Editor v 3.8 Beta 8. (2003 - 2008). Interface and help in English. language. Weight 1.48 MB. Free program.
Works in Microsoft Windows 98, Me, NT 4, 2000, XP.
Astyle CSS Editor is a visual editor for CSS style sheets.
The work is carried out in visual mode, without writing code.

LiveStyle is a program designed for editing CSS style sheets in real time. Weight 44.7 MB.
Any changes you make to the style sheet are immediately reflected on the current web page (without refreshing the page).
LiveStyle is installed as an extension for Google browser Chrome or Sublime Text editor, and can work with projects of any size: from small one-page sites to huge websites. And you can even work with your website.
When you install LiveStyle, for example, as an extension for Google Chrome, the program icon appears in the browser toolbar.
Video review
Download

LiveReload v 0.9. Weight 10.3 MB. Works on Mac, Windows, Linux.
Used as extensions with Safari browsers, Chrome, Firefox and Mobile Safari). In its functions and purpose, LiveReload is similar to the LiveStyle program.
Download

Simple CSS v 2.3 (2016). Interface in English language. Weight 5.9 MB. Free program. Works on Mac OS X and Windows.
Simple CSS(" Simple CSS") - simple program on creating style sheets in CSS2 format.
Allows you to quickly style the main area of ​​the page (the area ), headings, tables, lists, links.

Free CSS Toolbox

Free CSS Toolbox v 1.2 (1999 - 2008). Interface in English language. Weight 1.4 MB. Free program.
The purpose of Free CSS Toolbox is to create, edit and check CSS code.
The program also includes search, CSS Validator, CSS Formatter, CSS Compressor. Currently, the development of the program has been discontinued; it has been replaced by another program by this author, Rapid CSS editor.
Download

Rapid CSS editor

Rapid CSS editor 2018 v 15.4 (2004 - 2018). Interface in Russian, help in English. language. Weight 24.7 MB. Pricing: Rapid CSS 2018 - $49.95, Rapid CSS Personal (personal use) - $39.95 Works on Windows XP, Vista, 7, 8 10.
The purpose of the program is to create style sheets (CSS). At the same time, Rapid CSS editor can also be used to work with HTML pages.

ArduoCSS Editor

ArduoCSS Editor v 1.0.0. Interface in English language. Weight 5.3 MB. Free program.
The purpose of ArduoCSS is to create CSS style sheets.
The work is carried out in visual mode. Preview available. Easy to use program.

Reorientation of different computer programs on applications hosted on the network continues. This trend has not bypassed different programming environments, which, in principle, is logical. Where else but on the Internet is it best to store and edit code, especially when it comes to . Today I suggest you read about useful service called CodePen (Kodpen) - one of the best visual online editor ov HTML, CSS, JavaScript code.

This tool is very interesting and convenient; I used it a couple of times on blogs to demonstrate the layout: in an article about and in a note about the horizontal menu. Below I will tell you in detail about the features and advantages of Codepen, and also consider the use of this online code editor in practice.

Key features and functions of CodePen

It should be noted right away that the service in question does not cover the entire variety of programming languages. This is probably a rather difficult task to implement. online solutions, it is better in such cases to use specialized software like Phpstorm, etc. Codepen is purely Web-focused and supports the language HTML markup, Cascading Style Sheets CSS + JavaScript, which is most often used in website creation. These three areas are quite enough to ensure the demand for the service in a professional environment.

In principle, CodePen's capabilities are somewhat similar to various code editors that many people use in their work: from Notepad++, Sublime Text to something more complex like Webstorm. Of course, I’m not talking about a complete copy of all software features, but only about basic functions writing code. However, at the same time, this CSS / HTML online editor has unique features distinguishing it from the competitors mentioned above. I would highlight 4 key aspects.

1. Universal accessibility

Publishing the developed code or its fragments online allows you to share them with other users. Just send a link to a particular page to view. You can also embed projects created in the service on any website as an example.

Plus, you will always have access to your layout or snippets from anywhere, even if personal computer unavailable for some reason. All necessary information stored online.

2. Ease of operation and online code viewing

Availability virtual server Kodpen makes it possible to view the code together with the result of its execution. There is no point in installing and configuring the server and additional applications on local computer. Despite the fact that they are quite easy to use, the option with a visual online code editor does not require any effort at all. This approach is very convenient for.

3. Professional tools

The creators of CodePen try to provide you with the best possible best experience development. Therefore, in the service settings there are a couple of interesting things that many specialists will appreciate:

• For css, the editor allows you to use the Normalize.css or Reset.css libraries. You can also connect -prefix-free / Autoprefixer.
• There is integration with CSSLint, which checks the correctness of the written .
• Support for Emmet and Vim Binding with various hotkeys and tricks to speed up coding.
• This visual online editor for HTML CSS and JavaScript works correctly with preprocessors: HAML, Markdown, Slim for HTML, styles - Sass and SCSS, plus CoffeeScript in JS.

And all this without installing any additional software on your computer!

4. Existing community

Another reason to use CodePen is enough a large number of experienced programmers registered there. The site has long become a platform for communication between specialists of all skill levels. Sometimes you can get advice from more advanced developers or hints on errors.

The resource also has social functions: subscriptions, likes, comments. There's even an option for topical notes. Tag your projects to make it easier for people to find your snippets. Availability of examples different tasks and solutions allows you to be aware of the main current trends in web development. You can save your favorite implementations. Browse the work of other programmers for inspiration or self-study.

In general, this list does not at all pretend to be textbook complete; there are more on the website whole line other chips. However, in part, I think I was able to show the main advantages of the online CSS and HTML code editor over my local competitors.

How to use Codepen

To get started on home page you need to select “New Pen”, thereby creating new project(here it is called Pen). You will see an empty “blank” consisting of 4 windows.

The first three windows of the workspace are used for writing code in HTML, CSS and JavaScript. Below in the editor you will see the corresponding result of the project implementation. The environment display configuration can be changed at your discretion, for example, minimizing windows, etc.

In the settings (gear icon) you can select the desired preprocessor for HTML, CSS, and the ones we talked about above. For JS, it is possible to install plug-in libraries, JQuery, for example. Customization each project online HTML editor code is a very useful tool.

Also, when coding, you must not forget that all links and URLs in CodePen must be absolute (not relative), i.e. point to the full address of the resource.

To publish the developed example, you will find 3 buttons in the lower right corner of the page:

• Share - sharing in in social networks(FB,

A-priory CSS- these are cascading style sheets, they are mainly used for design appearance web pages. Before creation CSS, to set, for example, a certain page background in HTML, you used tags, but if your site has, for example, 100 pages, then you need to change the attribute on 100 pages, you must admit this is very inconvenient. But when the tongue came CSS, we were able to create specific file, in which we can specify properties certain elements, even if there are 100 of them. Now there is a very positive trend on the Internet that HTML is only responsible for providing information, and CSS for registration.

1 place. Stylizer

The main representative of CSS editors working on Windows. This utility greatly simplifies the process of writing and editing code. This is done through clarity; the program can help you mark up CSS styles directly in the browser; this method is much more convenient than using external editors. You simply enter the site address in the built-in browser and in the first block of the program you can directly edit styles.

2nd place. Style Master

The program is rightfully considered one of the main tools for building CSS structures. This editor allows you to edit multiple files at once, can create style sheets using your HTML code, also directly edit CSS and supports editing via FTP.

3rd place. CSS Toolbox

Simple, convenient and free editor CSS, thanks to it, writing is greatly simplified CSS tables. Contains many new tools for generating style sheets. Also has a number distinctive features: code highlighting, code autocompletion, tag substitution, automatic check CSS code, CSS compression file and much more.

4th place. CoffeeCup StyleSheet Maker

The peculiarity of this program is that it optimizes styles for browsers Internet Explorer, Netscape and several others. The program was created by the CoffeeCup organization. With this program you can create simple and elegant websites using a combination of HTML and CSS.

5th place. CSSEdit

When working with this program, you can observe the changes that are made to the style sheet as you work visually. Working with the program is very intuitive and clear, with new versions some glitches have been fixed and new features have been added. Visual editor code really helps a lot when developing websites.

6th place. Jellyfish-CSS

When working with Jellyfish-CSS, you are amazed at the ease with which the program can work. It also has support for various libraries that have various functions, for example, help to avoid mistakes when writing a table, and many others. The only downside is that the program is paid; on the Internet, of course, you can easily find both cracked versions and trial ones.

7th place. Snap CSS

Working with this editor is similar to working with notepad. The developers of this program have worked hard to make working with it simple and straightforward. The editor has excellent optimization features for the readability of style sheets. This program makes life much easier for programmers by saving effort and file size.

8th place. Simple CSS

Small, but powerful tool for working with CSS, allows you to program without editing a single line of code, which means you can create a style sheet without having any programming skills. The program functionality includes compression CSS file, supporting multiple types of formats and the ability to manage multiple projects.

9th place. TopStyle

Using this program, it is possible preview table, while you are editing it, there is support for multiple browsers, in which each table is displayed differently. The program supports Unicode, online check spelling, combining styles into groups, intuitive editing, etc.

10th place. tsWebEditor

This editor is multilingual, supporting many languages ​​such as HTML, PHP, Perl, javascript, CSS and many more. It has auto-completion functions, code highlighting, syntax checking, supports functional hints, Unicode, and has a large number of code templates, which greatly helps WEB masters.