CSS Full Form

Introduction to CSS?

It is a powerful tool for web designers to change the design and control over web pages and how they should be displayed, We can see the following example which depicts how CSS makes the webpage much more presentable and appealing.

Webpage only with HTML

Webpage styled with CSS

CSS stands for Cascading Style Sheets let’s try to understand what that means exactly by breaking it down.

Style: This is the easiest part. As mentioned before, CSS deals with the styling of a web page hence the part ‘style’.This includes simple changes in font, color, layout etc., to complex animations as well.

Sheets: Say you are building a house and tell the builder what type of paint you would like to use, the type of tile pattern, door design, etc. you write them all in a planner and give it to him, and the builder implements them. Similarly, you write how you would like to style a file in a sheet using CSS, and the browser implements it. The file here is what we mean by the sheet, and it is usually called a style sheet.

Cascading : If you search for the word cascade in the dictionary, one of the meanings would be a waterfall over step-like rocks. Let’s say there are $5$ steps, and there’s a pebble at the bottom step, and when the water goes over each step, it brings in a different kind of sand.

So, each time water from a step flows over the pebble, the previous step’s sand is removed, and its own sand is deposited on it, and finally, the one from the lowest step would remain it means here the lowest step has the highest importance.

Similarly, on a particular element in a webpage, there may be different styles applied, and all of them have different importance. Similar to the placement of steps in the previous example, the styles are said to be cascading over an element, and the most recent/important style is applied on the element.

Ways to apply CSS to HTML docs

There are three ways to apply CSS to an HTML document.

• Inline
• Internal
• External

Inline CSS

In inline CSS, we use the keyword style as an attribute to an HTML element and specify the style properties. The properties will then be applied to that specific element.

Syntax:

Example:

Explanation: Here we are trying to style an h1 element. We have used the attribute style in it and specified the value mediumvioletred for the property color.This will change the color of the text, as seen in the output.

Output:

Internal CSS

In internal CSS, we use the <style> tag and write the styles needed inside it. We can write them in the HTML file, which has the elements we wish to modify. The <style> tag can be used inside the head and body of the HTML file.

Syntax :

Example :

Explanation:

• Here, we have used the <style> tag inside the head part of the HTML file.
• We are defining the style properties for three elements body, h1, h2.
• For the body, we have defined the background-color property, and for h1 and h2, we have defined the color property.
• These style properties which we have defined are being applied to the elements, as can be seen in the output.

Output:

External CSS

• This is the most common and preferred style of applying CSS in HTML.
• We create a file with the extension .css, write all our styles in it, and use this CSS file in an HTML to apply the CSS rules written by us.
• Using this approach improves readability as CSS and HTML are in separate files.
• To use this style sheet in an HTML file, we should link it in the head section of it by using the link tag as shown below-

Syntax

Example

HTML

CSS

Explanation:

• We have seen a similar example in the previous section Internal CSS; here, we are going to use the External CSS approach.
• We write all our styles in an external file and name it with a .css extension; in this case, it has been named styles.css
• This styles.css is linked to our HTML file in the head tag by using the link tag.
• Inside the link tag, we specify that it is a stylesheet in the rel attribute and give the path to the stylesheet href attribute.

Output:

CSS Syntax

The CSS syntax has three parts selector, property, and value.

Syntax:

Syntax Explanation: The CSS property and value come as a key: value pair, an element may have a CSS property say color, and we can give its value, say blue, and this color will then be applied to the element we have selected using the selector.

Selector: The CSS selector tells the browser to which HTML element the styling should be applied on. There are different CSS selectors like:

• class selector - selects elements with a particular class name.
• id selector - selects elements with a particular id name.
• type selector - selects elements of a particular element and many more.

Property and value: CSS has certain properties like background-color, border, font-size, and many such properties, and a value can be defined for these based on how we want an element to be styled.

Example:

HTML

CSS

Explanation:

• We have already seen the CSS syntax in the example under Internal and External CSS; there, we have used type selectors body, h1, and h2 and defined the CSS rules inside them
• In this example, we slightly modify it and use class and id selectors.
• We have added the class header for the h1 tag and sub-header for the h2 tag, and to use these in the CSS file, we must follow some syntax rules; to select a class, we must use the . and for an id # that is why we use .header and #sub-header here

