What is CSS?
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
Types of CSS
CSS files are integrated in HTML documents.
- Internal CSS –Inline CSS is used as a style tag within the head tag. The advantage of this is the ability to style three or four elements.
- External CSS– External CSS is used to add external CSS file by using the <link>tag and will be positioned in the head tag of the HTML file.
- Inline CSS – An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element.
Features of CSS
Opportunity in Web designing: If anyone wants to begin a career in web designing professionally, it is essential to have knowledge of CSS and HTML.
Website Design: With the use of CSS, we can control various styles, such as the text color, the font style, the spacing among paragraphs, column size and layout, background color and images, design of the layout, display variations for distinct screens and device sizes, and many other effects as well.
Web Control: CSS has controlling power on the documents of HTML, so it is easy to learn. It is integrated with the HTML and the XHTML markup languages.
Other Languages: Once we have knowledge of some basics of CSS and HTML, other associated technologies like Angular, PHP, Python and JavaScript are become clearer to understand.
Advantages of CSS
- Consistent Design:
You would have seen many websites that are elegant and user-friendly. One thing common to all these websites is consistency in design. CSS enables developers to ensure the style elements are applied consistently across several web pages.
- Better Device Compatibility:
People use different smart devices to view a particular website. It can be a smartphone, PC or laptop. For this purpose, websites are required to be device compatible. CSS ensures the task is done smoothly by providing better compatibility.
- Positioning of Design Elements:
You can change the position of an HTML tag with the help of CSS. You can place the elements like an image on any part of the webpage as and when required.
- Easier to Maintain:
CSS is easy to maintain due to less maintenance time. This is because a single line code change affects the entire web page. Also, if improvements are required, then less effort is required to affect changes in the webpage code.
CSS Properties
- Color
- Font Size
- Background Color
- Background
- Height/Width
- Box Model (Margin/Padding)
- Border
- Border Radius
Different types of Selectors
| Selector name | What does it select | Example |
| Element selector | All HTML elements of the specified type. | pselects <p> |
| Class selector | The element(s) on the page with the specified class. Multiple instances of the same class can appear on a page. | #my-idselects <p id="my-id"> or <a id="my-id"> |
| Pseudo-class selector | The specified element(s), but only when in the specified state. | a:hoverselects <a>, but only when the mouse pointer is hovering over the link. |
CSS Specificity
If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will “win”, and its style declaration will be applied to that HTML element.
[type="password"],
input:focus,
:root #myApp input:required {
color: blue;
}
