Is writing CSS code considered programming?
Programming languages formulate a series of instructions through which a computer performs operations. In contrast, style sheets such as CSS carry information about the appearance of structured documents (for example, HTML or XML files), and they also define the layout, fonts, colors, and so on.
Is CSS a programming language?
So if we want to answer the question above, we can say that CSS is not a programming language but a style sheet (CSS = Cascading Style Sheet). However, in advanced levels, there are many complex options in CSS that are close to programming.
In this article, we are going to look at what stylesheets are, how the syntax of CSS is structured, what you can do with HTML documents with the help of styles, and what extra options you have with CSS if you master the language.
What is the difference between programming languages and style sheets?
With programming languages, we formulate a series of instructions, the steps the computer needs to do to complete a task.
There are languages that are closer to machine code and further from human languages (like Assembly), and there are high-level programming languages that are closer to human languages and further from machine code (like C# and Java).
There are countless programming languages, and their number will only grow, so there are always new ones to talk about, new libraries to explore. We can categorize them in many ways—for example, there are object-oriented programming languages, functional languages, or we can classify them according to their use. If you want to read more about programming languages, you can find a lot of interesting articles in the CodeBerry blog chapter titled “Programming Languages”.
Style sheets are languages that we use in informatics to format and display structured documents (like HTML or XML). A style sheet determines what style rules apply to each element of the document, what colors, background, layout, fonts, etc. the browser displays.
Some examples of style sheet languages:
- CSS (Cascading Style Sheets)
- XSL (Extensible Stylesheet Language)
What is CSS?
We already know that CSS stands for Cascading Style Sheet and that it is the most commonly used style sheet language. It allows you to specify how the browser displays elements of the HTML document.
Although formatting is possible in HTML (for example, you can specify color, font thickness, and layout), it is not common to write style information in HTML documents, because formatting each element separately would be very lengthy and difficult to maintain the process, and you have much more limited options. Therefore, an external CSS file is usually attached to the HTML document, which can handle the style instructions of many elements at once and overwrite them automatically if necessary.
There are also great options for creating complex, tricky, and sophisticated designs (for example, with the help of Flexbox or Grid technologies).
The syntax of CSS
CSS statements consist of selectors and properties, and the values of said properties.
A selector selects which HTML element needs to be changed. Then you can add the properties within the curly braces (like color, font, size, layout, etc.), and their values next to them. If an HTML element has multiple lines of formatting, these are separated by semicolons.
The general structure:
This is how centring a paragraph and changing its color looks like:
There are many other options if we are on an advanced level: we can create websites that are compatible with many screen sizes or animations, and the design can even react to user input.
The same HTML framework, different styles
If you look at the examples below, you will see that the text is the same, and the HTML code behind the content is the same as well. Still, we can create two very different vibes if we give different styles to the websites with CSS.
- On this website, you can look at the development of web design from its beginnings until 2020. By using the slider, you can change the CSS styles to more modern forms, but the HTML stays the same. – Evolution of Webdesign
- CSS Zen Garden is a well-known website that shows you how to display the same HTML file in many different ways. It can be useful to see many of these designs so you can understand what elements the site’s creators changed and how. – CSS Zen Garden
Some interesting facts about the features of CSS
In addition to formatting the contents of a website and modifying colors, fonts, and layouts with CSS, we can also create other spectacular things with it. Below are some examples of exciting possibilities that can be implemented with CSS.
Clear, nice looking photos—if you hover your cursor over an image, you can see a bigger version of it.
Spectacular image layouts
This gallery is a joy to scroll through. You can scroll through pictures using the arrow buttons—the creator used 3D transformations to make this website.
This progress bar or any other 3D-looking element (that might function as a diagram) can be created by a few CSS tricks.
Source: Pure CSS Progress Bar
CSS isn’t for creating games, but there are many people who create games purely with HTML and CSS as a challenge.
You can find games collected on the websites below, and they are all based on CSS tricks.
Advanced CSS technologies and programming
If we go beyond the level of giving simple formatting to elements of your HTML document, such as colors, font size, font type, etc., we get to advanced technologies, where we can find solutions to problems that look more like traditional programming.
In CSS, we can declare functions, use object-orientation, and build a transparent, easy-to-maintain modular system.
CSS preprocessors are CSS extensions that can generate CSS code, meaning we can automate steps using programming methods. There are many preprocessors, but the two most known ones are Sass and Less.
These help create and maintain the CSS structure of complex apps and websites, and create transparent code that can be edited by many people. With them, we can use embedding, loops, and inheritance in CSS.
In the area of preprocessors, CSS and programming intertwine, and even though we stated at the beginning of this article that CSS is not a programming language, if we supplement it with advanced technologies, programming concepts and operations can appear in CSS too.
Is learning CSS worth it?
Up-to-date, high-level CSS skills are valuable in the labor market, and although you can learn the basics in a short amount of time, there aren’t many web designers who are masters of CSS. In the field of design and implementation, there is always room for improvement.
If you are interested in learning programming but you haven’t decided on where you want to begin, you can use the following article: “Which programming language should I choose?”. You can find helpful tips to make your decision easier, and you can also see how popular the languages of web development (including HTML and CSS) actually are.
If you’d like to see more programming tutorials, check out our Youtube channel, where we have plenty of Python video tutorials in English.
In CodeBerry Programming School’s “Beginner’s Guide” series, we’ll be answering questions you may have regarding what programming language to choose, how much money you’ll be making, what you can do as a web programmer, and where to start.
- A Brief Introduction to Web Development
- Beginner’s Guide to Java Programming Language
- Beginner’s Guide to Python Programming Language
- Beginner’s Guide to C++
- Beginner’s Guide to PHP
- Beginner’s Guide to C#
- Basics of Android Programming – Java or Kotlin?
- Is HTML a programming language?
- Is CSS a programming language?