CSS is one of the most critical parts of creating well-structured and visually appealing websites. It helps in styling web pages, improves user experience, and ensures responsive design. However, CSS is not completely necessary, but one wouldn’t like a website page consisting only of HTML elements, as it would be hollow to some extent.
In this write-up, we’ll cover these fundamental concepts with easy explanations and examples to help you become a web developer seamlessly.
What is CSS?
CSS, also known as Cascading Style Sheets, styles elements in a markup language elements like HTML, and improves the visual presentation of web pages. HTML is the foundation of the complete web development process, and CSS is the aesthetics. Adding colors, layouts, animations, and more through CSS enhances the overall user experience of the visitor. Now that we have learned the concept of CSS, let us head to the reasons that explain briefly why it is important.
Types of CSS
There are 3 different types of CSS, Let’s have a brief discussion on them:
Inline CSS
Writing CSS directly in the HTML using style attribute is inline CSS. It gives style to an element and is good for quick changes. However, considering external or internal CSS is recommended if there are multiple elements.
Internal or Embedded CSS
In internal CSS, one has to write CSS code within the <head> section of the HTML document through the <style> tag. This approach is mainly used when the developer intends to apply styling on a single page. Eventually, the CSS code is kept in an HTML file rather than a separate CSS code file.
External CSS
In external CSS, code is written in different files like style.css, and then the file is linked in the <head> section of the HTML document. With this process, one can create multiple pages in a single style.
Why is CSS Required?
Improve website appearance
CSS is of utmost importance in improving the website appearance because more visual appeal will be directly proportionate with a higher engagement rate. With better design, colors, and fonts, the websites look more professional yet visually appealing. This encourages the readers to spend more time on your content.
Enhances user experience
CSS makes the website more attractive and user-friendly. With the right amount of colors, fonts, and spacing, the overall look and feel of your website can be enhanced. Enhancing the site makes it easier for the readers to navigate through it. Ensuring this step will enable them to spend more time on your website.
Supports responsive design
With CSS, the website looks good on every screen, be it mobile, tablet, or desktop. Moreover, with media queries and flexible layouts, the design gets auto-adjusted, which ensures the best user experience for every device. In the present time, a website has to be mobile-friendly, and CSS makes it possible.
Helps separate content (HTML) from presentation (CSS)
HTML creates the structure of the content, and CSS gives it style and design. By separating HTML and CSS, it becomes easier to manage code, which helps in managing and updating the website.
How does CSS work?
1. CSS Targets HTML Elements
You write CSS rules that select HTML elements and apply styles to them.
Example:
p {
color: red;
font-size: 16px;
}
This tells the browser: “Make all <p> elements red and set their font size to 16px.”
2. CSS Has Selectors
You can target:
- Elements (h1, p, div)
- Classes (.box, .header)
- IDs (#main)
- Combinations (.menu li a:hover)
3. CSS Can Be Added in 3 Ways
- Inline (inside an HTML tag):
<p style=”color: blue;”>Hello</p> - Internal (inside a <style> tag in the HTML file):
<style>
h1 { color: green; }
</style>
- External (linked via a separate .css file):
<link rel=”stylesheet” href=”styles.css”>
4. Cascading and Specificity
If multiple styles apply to the same element, CSS decides which one to use based on:
- Specificity (ID > class > element)
- Importance (!important overrides everything)
- Source order (last one wins if all else is equal)
5. The Browser Applies Styles
When the browser loads an HTML page:
- It parses the HTML.
- It matches elements with CSS rules.
- It builds a “render tree” and paints the styles on screen.
Syntax of CSS
selector {
property: value;
}
- Selector: Specifies the HTML element (e.g., p, h1, .class, #id).
- Property: Defines the style attribute (e.g., color, font-size).
- Value: Specifies the style setting (e.g., red, 20px).
Three Ways to Insert CSS
External CSS (Linked in <head> section)
<link rel=”stylesheet” href=”styles.css”>
Internal CSS (Within <style> tags inside <head>)
<style>
p { color: blue; }
</style>
Inline CSS (Directly inside an element’s style attribute)
<p style=”color: blue;”>Hello</p>
CSS Selectors
Types of Selectors:
Simple Selectors: Target elements by Tag name, id, or class
p { color: red; } /* Element Selector */
#unique { font-size: 20px; } /* ID Selector */
.highlight { background: yellow; } /* Class Selector */
Universal Selector (*): Selects all elements
* { margin: 0; padding: 0; }
Group Selector (Multiple elements with the same styles)
h1, h2, p { color: blue; }
Comments in CSS
Used to add notes within CSS files, ignored by the browser.
/* This is a CSS comment */
CSS Text & Fonts
Text Properties
- color – Sets text color.
- text-align – Aligns text (left, center, right, justify).
- text-decoration – Adds effects like (underline, overline, line-through.)
- text-transform – Changes text case (uppercase, lowercase, capitalize).
- word-spacing – Adjusts space between words (word-spacing: 5px;).
- text-shadow – Adds shadow effect.
Font Properties
- font-family → Defines font type. & Google fonts For more fonts
- font-style → Sets text style (normal, italic, oblique).
- font-weight → Adjusts text thickness (normal, bold, lighter, bolder).
- font-size → Sets text size (px, em, vw).
How to learn CSS?
You can consider any of the following ways to learn CSS:
- Learn Through Online Courses and Tutorials
- Practice with Interactive Coding Platforms
- Build Real-World Projects
- Read CSS Documentation and Blogs
- Join Communities and Participate in Challenges
- Follow YouTube Channels and Video Tutorials
- Analyze and Recreate Existing Websites
- Use Browser DevTools to Experiment with CSS
- Contribute to Open Source or Collaborative Projects
- Create a Personal Portfolio Website Using CSS
Conclusion
That’s a wrap for semantic HTML, tables, buttons, form methods & CSS for today. Hope you have a good understanding of these topics. But if you still have any confusion, you can refer to our Full Stack Web Development playlist on YouTube, or you can directly enroll in our free web development course.
Frequently Asked Questions
Ans. CSS makes the website more visually appealing and attractive with appropriate colors, layout, fonts, and more.
Ans. CSS mainly has three types: Inline, Internal, and External. Each of them plays a critical role in situations where they are required.
Ans. With a responsive design website looks great on every screen, whether mobile, laptop, or PC. All this is achieved through CSS
Ans. HTML creates structure, and on the other hand, CSS gives the style to i,t making it visually appealing for the users.
Ans. There are several ways to learn CSS, moreover, you can prefer YouTube tutorials, free courses like the ones Skillwaala provides, or by working on real projects, because perfect makes the man perfect.
About The Author
