Introduction to The technology(CSS) that revolutionised web design

CSS (Cascading Style Sheets) was first proposed by Håkon Wium Lie in 1994 while he was working at CERN, it is a way to separate the design and layout of web pages from their content and structure, this was the first version of CSS (CSS1) was officially released in 1996. 

Since then it has become an essential tool for creating visually appealing and user-friendly websites.

What is the CSS?

CSS(Cascading Style Sheets) is a styling language used to control the visual elements of a web page, such as layout, color, and overall appearance. 

The consistent growth of any object in this universe will definitely generate amazing results, In the same way, if we do need to maintain the consistency of website appearance we can only do with the language of styles called CSS. 

Why do we use CSS?

CSS is an essential tool for creating visually appealing and user-friendly websites, and without it, the web would be a very different place. Let us analyze the areas of the world where we use CSS

Separation of content and presentation: By separating the design and layout of a web page from the content and structure, it makes it much more efficient to update and maintain the look and feel of a website.

• Reusability: CSS styles can be reused across multiple pages and elements of a website, making it easier to create consistent styles across the entire site.
• Responsive design: CSS can be used to create responsive designs that automatically adjust the layout of a web page based on the size of the user's screen, making it easy to create designs that adapt to different devices.
• Improved Accessibility: CSS allows developers to create web pages that are more accessible to users with disabilities.
• Performance: CSS helps improve the performance of the website by reducing the workload on the server side.
• Animation and visual effects: CSS can be used to create visual effects and animations to enrich the user interface, which is not possible with HTML alone.
• Better maintainability: By using CSS, it's much easier to maintain the website, as all the styles can be grouped and managed in a single or a few files.
• Better consistency: By creating styles and layouts in a separate CSS file, It will be easy to maintain consistency in design across the entire website.

CSS versions

CSS (Cascading Style Sheets) has gone through several versions since its initial release. Here is a brief overview of the major CSS versions:

CSS1

CSS1 (Cascading Style Sheets level 1) is the first version of CSS, it was released in 1996 as a way to separate the presentation of a web page from its content and structure. It provided basic styling capabilities such as text formatting and layout control. 

Active tags

Here is the list of CSS1 properties that are active

• color: it sets the color of the text.
• font-family: it sets the font for text.
• font size: sets the size of the text.
• background-color : sets the background color of an element.
• text-decoration : gives decoration for text
• text-align : alignment of text.
• margin: gives the margins around an element.
• padding : the space between it an element's content and its border.
• border : gives border around an element.
• width:  sets the width of an element.
• height : sets the height of an element.
• line-height : sets the height of a line of text.
• display :sets the display type for an element, such as block or inline.

Deprecated Tags

Here is the list of deprecated properties in css, better we should avoid using them 

• align : this was used to set the alignment of an element, but the text-align property has replaced it.
• bgcolor : This was used to set the background color of an element, but the background-color property has replaced it.
• center : This was used to center elements, but it has been replaced by other layout methods such as Flexbox and Grid in CSS3.
• font : This was used to set the font for the text, but the font-family and font-size properties have replaced it.
• link : This was used to define link styles, but it has been replaced by the a:link, a:visited, and a:hover pseudo-classes.
• size: This was used to set the size of an element, but it has been replaced by the width and height properties.
• text: This was used to set the color of text, but the color property has replaced it.

CSS2

CSS2 (Cascading Style Sheets level 2) is the second version of CSS, which was released in 1998, it is an extension of CSS1 and introduced several new features that improved the styling capabilities of web pages.

Active tags

Some of the new properties of CSS2 include:

• media : This allows developers to apply different styles to different types of media such as screen, print or speech.
• position : This allows developers to control the position of an element, such as absolute or relative positioning.
• float : This allows developers to control the floating of an element, allowing elements to float to the left or right of their containing block.
• z-index : This allows developers to control the stacking order of positioned elements.
• display : This allows developers to control the display type of an element, such as block, inline, or none.
• visibility : This allows developers to control whether an element is visible or not.
• list-style-type : This allows developers to control the style of bullet points in a list.
• text-transform : This allows developers to control the case of text, such as converting it to uppercase or lowercase.
• text-decoration : This allows developers to control the decoration of text, such as underlines or strike-throughs.
• border : This allows developers to control the border of an element, including the width, style, and color of the border.
• outline : This allows developers to control the outline of an element, similar to a border but it does not take up any space in the layout.

Deprecated Tags

Here is the list of deprecated tags

• marquee : This was used to create scrolling text, but it has been deprecated in favor of CSS3 animation properties.
• blink : This was used to create blinking text, but it has been deprecated because it's considered to be distracting to users and not very user-friendly.
• layer : This was used to create overlapping layers on a web page, but it has been deprecated in favor of more advanced layout features in CSS3.
• spacer: This was used to create space between elements, but it has been replaced by the margin and padding properties.
• ilayer : This was used to create layers that are positioned relative to an element, but it has been deprecated in favor of more advanced layout features in CSS3.
• basefont : This was used to set the default font for a web page, but it has been replaced by the font-family and font-size properties.
• align : This was used to align elements on a web page, but it has been replaced by the text-align, float, and display properties.

CSS2.1

CSS2.1 (Cascading Style Sheets level 2.1) is a minor update to the CSS2 specification, which was released in 2011. It is intended to fix errors and ambiguities in the previous version, and it adds a few new features to improve web design and development and it doesn't have any deprecated tags as it is just the improvised version of css 2.

Active Tags:

• content : This allows developers to insert generated content before or after an element, using the :before and :after pseudo-elements.
• font-size-adjust : This allows developers to preserve the x-height of a font when the font-size is changed.
• max-height, max-width : These properties allow developers to set the maximum size of an element, to prevent it from getting too large.
• min-height, min-width : These properties allow developers to set the minimum size of an element, to prevent it from getting too small.
• :active : This pseudo-class selects an element that is being activated by the user, such as a link being clicked
• :hover : This pseudo-class selects an element when the user hovers over it with the mouse.
• :link : This pseudo-class selects a

CSS3

CSS3 (Cascading Style Sheets level 3) is the latest version of CSS, which is an extension of CSS2. It was first released in 1999 and is ongoing, it has been divided into several different modules, and each module addresses a specific area of styling and layout, such as text effects, color, backgrounds, and layout.

To know very detailed info about what’s new in css3 and the latest features, check out my latest article about css3 and its features.

CSS4 ( not officially released yet)

CSS4 is the term used to refer to the next version of CSS, the language used for describing the presentation of documents, it has not been officially announced by W3C yet, the current latest version is CSS3 which has different features and modules.

How to use CSS

If HTML is the skeleton structure of the interactive web page, then CSS is its skin of it. That simply defines, the look and feel of or appearance of a website will be in the hands of CSS. So it is the complete responsibility of the developer to know how to use the css properties in a disciplined nature.

To deliver a handy website, one should learn the key concepts and some logical tricks in CSS technology, our team made little effort to distribute all those tricky solutions to the globe and you can check them here.

Conclusion

Finally, at the end of this article, I hope you got a clear understanding of the technology called CSS from its birth to till date. This article has worth being on your reading list/bookmarks. Please keep in touch via comments. Happy learning 🙌.