What Is CSS?
CSS is an abbreviation of Cascading Style Sheet which is
generally used by website developers and designers. CSS is a style sheet
language that makes the Website appearance more presentable.
There are three types of CSS:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS is used for small types of
styling i.e. heading style, font colors, font size, etc. It helps the developer
to apply styles in HTML elements. It specifies properties and values. It’s very
easy to use but the Inline CSS has
limitations in terms of use as it can only be used for minimal modifications.
For detailed and complex projects developers should consider using Internal and
External CSS.
For instance:
As you can see it can do minor modifications by creating in-between an opening tag.
Internal CSS
This type of CSS is used in between <head> tags in a single HTML page. It has its own <style></style> tags. It can be helpful if you want to style for a single HTML page but not enough for a whole website.
It
works like this:
<!DOCTYPE
html>
<html>
<head>
<style>
body
{background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
As you can see in the above example that
the body background color is set as powder blue, the heading color is blue, and
the paragraph element has set the red text color.
External CSS
It has a separate CSS file that can be linked to the HTML Page with the use of the <link> tag. The <link> tag is embedded in the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
The external CSS file contains tag attributes like
id, paragraphs, class, heading, etc, and can only use with the .css extension.
There could be multiple CSS files linked in a single HTML Document.
Why We Minify CSS?
When we minify CSS. It reduces the size of CSS files
and enhances page speed without changing its original functionalities, which
helps the developer to improve the website's loading speed. It minifies spaces,
characters, and comments too which is useful when a developer needs to read the
CSS.
The above example will make it easy to
understand.
You can use free tools to minify CSS codes.
The link below is an extremely stress-free online CSS minifying tool.
https://www.toptal.com/developers/cssminifier
Why do Developers Un-minify CSS Codes?
Un-minify CSS is a way of making CSS look
much more beautiful, readable, and editable for developers, Un-minify tool is
used when the developer wants to un-compress the minify format of the CSS file
so that he/she can edit and modify the file as he/she desired.
Here’s an example that will make the thought
clear,
if the developer needs to do the editing in a
CSS file he surely prefers an easy way to do it fast.
Here’s a tip for him, this is fast, and it
minifies CSS as well as JavaScript
https://www.websiteplanet.com/webtools/unminify-js/
hope this article helps you to understand
the concept.
This Article is written by Jaweriya Saleem
Uddin, who has experience as a website designer, and digital marketer also
working as a Graphic designer.
👍
ReplyDelete