With the recent internet evolution, the Internet is being accessed by more than 4.54 billion active users. The World Wide Web came into the scene with the first proposal by Tim Berner-Lee in 1989. It all started from there when Hypertext Markup Language (HTML) came into existence. HTML has now become a prominent part of our internet usage with websites. But you would be amazed to know that HTML back in 1990 and Today has changed drastically.
Website in 90s
Components of a Web Page
The HTML remains remained the same all these years. There were no major breakthroughs just new additions of tags for new requirements. What evolved was CSS. Now you must be wondering,
What is CSS?
CSS is referred to as the Cascading Style Sheet. It is used to add styling to the boring plain HTML. There are different elements on a website such as image, text, background colors, components which require different stylings through IDs, classes and tags. CSS is the styling sheet for a HTML document. It can be added in a HTML document through three different methods:
It is adding styling to each component or tag in an HTML document. It uses the style attribute to add various styles. It is generally not the production standard. It can be used for smaller projects. Inline CSS is not recommended for professionals or standard development. The codebase becomes messy in case inline CSS is used for a complex and larger project. It is redundant and time-consuming when adding similar styles to multiple components.
Internal Style Sheet
Internal Style Sheet is the CSS code within the same HTML document in the head tag altogether. It is used when the style is applicable just for the simple page. It applies all the styles within the body tag. It is again not useful for a multi-page web application. It is not widely used for large projects.
External Style Sheet
External Style sheets are the individual document containing just the styling with .css extension. The same style sheet can be added to multiple HTML documents. It saves a lot of time and makes debugging easier. It is the most preferred styling method. It saves page loading time. It makes collaboration and working easier.
How CSS works?
It is often a curious question, how does CSS interact and alters the HTML. There is a complete mechanism that is followed. The HTML is converted in DOM (Document Object Model) in the web browser. DOM is basically a layout of HTML tags to make accessing them sequentially. DOM tree enables you to trigger the specific selectors with child components. The CSS is loaded and parsed to the DOM tree. This is where the CSS interacts not with the HTML but with the DOM. It is finally rendered and appears as a complete webpage.
History of CSS
CSS came first into existence in 1994. CSS evolved all these years and W3C maintained the standards with CSS1, CSS2 and CSS3. They were built on top of each other with better adaptability and more features. Each one had issues that were solved by the next standard. CSS got major adaptability issues with multiple web browsers coming up all these years starting from Internet Explorer, Opera, Firefox, Chrome and Edge.
CSS 1 was adapted in 1996. It was difficult and less adapted by then recent browsers such as Internet Explorer 3, Internet Explorer 4 and Netscape 4.x. CSS 1 had font properties and specification for typeface and emphasis. The text attributes were supported such as spacing of letters and line of text. Alignment of text, positioning and tables were also added. Margin, padding, border and positioning for elements was also implemented. This recommendation was not maintained by W3C.
CSS2 is the improvement of CSS1. It removed the not fully interoperable features. It also included the browser extensions. It had many new features such as absolute, relative and fixed positioning of elements. It supported different media types. It also included new font properties such as shadow.
CSS3 is the most recent and currently used. It has XHTML specification. CSS3 has its major focus on modularisation and separation of concerns. Different modules now go through different stages of the recommendation process. CSS3 has support for almost all recent web browsers. It has even included new selectors along with new combinator and new pseudo-elements.
CSS3 has several new CSS properties. It supports animation which is not a part of earlier recommendations. There were various properties added such as transforms, gradients, animation and transition for animation effect in the website. Recent add-ons are like border-radius, box-shadow, flex-box and CSS grid.
Advantages of CSS
- Multiple Column Layout: CSS previously didn’t had provision for adding multiple columns without using multiple divs. These layouts are supported in safari 3, safari 4 and firefox 1.5.
- Multiple Background: CSS3 adds multiple layered backgrounds to an element using multiple properties. It adds great visual effects. It reduces the redundancies on the markup.
- Text Shadow: Text shadows have been widely accepted and used feature of CSS3. It adds up to the visual aesthetics of the website design.
- Border Image: Borders previously used to be plain or solid colours. But now you can add images even as a border.
- Box Shadow: It adds a shadow to different components without extra markup with a simple attribute.
- @font-face-attribute: This helps in adding better typography for web applications. It is one of the most adapted and useful property.
- Media Queries: These came as a major breakthrough. There are various devices of various dimensions. It often used to happen that elements would break on a different size. A major problem was with mobile devices. With media queries, you can adjust and overcome these issues.
Limitation of CSS:
- Cannot Select Ancestor: CSS currently does not provide you with any method to select parent or ancestor of an element with conditions applied. You can do this for children element. It has been rejected various times because it may cause browser performance and incremental rendering issues.
- Limited scope for the position: The scoping rules for properties such as z-index is to look for the closest parent element with position value absolute or relative. It is not yet possible to avoid declaring new scope.
- Lack of control on Pseudo-class behaviour: The pseudo-class still has certain disable and no change properties to be included to avoid undesirable behaviour. It lacks some properties to add more control over the element.
- The naming of Rules: There is no way yet to name a CSS rule to allow taking the example of the stylesheet to change when selector changes.
- Target Text specific: There aren’t many selectors to target specific ranges or desired text patterns for styling. There is only one pseudo-selector known as “:first-letter”.
Major Differences Between CSS1, CSS2 and CSS3
- CSS1 had a major difficulty with adaptation and consistency across different web browsers. The number of web browsers has also increased largely. CSS2 still has browser extension issues. CSS3 has complete support for almost all recent web browsers.
- CSS1 had limited styling options and old design influences. The properties and add-ons have increased with CSS2 and further expanded with CSS3. CSS3 has support to add animations to your modern websites.
- CSS3 has compatibility with external font styles through google fonts and typecast. It was not possible with earlier CSS1 and CSS2.
- The selectors in CSS3 has increased while CSS1 and CSS2 only had simple selectors.
- CSS1 AND CSS2 didn’t have provision to specifically design the web layout. It is possible with the CSS3 grid system and template layout module. It helped in creating layouts according to user components.
- CSS3 has now been split into various documents known as modules. Previously it was all a single document and limited features. The modularisation helped in working on a particular specification and faster evolution.
- CSS3 is compatible with Internet Explorer 9 whereas CSS1 used to be compatible with Internet Explorer 3.
- CSS3 supports responsive design. Responsive design is referred to as designing a website in such a manner that it looks good on all screen sizes. It should not break or misalign components on changing the screen size.
Need to learn CSS
CSS is the most important and basic skill requirement for becoming a software developer or a frontend developer. It has ample of opportunities in the current market scenario. The career prospectives can be of UI/UX developer, frontend developer and even design teams.
Next Stage of CSS4
There were speculations around CSS4 coming. But it is still not a thing. According to officials, The CSS working group is now working on Selector Level 4. It has new proposed features and selectors. These new introductions were supposed to come out as CSS4 but It’s not CSS4. It will be level 4 of a single specification.
The recent development in CSS based styling has various CSS preprocessors such LESS, SASS and SCSS which help you have more features than pure CSS generally can support. You can explore these preprocessors and add more powerful style effects to your website.