Cascading Style Sheets referred to as CSS is a stylesheet language used to design and describe the presentation of the webpage to make it attractive. The main use of CSS is to simplify the process of making web pages presentable.
The way elements should be rendered on screen is described by CSS. CSS applies styling to web pages. More importantly, CSS enables this styling independent of the HTML.
CSS is mainly categorized into 3 types which are as follows.
- Internal CSS
- Inline CSS
- External CSS
Syntax: A CSS comprises style rules that comprise a selector followed by a declaration block. These style rules are interpreted by the browser.
h1 {
font-size: 20px;
background-color: blue;
}- Selector: Selector tells about the HTML element to be styled. In this case, the selector is the “h1” element.
- Declaration: Each declaration includes a CSS property name and value, separated by a semicolon. In this case , its “font-size” and “background-color”.
Example: In this example, text inside all “p” elements will be center-aligned, it will have a font-size of 25px and a “green” color.
<!DOCTYPE html><html>
<head>
<style>
p {
text-align: center;
font-size: 25px;
color: green;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
|
Output:
Why use CSS?
- Basics for Web Development: The basic skill that every web developer should know is HTML and CSS.
- Reusability of Code: CSS files can be reused in multiple HTML pages where we want to apply some styling.
- Attractive Website: Adding styles to our website surely makes it more presentable to users.
- Easy to maintain code: Changes in code need to be made in a single CSS file only.
- Enhance User Experience: A simple yet beautiful UI helps users to go through the website easily.
Limitations of using CSS:
- Confusion among web browsers due to different levels of CSS like CSS, CSS1 up to CSS3.
- Cross-Browser issues, it works differently with different browsers.
- Scarcity of security because of its open text-based system.
Explain the term “pseudo-class” in reference to CSS3.
If we want to define a special state of some element, we have to use pseudo-class.
What kind of special state?
- To style an element when the mouse hovers onto it.
- To style some types of links such as visited and unvisited links.
To add an effect to existing elements based on their states, it can be combined with a CSS Selector.
Syntax:
selector : pseudo-class{
CSS property : value;
}Example: When the mouse hovers onto all “h1” elements, font-size changes to 30px.
h1 : hover{
font-size:30px;
}Categories of pseudo-classes:
- Linguistic pseudo-classes: It enables the selection of an element based on script direction or language. The examples are :dir , :lang.
- User action pseudo-classes: These are specific to user interaction in order to apply a style, such as a mouse hover. The examples are :hover, :focus.
- Resource state pseudo-classes: Applied to media elements capable of being in a state where it could be described as pause, play, etc.
- Structural pseudo-classes: It is related to the location of an element within the document tree. The examples are :last-child, :nth-child
- Input pseudo-classes: It is mainly related to input elements such as forms, it enables selecting elements based on HTML attributes and states that the field is in after and before interaction. The examples are :checked, :valid.
- Time-dimensional pseudo-classes: It is applied when interacting with something which has timing such as tracks. The examples are :future , :current
- Location pseudo-classes: It targets elements within the current document that relates to links. The examples are :scope , :visited.
Example 1: The following two examples demonstrate pseudo-classes. The :hover pseudo-class falls under the category of user action pseudo-classes. It applies when the user interacts with an element using a pointing device not necessarily activating it. When the mouse hovers on the “h1” element, the text gets underlined.
<!DOCTYPE html><html>
<head>
<style>
h1 {
text-align: center;
font-size: 30px;
color: green;
}
h1:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>
Welcome to GeeksforGeeks
</h1>
</body>
</html>
|
Output:
Example 2: The page is loaded when the link is clicked with a color change. The :visited pseudo-class falls under the category of location pseudo-classes. It is applied to the links that the user has already visited. Styles applied by this are very limited due to privacy. The color of the link changes to “green” once we visit the “geeksforgeeks.org” website.
<!DOCTYPE html><html>
<head>
<style>
h1 {
width: 20%;
height: 12vh;
border: 2px solid black;
background-color: green;
color: white;
font-size: 25px;
margin: auto;
text-align: center;
}
p {
font-size: 18px;
text-align: center;
}
a:visited {
color: green;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>Visit
target="_blank">GfG</a>
official website here
</p>
</body>
</html>
|
Output: