If you have any experience in web development, you may have heard these three words – HTML, CSS, and Javascript. These are the core technologies of the World Wide Web, commonly known as WWW. HTML is a mark-up language used to design the structure while javascript makes a web page attractive. Cascading Style sheets, commonly known as CSS has a different role. Although a web page works fine with HTML and Javascript only. Have a look at the following image. It the homepage of amazon’s website.
Now, look at the image below.
This is the same homepage of amazon’s website but without CSS. Feel the difference. The web page looks so dull and unattractive. This is why CSS is used. CSS makes a web page attractive and the website actually looks like a website when CSS is there.
Hakon Wium Lie first proposed CSS in 1994. He was working with Tim Berners-Lee, the father of HTML at CERN. Many other styling languages were also proposed at that time. CSS2 came out in 1998 with better features such as absolute, relative, fixed, positioning, z-index, the concept of media type, bidirectional text, and new font properties such as shadows. The development of CSS3 started later that year, but it was never completed.
Syntax
The syntax of CSS is very simple and easy to learn. There are two parts of CSS rule-set – selector and declaration. Let’s understand the syntax of CSS with the help of an example.
<p> tag is the selector here. The declaration is written inside the curly brackets. In the example above, there are two declarations, separated by a semicolon. There can be any number of declarations.
A declaration has two parts – property and value. For example, color is the property and red is the value. Property and value are separated by a colon.
What do you think the above CSS will do? Looking at the declarations, it will change the color to red and font-size to 20px. But what will be affected in the HTML by this? The selector defines what will be affected. In this case, we used p as a selector. This CSS will be applied to each <p> in the HTML file. There are different types of selectors that we can use in CSS. Let’s discuss them briefly.
Instead of writing the element’s name, we used the id of the first <p> tag preceded by a number(#) sign. CSS will be applied to the <p> tag where id is demo1. The second <p> tag will not be affected.
Class Selector
Similar to id, we can also define a class for HTML element(s) using the class attribute. The only difference is, instead of the number sign, a single dot(.) is used.
Suppose, we want to apply the same CSS on multiple HTML elements. So instead of writing the same declarations for multiple elements, we can group them.
The CSS will be applied on all the <h2> tags that are descendant of any <div> tag in the HTML file. Every <h2> tag will be affected, regardless of how deep it is nested inside the <div> tag.
The adjacent sibling selector is used to apply CSS on the adjacent siblings of the specified element. A plus (+) sign is used for adjacent sibling selectors.
Only the adjacent sibling, i.e., heading 3 is affected.
General Sibling Selector
Unlike the adjacent sibling selectors, the general sibling selector is used to apply CSS on every sibling of the specified element. A tilde (~) symbol is used for the general sibling selector.
The idea of external CSS is to change the CSS of multiple files by making a change in only one file. The styles are written in an external file that is linked to the HTML files using proper syntax. The external CSS file should have a .css extension.
Suppose, we have styles.css file and we want to link it with an HTML file. All we have to do is add a <link> tag in the head of the HTML file.
To link the file, we used three attributes – rel, type and href.
rel: It specifies the relationship between the linked document and the current document. It is required.
type: It specifies the media type of the document.
href: It specifies the location of the file.
Internal CSS
The internal CSS can be used to define unique CSS to a single HTML page. Unlike external CSS, there is no external file for CSS, instead, CSS is written inside the HTML file only. The style tag is placed between the head tag. Let’s understand this with the help of an example.
<pstyle="color: red; font-size: 20px"> This is inline CSS <p>
Inline CSS has higher priority over external and internal CSS.
Advantages and disadvantages of CSS
Advantages of CSS
CSS saves a lot of time – Editing the design of webpages across a website is a bit of a task when you have to edit multiple HTML files. With cascading style sheets, maintaining and updating a website is easily possible as you need to edit only a single stylesheet and the styles get applied to multiple pages simultaneously. This saves a lot of time for designers and developers working on it.
It helps to make consistent and spontaneous changes – Using CSS, not only saves time bringing about spontaneous changes but also ensures consistency in design across the website.
It improves the loading speed of the page – Applying styles to multiple web pages is made easy by externally linking a single CSS file to an HTML document. Thus, upon opening a website, CSS file is downloaded and cached by the browser. Hence, the file need not be downloaded every time users visit the web pages. This improves the loading speed of the page.
CSS has the ability to re-position – The positioning property is an advantage of using CSS, that allows the element to be placed anywhere on the webpage.
It has better device compatibility – CSS helps with compatibility by providing a flexible framework with a responsive design. This helps with ease of website accessibility for users with various devices.
Disadvantages of CSS
There could be cross-browser issues while using CSS – What works for one browser may not necessarily work for others. This might cause compatibility issues.
There are multiple levels of CSS such as CSS, CSS 2, CSS 3. This can create confusion for non-developers and beginners.
Lack of security is one of the major disadvantages of the Cascading style sheet. It is vulnerable to being injected with malicious code like Cross-Site Scripting (XSS).
CSS has limited control over layouts. In order to achieve certain specific layout details like adding multiple columns to the table, other tools like Flexbox or Grid need to be used.
Conclusion
Without CSS, web development is not possible. CSS might look difficult in the beginning, but after learning a few concepts, CSS will feel very simple and easy. There are many options to apply CSS and we have discussed some of the most common ones.
Acodez IT Solutions is a web development and web design company in India, offering all kinds of web design services to our clients in India and abroad. We are also a digital marketing agency providing inbound marketing and digital marketing solutions to our clients at affordable prices. For more information, contact us today
Looking for a good team
for your next project?
Contact us and we'll give you a preliminary free consultation on the web & mobile strategy that'd suit your needs best.
Rajeesh P.K. is the Director and Creative Head at Acodez . With an experience of 10+ years in UX Design & User Interface Design, when coupled with his expert coding skills in HTML5, CSS3 and Javascript, makes him one of the top UX Architects in India, with more than 15 international awards to his credit.
