What is CSS?
- CSS stands for Cascade Styling Sheets
- It is a set of rules that determine the look and feel of web pages.
How do we write CSS?
- First we select the HTML element( or tag)
- Then we provide key-value pairs that depict the element’s design.
selector
{
style-name: value;
}
Example:
Where do we write CSS?
We can write CSS in 3 possible locations:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
-
CSS rules are specified as values to the style attribute of the tags
-
Disadvantages:
-
Redundant Code: Say we have ten paragraphs whose text color we need to set to red, then we will have to specify the style ten times which is not a good approach
Hard to maintain: Suppose we need to update the style of all paragraph tags, then we would have to search and manually change every occurrence of the p tag.
Impacts page performance: Inline CSS often increases the HTML document's total size and the webpage's loading time.
Decreases Accessibility: The purpose of HTML is to only provide structure to content. Mixing style rules and HTML will make it harder for screen readers to interpret the webpage.
-
Internal CSS
-
Here too we write the CSS within the HTML document. However, all CSS instructions are grouped together and placed under a special HTML tag i.e,
<style> </style>. -
Advantages:
- Allows CSS styles to be reused between elements
- Improve the readability and maintainability of code.
-
Disadvantages:
- It still increases the size of the HTML document
- Code may be reused within the same webpage but cannot be shared between multiple web pages under the same website.
External CSS
Here we write all the CSS elements in its own .css file and then we use the
<link> </link>HTML tag to connect the webpage to the CSS file, i.e.<link rel = "stylesheet" href = "{ Enter location of CSS file}" />-
Advantages:
- Complete Code Reusability
- Similar elements in the same webpage can share the styles
- We can have a shared CSS file between webpages (Ex: The header, navbar, and footer on any webpage under the same website may share the same styling)
- Improves Code Readability and Maintainability
- Web pages load faster since HTML files are not large due to CSS stylings.
- Complete Code Reusability
<html>
<head>
<link rel = "stylesheet" href = "index.css">
</head>
<body>
<p>This line is white but its background is black</p>
<p>This line is also another white line but its background is black</p>
</body>
<html>
body{
background-color: black;
}
p {
color: white;
}
CSS Selectors
If we write internal or external CSS instead of inline CSS, we need to understand a CSS concept called selectors. There are three main types of selectors
- Element Selectors
- Class Selectors
- Id selectors
Element Selectors
- Here we use the name of the tag to define the styles.
- The styling will be applied to all occurrences of that tag on the webpage
Class Selectors
- Class selectors allow us to identify one or more elements and style them the same.
- We do this by giving the selected tags a
classattribute and a common value. - We then write the value prefixed with the
.while specifying the CSS rule
ID selectors
- ID selectors allow us to identify a single element uniquely
- We can do this by using the
idattribute - We then write the value prefixed with the
#while specifying the CSS rule
How does CSS handle conflicts?
- We saw multiple ways (element, class, and id) to select elements and give them style. We also visited the locations (inline, internal, and external) where the CSS rules may be specified.
- If we use some or a combination of these, then there is a possibility that different styles are specified for the same element.
- To handle such ambiguity, the browser uses a concept known as CSS Specificity. In the simplest terms, the style with the higher specificity takes precedence (or wins).
-
Precedence based on Location of CSS Rule:
- Inline CSS has the highest precedence
- Internal CSS comes next
- External CSS is the least dominant.
-
Precedence based on Type of CSS Selector:
- ID selector has the highest precedence
- Class selector comes next
- Element selector is the most minor
-
What if the same selector is used at the same level? What happens then?
- In this case, the last rule takes precedence over the earlier rule.
Top comments (0)