What is CSS?
Short for ‘cascading style sheets’, CSS is the language developers use to define the overall presentation of a web page, including its colours, fonts, and layout.
If you want to gain a more in-depth understanding of this topic, check out the FAQ section below:
Question #1: What is the basic syntax of CSS?
The basic syntax of CSS is as follows:
Selector {
Property 1 : value;
Property 2 : value;
}
‘Selector’ refers to the specific element you are looking to target. ‘Property’ refers to the specific attribute you want to modify. Finally, ‘value’ refers to the specific value you want to change ‘Property’ to.
For instance, you wanted to change the colour and alignment of the header of a page on your website to green and aligned right, then you would use the following code:
h1 {
Color : green;
Text-align : right;
}
Question #2: How do I use CSS with HTML?
There are three ways you can use CSS with HTML:
- Inline
- Internal
- External
Let us take a closer look at each one:
Inline CSS was the only way to apply styles back in the day. It was extremely inefficient because it required developers to apply styles to each element, resulting in a whole lot of redundancy and effectively eliminating the concept of separation of concerns.
Internal CSS eliminates redundancy by introducing the <style> tag, allowing the application of styles directly within the HTML file. However, it still does not solve the problem of not having separation of concerns.
Finally, external CSS allows developers to create style sheets (saved as .css files) that are completely separate from the HTML file and simply link them using the <link> tag. It effectively eliminates redundancy and introduces separation of concerns.
Question #3: Does CSS only work with HTML?
No, CSS does not only work with HTML. You can use CSS files with virtually any XML-based language you could think of.
Question #4: What CSS editors can I use?
There are a lot of CSS editors you can use. Below are some examples to help you get started:
- Visual Studio Code
- Atom
- Espresso
- Notepad++
- Sublime Text
- Komodo Edit
Let us take a look at each one in more detail:
Visual Studio Code is a 100% free, open-source editor that runs on all operating systems. It comes with a host of powerful features, including code autocomplete, syntax highlighting, built-in git commands, and plugins.
Atom comes with an array of powerful tools designed to make it extremely easy for developers to collaborate on a project in real time.
Espresso is specifically designed for Mac users looking to build beautiful, fast websites easily and efficiently.
Notepad++ is perfect for you if you are looking for a simple, lightweight, but highly capable editor.
Sublime Text is a powerful text editor that can handle different programming and markup languages. It comes with a host of powerful tools designed to make development easier and more efficient.
Komodo Edit is a great alternative to Sublime Text if you are looking for an editor that can handle not only CSS, but a host of other languages as well, including Python, HTML, Ruby, Perl, and Javascript.
Question #5: What are the benefits of using CSS?
The main benefit of using CSS to web developers is that it allows them to manage the overall presentation of their website from a single point instead of having to work on every single page individually, dramatically reducing development and revision times.
In addition, since CSS can be written completely separately from a website’s HTML file, it gives developers the freedom to play around with a website’s look without any risk of accidentally modifying and/or damaging that website’s actual structure and content.
Finally, CSS also makes it possible for developers to write cleaner HTML code, which, in turn, helps web crawlers more easily make sense of the pages they build.