Output:

CSS version release

Several CSS versions have been released ever since the introduction of CSS, but there are majorly three versions CSS1, CSS2, and CSS3. Each version builds on the last one with some added features and enhancements. Currently CSS3 is the recommended version by W3C, and it is the one in popular use.

CSS1 : CSS1 was the first official W3C Recommendation. It was published in December 1996. It supported simple visual formatting such as Font property, Color of text, backgrounds, other elements, text attributes, etc.

CSS2: CSS2 was made the official W3C recommendation in May 1998, and it is built upon CSS1 with additional support for absolute, relative, and fixed positioning of elements and z-index property, etc.

CSS3 : CSS3 is the latest and currently recommended version. It was published as a W3C recommendation in June 1999 and is based on the older CSS versions. CSS 3 is divided into several separate documents called "modules". Each module adds new capability or extends features defined in CSS 2.

Frameworks of CSS

A CSS framework can be thought of as a collection of style sheets that have some common web designs, say a menu, button, navbar etc. These are ready to use and can be customized if necessary. It’s kind of like how you can order a ready-made dish, and all you need to do is heat it and add your own spices to eat it. Currently (2021) the trending CSS frameworks are :

• Tailwind CSS
• Bootstrap
• Bulma CSS
• Foundation CSS
• Pure CSS
• Skeleton CSS
• Materialize CSS
• Semantic UI
• UIKit

Using frameworks saves us from reinventing the wheel and helps us save development time. However, it is recommended that beginners should not jump directly into using frameworks and spend time practicing with just the basics and plain CSS initially.

Features/Characteristics of CSS

• Maintenance: Easier to maintain since all the styling is contained in separate files (in external CSS), and style changes in just one place are reflected in the entire web page
• Time-Saving: We can reuse the CSS styles, thus saving time. The same style sheet can also be used for different HTML pages just by adding a link to it.
• Separation of business and presentation logic: CSS helps us in separating the presentation logic from the business logic.
• Offline support: CSS can be stored locally with the help of a cache so the web pages can be viewed even when offline.
• Several properties: CSS has a wide range of properties for styling, which can help create a visually appealing web page
• Multiple Frameworks: There are many frameworks in CSS which make the developer's life easy. Examples: Bootstrap, Bulma, etc.

Takeaway:

Take away can be in graphical form

Why use CSS

• Styling with HTML is cumbersome: Before CSS, HTML tags and attributes were used for styling, and the larger the website, the more cumbersome it was. The introduction of CSS made styling web pages better and easier.
• Maintenance of the application is easier with CSS.
• Writing in CSS saves time and effort because of the reusability of code used for styling an HTML element.

Advantages of CSS

• Multiple Device Compatibility: CSS is compatible with all devices, be it desktop, mobile, etc.
• Better than HTML styling: Styling with CSS is far less cumbersome and better than with HTML
• Easy maintenance: Easier to maintain since all the styling is contained in separate files and style changes in just one place are reflected in the entire web page
• Faster page loading: Page loading is faster with CSS since multiple pages share the same formatting it reduces file transfer size which helps pages load faster
• Time-Saving: We can reuse the CSS styles, thus saving time. The same style sheet can also be used for different HTML pages just by adding a link to it.
• Browser support: CSS supports almost all the latest browsers like Chrome, Safari, Firefox, etc.

Takeaway:

Disadvantages of CSS

• Cross-browser issues: CSS works differently with different browsers, so the developers need to check whether the code for one browser is consistent with the others as well
• Lack of security: CSS doesn’t offer much protection and hence leaving it vulnerable
• High chance of confusion: As we do more and more styling to the application, we might start using various levels of specificity, inheritance, and cascade on the HTML elements. This might lead to increasing confusion.
• Unexpected behavior: CSS has some unexpected behavior in cases such as collapsing margins, fragmentation, etc.; developers need to be careful in such cases to avoid pitfalls

Takeaway:

See Also:

• Online CSS Beautifier