Have you seen websites having different colors, styles, and typography? How are they doing it? Well, that is happening through CSS. Now, you might be wondering what is it, how is it used, and lots of others. Don’t worry, we have got your back.
What is CSS?
CSS expands for Cascading Style Sheet. It was developed by World wide web consortium (The organization responsible for defining the standards for the web) in 1996. It is used for styling HTML documents. The latest version is CSS3.
It has various properties like color, font-size, background, spacing, and others to enhance the user experience for browsing the web using property-value pairs. It uses <style> tag for defining the styles for web pages.
Why do we need it?
Websites are made of multiple HTML pages or documents which are a collection of HTML tags. Here is an example:
As you can see above in our HTML file, we have a head and a body tag. Inside <head> tag we have a title tag that defines the title of our HTML page. As we go down our <body> tag, we have an <h1> defining heading for our page, then a paragraph <p> and so on.
So, here we can see our page is made up of multiple HTML tags. If we see the result in the browser, it will be something like below:
If our user, sees something like this, he/she will run away. So that’s when CSS comes into the picture.
Types of CSS
It is of three types:
1. Inline styles
Inline-styles are defined on HTML tags itself using the style attribute.
Here we have changed the background color to “beige” by using inline styling on our body tag using the style attribute.
2. Internal styles
These styles are defined inside of an HTML page using <style> tag.
As you see in the above code snippet, we have given 30px margin to our body tag and have made the paragraphs aligned justify.
3. External styles:
This comes into the picture when we want to style multiple HTML pages at once.
Let’s say we have 20 pages on our website which we want to style. Now if we use any of the above two methods, it would be a tedious task to go into every file and define the styles. A better approach would be to make a single .css file and define the styles for all our pages at once and link the file on every page we need.
External css file is saved by .css extension and doesn’t require style tag. It is linked inside the <head> tag using <link> tag as so :
<link rel=”stylesheet” src=”filename.css”/>
Confused?? Here is an example.
This is a style.css file having styles for all the webpages. It is linked below:
It is linked like so in all the other pages to save our time.
Now, you must be able to understand what, why, and how about CSS but, for bigger projects, it’s a tedious and time-consuming task for writing so many lines of code.
So, to ease things out and to speed up the development process, we have certain front-end frameworks based on CSS which makes our life much easier. They have a certain predefined set of classes that we can use directly in our code to apply the styling. They have a mobile-first approach and are based on RWD (responsive web design). Let’s have a look at some of the popular ones:
1. Bootstrap (2011)
It is one of the most popular free and open-source CSS frameworks with 145K stars on Github. It has CSS and javascript based components for typography, buttons, forms, modals, and so on. The current version of Bootstrap is v4.5.3.
2. Foundation (2011)
Given by ZURB Foundation, it is the second most popular front-end development framework having 21.4k stars on Github. The current version is foundation 6 which can be downloaded from their official website.
3. Bulma (2016)
It has gained popularity in a short span of 5 years. It is a responsive CSS framework based on flexbox having over 41k GitHub stars and 803K monthly downloads. The current version is 0.9.1 which can be downloaded from their official website.
4. Semantic UI
Powered by LESS (CSS pre-compiler) and Jquery to build lightweight and responsive web applications. It is a free and open-source front-end framework having over 48k GitHub stars. The latest version in the market is 2.4.
5. Materialize CSS
It is a responsive CSS framework based on Google’s materialize design concepts. Just like any other CSS front-end framework, it comes with predefined classes for different components like buttons, forms, modals, navbars, grid layouts, and so on.
And the list goes on…
Conclusion
Front-end or User-interface is an integral part of any application. To make an effective first impression on your customers’ minds, It is very important how your product looks. We have a number of good CSS frameworks in the market nowadays that helps us make professional looking websites easily and quickly, but one must have good CSS knowledge to make the best use of them according to their needs. So, In order to write an excellent front-end, one must learn CSS.
