CSS in sublime text: how to make it and what to take into account

Every web developer has their own favorite code editor. While some use integrated development environments, others prefer simpler techniques, such as Sublime Text, an editor that is used to write different types of code and, additionally, also holds the possibility to generate CSS in Sublime Text.

Before starting, we must highlight the main feature of this code editor: it is highly modular. It’s thus perfect for those who are looking for something simple, as well as for those who want a few more plugins to make programming easier.

Let’s see in detail what Sublime Text is, its features and how to make CSS in Sublime Text. Interested? Let’s go!

What is SublimeText?

Sublime Text is, as we’ve mentioned above, a code editor. In this case, it is an example of a commercial editor that supports many types of programming and markup languages natively. Furthermore, it is a tool that can be greatly improved with packages and extensions created by the community and based on free software.

The first version of Sublime Text was released in 2013 and the latest one, version 4.0, arrived in May 2021. It is a code editor that has become established so that more and more professionals use it as part of their daily work.

These are some of the main features that can be found in Sublime Text:

• Quick navigation to specific files, symbols, or lines of code you are working with.
• Simultaneous editing: In Sublime Text, you are able to select several areas of the code and make the same change simultaneously.
• Great customization capacity thanks to the plugins developed by its community.
• Compatible with a multitude of programming and markup languages.
• Function of command autocompletion, as well as autocompletion of parts of the code to avoid certain errors.
• Cross-platform code editor that supports Windows, macOS and Linux.
• Compatible with different grammar systems and languages.

Sublime Text is a paid editor, but it offers a free trial version for a limited time.

What is CSS and what is it for?

Before delving deeper into how to make CSS in Sublime Text, it is also advisable to review what CSS is and what its main characteristics are. As you probably already know, CSS is the style sheet that is needed to create any web page.

This means that CSS is used to provide a certain visual style to a website. CSS is not a programming language itself, but rather a graphic design language for web development that is complemented by the markup language that is HTML5.

While HTML5 helps programers create a structure and layout for a web page, CSS is linked to this programming language and is in charge of providing a specific graphic style and a visible interface for the web page.

CSS saves programmers a lot of work by keeping all the information about the visual style in a single editable file, making it easier to make any changes

The style sheets created for CSS are saved as independent files and inserted into the HTML structure so that they can be used as a reference to provide the website with a graphic and visual style.

Just like with HTML, other markup languages, or other types of code used for web page and application development, CSS in Sublime Text is also possible. 

As we’ve mentioned above, this code editor has a large, very active community that offers a multitude of plugins and tutorials to learn how to work with it. Now we are going to see how to generate CSS in Sublime Text and how this editor is used for web development.

How to generate CSS in Sublime Text

The first thing you should know is that all the necessary packages to work with CSS and HTML5 are already integrated as part of Sublime Text. This means that by simply downloading this code editor you can start working.

The only thing you need to know is create the file in the editor and start creating the CSS style sheet. However, there are some interesting packages that improve and make it easier to generate CSS in Sublime Text, as well as other general web development tasks in Sublime Text.

• Emmet. This package is used to automate the creation of HTML blocks through the use of abbreviations.
• HTML-CSS-JS Prettify. This is a plugin used to format and layout both HTML and CSS or JavaScript. Bear in mind that it is necessary to have access to a specific plugin for it to work correctly, since it is executed through JavaScript.
• ColorPicker. This package is especially useful for creating CSS in Sublime Text as it gives users the option to not switch windows to search for a certain color code. Additionally, it includes a kind of color selector to make it easier to integrate windows  into the style sheet.
• AutoFileName. This is a very simple but very useful package aiming at allowing files to be linked using href tags.

As you can see, generating CSS through Sublime Text is very easy and can be done in a simple manner after installing the editor. However, certain packages will make your life much easier. While we’ve included a few examples in the list above, the community surrounding this editor offers many similar or better packages for free.

Get trained in front-end development!

CSS is just one of the codes you need to master if your aim is to become a front-end developer. If you want to explore this profession on a deeper level, you must also master HTML5 and JavaScript. The combination of these 3 make a website fully functional and usable.

In this sense, Sublime Text is a tool with which you can work to create CSS or any other code, since it supports different programming languages and represents a good starting point for learning web development. However, if you wish to go deeper, the best option will always be to undertake specialized training.

At Tokyo School we offer our Front-End Web Programming course: HTML5, CSS3 and JavaScript, a program which will help you master the three basic pillars of web development. Get in touch with us to learn more and get answers to all your questions. We can’t wait to meet you!