Quick CSS Constructor

Quick CSS Constructor

There are many different ways to build a website. But there is only one leading way to make the website look attractive. This can primarily be done by applying styles to specific HTML elements. Thus, declaring how the specific elements are to be displayed. These style declarations are usually written down in a separate Cascading Style Sheets file (CSS file), that is linked by the HTML file.

The appearance of almost every HTML element is modifiable. Each HTML element, that has to be modified, is targeted by a so-called selector from inside of the CSS file. Depending on the complexity of website design, the CSS file grows in lines and gets cluttered quickly. When you are working on many different website projects simultaneous, it can be quite difficult to stay on the top of the things.

But creating Cascading Style Sheets can also be done with less pain, if the right tool is available and the approach is correct. Quick CSS Constructor is a toolbox with the main purpose: It facilitates creating and managing CSS styles.

One important principle to preserve clarity, is to make a distinguish between superior and subordinate parts of something. In our case, it means, splitting (visually) selectors from declarations (which are nothing else but property + value).

This is realized by having selectors and properties in separated lists. First you choose a selector from the selectors-list, that targets an HTML element. Afterwards (only) you will be able to add a declaration from the property list or change an existing declaration. This way you construct the code consciously, step-by-step, and the resulting change appears in the code output box immediately.

Another principle to preserve clarity, is to make visible the difference between common and custom. Here: simple type selectors and custom selectors. This is solved in Quick CSS Constructor by color-coding different selector groups: IDs have a green, classes a blue and custom selectors a yellow background. All other selectors are coded white.

The third important thing to preserve clarity is, to keep all relevant information together. It’s always advantageous to have all needed information collected in one easy accessible place, to prevent long searching and getting lost in tons of irrelevant files.

The integrated “Session Manager” offers a possibility to store any number of CSS styles. You can switch between them, exporting the necessary code or extending it, but having the originals always in a sure place, within a collection.

Quick CSS Constructor has all known simple selectors and properties “on board”. They are tightly integrated and are ready to use. So, there is no need to waste time on searching the right words in the internet or books. Just choose the necessary selector from the one list, add some properties from the other one and fill in property values – and a rule, that styles a HTML element, is ready.

Beside simple selectors, with Quick CSS Constructor, you can also build custom complex selectors or chains of selectors and integrate them into your style sheet. The usage of complex selectors is widespread nowadays. They allow to work more precise, more dynamic.

The function of adding web files into a session allows to extract automatically all available IDs and classes from the file. This files can be located either on a local drive or on websites online. So, if you have a website project and all IDs and class-names of tags (that you want to modify) are set, load the project files into Quick CSS Constructor and accelerate your work flow.

There is also a safety technology integrated: Extracted IDs and classes from files, will remain (until they get removed manually), in case that the project files are at an unreachable place.For example: You have previously added files from an online source and currently you don’t have access to the internet. Another example: You worked on a project, that was on a lent USB-Stick, but you forgot to make an copy of the last version and gave the stick back. Nevertheless, your CSS data is safe.

Other noticeable functions:

+ Adding at-rules (@charset and @import)

+ Code, that includes anchor pseudo-classes (:link, :visited, :hover, :active) gets automatically sorted by the integrated sorting algorithm, to make the result effective

+ Copying all code to clipboard with two clicks

+ Working in fullscreen mode

+ Working window size and position gets remembered and recalled on next launch

+ Unready code can also be exported / saved / or what

+ Intuitive, smooth and balanced workflow

+ All main interface elements are resizeable: Everything will fit and look good at the same time.

+ Predefined unique session names

+ Supports HTML5 and all previous versions

+ Supports CSS3 and all previous versions

+ Imported documents, that are unreachable get marked as such

+ ID- and class-names from files and custom selectors are color-coded for a better clarity

+ Current block of code you are working on is highlighted for a better clarity

+ Serious and user-friendly documentation. PDF file with screenshots

Good luck & happy creating!