What is CSS? (What is CSS in Hindi)
CSS, called Cascading Style Sheets, was proposed by Håkon Wium Lie in October 1994. Håkon Wium Lie and Bert Bos presented this concept in a paper titled “Cascading HTML Style Sheets” at the World Wide Web conference in Chicago. This led to the development of CSS, a styling language for the web.
.jpg)
In December 1996, the World Wide Web Consortium (W3C) published the CSS1 directory. This first version of CSS1 introduced the basic features and syntax for applying styles to HTML documents. It allowed web designers to separate the structure and content of web pages from their presentation.
CSS2 was published in May 1998 and made significant improvements to CSS. CSS2 further strengthened the positioning, floating elements. It provided maximum flexibility and power to web designers and boosted the possibilities of web design.
Over time, CSS has evolved and new versions have been proposed. CSS3, whose development began in 1999, brought a wide range of new features, including advanced selectors, gradients, and media queries for animations.
With modularization with CSS3, individual modules could be developed and implemented independently!
Currently, CSS is an integral part of web development, providing the facility to control the visual aspects of web pages. The latest version of CSS, CSS3, is widely supported by modern browsers and its features bring new creativity, interactivity, and responsiveness to the latest web design.
Understand CSS (What is CSS)
From the picture below, you can understand CSS better, if any webpage is made only from HTML, then it will be like Skeleton, and with CSS you can give it a complete look!
CSS Features
- CSS helps to make the website beautiful and attractive.
- CSS can speed up page loading and improve the user experience.
- This avoids reusing page elements and simplifies editing.
- CSS helps in applying features like shadows, gradients, transitions, and animations to a web page.
- CSS is used for web designing.
- This language controls the styles (text color, font style, column size layout, background color and images).
- This language controls HTML documents.
- It helps in understanding languages like JavaScript and PHP.
- It is a simple language that is easy to learn and understand.
- CSS is able to adjust the page to different screen sizes and user preferences.
- CSS has the option of supporting devices with Responsive Design, which makes the page display correctly on different sizes and devices.
Disadvantages of Using CSS
- Browser compatibility: CSS can be displayed differently in different browsers, which can result in incompatible web pages.
- Tedious learning process: CSS can be tiring for new users, as it can involve various concepts like selectors, box model, transposition, and responsive design etc.
- Cascading Format: Because of the cascading nature of CSS, it can sometimes be difficult to understand and correct when styles conflict or override each other.
- Limited control over layout control: CSS alone cannot provide much control over complex page layout, especially when compared with layout-centric frameworks like Flexbox or CSS Grid.
- Limited styling capabilities: CSS may have some limitations in its ability to create certain visual effects or complex animations compared to comparable technologies such as JavaScript or the CSS preprocessor.
- Performance impact: Using cascading CSS styling or inefficient selectors can affect page loading and performance, especially with older devices or large CSS files.
- Code maintenance: Maintaining and organizing CSS code in large projects can be difficult, especially as stylesheet size and complexity increase.
- Lack of variables and functions: CSS traditionally lacked support for variables and functions, which can make it difficult to reorganize and manage common styling and calculations.
- Restrictions on HTML structure replacement: CSS can make it impossible to replace HTML structure without affecting the associated CSS, and this can make it difficult to affect the associated CSS.
- Effects of Versions and Updates: Changes to CSS directories and browser updates can cause incomatibilty problems or require modifications to existing codebases, causing additional work and potential backlogs.
Types of CSS in Hindi – Types of CSS
| CSS Type | Sample code |
|---|---|
| inline css | <p style="color: blue;">Hello, World!</p> |
| internal css | html <head> <style> p { color: blue; } </style> </head> <body> <p>Hello, World!</p> </body> |
| External CSS | html <head> <link rel="stylesheet" href="http://www.mybigguide.com/2023/07/styles.css"> </head> |
| Selectors | css p { color: blue; } |
| media queries | css @media (max-width: 600px) { body { background-color: lightblue; } } |
| Pseudo-Elements | css p::first-line { color: red; } |
| Pseudo-Classes | css a:hover { color: purple; } |
| CSS Frameworks | html <link rel="stylesheet" href="http://www.mybigguide.com/2023/07/framework.css"> |
CSS Properties and their Definition
| Properties | Definition |
|---|---|
| color | Sets the color of the text inside the element. |
| font-family | Specifies the font family or typeface for the text. |
| font-size | Sets the font size for the text. |
| font-weight | Sets the thickness or boldness of the text. |
| text-align | Aligns the text with the flat localization inside its container. |
| text-decoration | Adds visual effects to text, including partial, underline, or strikethrough. |
| background-color | Sets the background color of the element. |
| background-image | Specifies a picture to be used as the background of the element. |
| border | Determines properties such as the quality, style, and color of the element’s border. |
| margin | Sets the space or margin outside the bounds of the element. |
| padding | Specifies the space or padding inside the element’s border. |
| width | Sets the width of the element. |
| height | Sets the height of the element. |
| display | Sets the display behavior of the element, such as block, inline, or flex. |
| position | Determines the positioning behavior of the element, such as static, relative, absolute relative, or static. |
| float | Determines how to float or align an element within its container. |
| Z-index (z-index) | Controls the stacking order of overlapping elements on a webpage. |
| transition | Adds transitional effects, such as a flicker animation or a gradual transition, to CSS properties. |
| box-shadow | Applies a shadow effect to the element, giving it depth and dimension. |
| border-radius | Rounds the corners of the element, giving it a smoother appearance. |
CSS Properties and Sample Codes
Below are the Properties and Sample Codes of CSS which will help you in understanding CSS!
| Properties | Sample code |
|---|---|
| colors | css color: blue; |
| font-family | css font-family: "Arial", sans-serif; |
| font size | css font-size: 16px; |
| font-weight | css font-weight: bold; |
| text-align | css text-align: center; |
| text decoration | css text-decoration: underline; |
| background-color | css background-color: #ff0000; |
| background-image | css background-image: url("image.jpg"); |
| borders | css border: 1px solid black; |
| margins | css margin: 10px; |
| padding | css padding: 20px; |
| width | css width: 200px; |
| height | css height: 300px; |
| displays | css display: block; |
| location | css position: relative; |
| floating | css float: left; |
| z-index | css z-index: 1; |
| transition | css transition: color 0.3s ease-in-out; |
| box-shadow | css box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); |
| border-radius | css border-radius: 10px; |
CSS Version – CSS Version
- css 1,
- css 2
- CSS 2.1
- css 3
- css 4
How to learn CSS?
Here you are being given a list of 28 websites which are very useful, you can easily learn CSS by visiting these websites.
Hope you have understood what is “CSS in Hindi”? And how you can easily learn it, if you like the post, then share it with your friends and if you want even better information like this, then definitely follow us on our Social Media Handles!