CSS stands for “Cascading Style Sheets.” It’s a stylesheet language and not exactly a programming language.
The history of CSS
CSS was created 25 years ago. On December 17, 1996, W3C (World Wide Web Consortium) officially published it. [ref]
Hakon Wium Lie (Håkon) first proposed the concept of CSS on October 10, 1994.
And Bert Bos was an influencer & he is a co-creator of CSS. [ref]
If you’re curious enough, check the brief history.
The second version of CSS (CSS2) was released on November 04, 1997 (first public working draft).
Finally, the latest version of CSS (CSS3) was published in June 1999. [ref]
Why CSS has been created
The story of the heroic achievement of publishing CSS started in 1994. At that time, people were using the web as an electronic publishing platform such as newspapers.
But the documents or the web pages were one column and there were no other layouts. Every part of the HTML document was stacked one after another. See the world’s first website without the CSS (screenshot below):
Håkon Wium Lie, a Norwegian software developer who was the “Chief Technology Officer” at Opera Software. He first noticed the need for styling documents.
So the main purpose of creating CSS was to stylize documents. And it involves creating layouts, font, color, and everything in between.
How do you create a CSS file?
Way-1: In order to create a CSS file, open your code editor and create a file that ends with the “.css” extension. For example, “style.css” or “custom.css” or whatever you like.
Way-2: You can right-click and create a new file that ends with the “.css” extension.
Way-3: Open your terminal (mac) or Git Bash (Windows) and hit “touch your_desired_file_name.css” and it will create the CSS file for you. Not to mention, you have to locate the path where you want to create the file (before you make the command).
How to link a CSS file to an HTML file?
<link rel="stylesheet" type="text/css" href="style.css">On your HTML file and within the <head> tag, insert a <link> tag and define the CSS file name along with the path within the “href” attribute. See the above <link> as an example. This process of linking CSS files is known as “External CSS.”
And external CSS could be your project files (.css) or any third-party frameworks such as Bootstrap, ZURB Foundation, etc.
There are 3 types of ways to write CSS:
- Internal
- External (mostly used & preferred)
- Inline
See more about adding stylesheets and writing CSS »
How to see the output of your CSS code?
Once you connected your CSS file to your HTML file or after you write the CSS, drag & drop your HTML file to the web browser. This is the easiest way to see the output.
| Learn & practice CSS with real-world examples |
|---|
| Learn basic CSS from the ground up. |
| Build real projects in HTML CSS. |
FAQ
CSS is not a programming language. It’s a stylesheet language.
Internal, external & inline CSS.
You don’t need to install CSS and even you don’t even download anything to write CSS. Because web browsers already know CSS. And that is why it’s not possible to install CSS.
Open the file in a code editor.
Yes, of course, these two are different. HTML stands for “Hypertext Markup Language” that creates the skeleton or structure of a web page or document. On the other hand, CSS creates the style of the HTML document.
If you think of a house, HTML is the pillars, roof, stairs. And CSS is the plasters, paints, tiles.
These two are easy to learn and take similar brainstorming. But CSS takes a longer time to learn than HTML because it has a lot of properties (compared to the total number of HTML tags).
You have to inspect the element (Ctrl/Cmd + Shift + J) on the web browser to see the CSS of a specific HTML element. Or right-click on any element and then click “Inspect.”
Wrap 2 stars using 2 slashes and write anything between the stars /* Comment in CSS */
See more detail »
Bootstrap is mostly used and then ZURB Foundation. Also, there are many others to save time and solve the specific purposes.
However, depending on CSS frameworks is not a good idea. Learning the actual CSS is worth your time. On the other hand, a CSS framework includes a lot of things and typically more than one file including JavaScript.
You really don’t need all of them in a single project. And it increases the filesize & load time of your document.
If you ask programmers, most of them don’t like CSS frameworks.
But if you want to build economy-class websites, you can use them.
Preprocessor scripting languages such as SASS/SCSS or PostCSS convert your code into a regular CSS that is recognizable by web browsers. And the process of converting the special type of CSS into regular CSS is known as compile CSS.
You can think/read of the word “Compile” as “Convert or Produce or something along those lines.”
These preprocessor scripting languages are also very similar to CSS, just their pattern or writing style is different. It looks very hard by its name, actually, it’s not. See more about SCSS & CSS and how to use them.
Well done! You covered a lot of the basics of CSS. If you still have any questions or if you have any suggestions to improve this document, let me know.
