The ID selector in CSS is used to select a single element on a page by referencing its id attribute. This attribute must be unique within a page, meaning no two elements can have the same id. The ID selector is prefixed with a hash (#) symbol in CSS.
Basic ID Selector
The ID selector allows you to style a specific element by targeting its unique id attribute. This is perfect for applying custom styles to an element that only appears once on the page.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#header {
color: blue;
font-size: 24px;
text-align: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="header">Header Content</div>
</body>
</html>
<!--Driver Code Ends-->
Syntax
#elementId {
/* styles */
}Where element Id is the value of the id attribute on the HTML element you want to target.
How Does the ID Selector Work
The ID selector is extremely specific because the id attribute is unique within a page. Therefore, using the #id selector is an efficient way to target a single element for styling. This specificity also means that the styles applied using an ID selector will generally override other, less specific selectors like class selectors.
1. ID Selector for Styling a Button
Use the ID selector to target buttons and apply unique styling, such as background colors and padding. This is useful for creating buttons with distinctive designs across your website.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#submitBtn {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
#submitBtn:hover {
background-color: darkgreen;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button id="submitBtn">Submit</button>
</body>
</html>
<!--Driver Code Ends-->
2. Styling Section with a Specific ID
ID selectors can be used to style entire sections of a webpage, making it easy to create consistent layouts. For example, you can apply a background color and padding to a specific section of content.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#about {
background-color: #f4f4f4;
padding: 20px;
margin-top: 20px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<section id="about">
<h2>About Us</h2>
<p>We are a leading company in the industry...</p>
</section>
</body>
</html>
<!--Driver Code Ends-->
3. Combining ID Selector with Pseudo-Classes
By combining the ID selector with pseudo-classes like :hover, you can create interactive elements. For instance, changing the background color of a button when the user hovers over it.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#submitBtn {
background-color: green;
color: white;
padding: 10px 20px;
}
#submitBtn:hover {
background-color: darkgreen;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<button id="submitBtn">Submit Again</button>
</body>
</html>
<!--Driver Code Ends-->
4. Targeting Nested Elements with an ID Selector
ID selectors can also target nested elements within a specific container. This allows for precise styling of child elements like text or links within a div or section.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#footer {
background-color: #333;
color: white;
padding: 20px;
}
#footer span {
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="footer">
<p>Contact us: <span>[email protected]</span></p>
</div>
</body>
</html>
<!--Driver Code Ends-->
5. ID Selector for Navigation
When styling navigation bars, the ID selector provides a way to apply unique styles to the entire navigation element. It helps define things like font size, background color, and alignment.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#nav {
font-size: 18px;
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<nav id="nav">Navigation Menu</nav>
</body>
</html>
<!--Driver Code Ends-->
6. ID Selector for Targeting Forms
You can use the ID selector to style forms and their elements individually, applying padding, borders, and spacing. This is ideal for making forms visually appealing and easy to fill out.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#contactForm {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
}
#contactForm input {
margin-bottom: 10px;
padding: 8px;
width: 100%;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<form id="contactForm">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<button type="submit">Submit</button>
</form>
</body>
</html>
<!--Driver Code Ends-->
7. ID Selector for Elements with Specific Layout
The ID selector is perfect for styling elements that have unique layout requirements, such as footers. You can adjust margins, padding, and background colors to match the design of the page.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#footer {
margin-top: 30px;
padding: 20px;
background-color: #222;
color: white;
text-align: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="footer">Footer Content</div>
</body>
</html>
<!--Driver Code Ends-->
8. Combining Multiple IDs with Other Selectors
You can combine an ID selector with other selectors like element or class selectors to target specific child elements. This provides more control over nested structures, such as styling only h1 tags inside a section with a specific ID.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#header h1 {
color: red;
font-size: 24px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<section id="header">
<h1>Welcome to My Website</h1>
</section>
</body>
</html>
<!--Driver Code Ends-->
9. Using ID Selector for Unique Content
When you need to apply unique styles to specific pieces of content, use the ID selector to ensure that particular elements stand out. This is great for creating distinctive sections like call-to-action boxes.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#uniqueBox {
background-color: lightblue;
padding: 15px;
border: 1px solid #ccc;
text-align: center;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="uniqueBox">This is a unique content box.</div>
</body>
</html>
<!--Driver Code Ends-->
10. Overriding Other Selectors Using ID Selector
Due to its high specificity, the ID selector can override other selectors like class-based styles. This is useful when you want to ensure a particular element’s style takes precedence.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.box {
background-color: lightgray;
padding: 15px;
text-align: center;
}
#specialBox {
background-color: yellow;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="box">This is a general box.</div>
<div id="specialBox" class="box">This is a special box with unique styling.</div>
</body>
</html>
<!--Driver Code Ends-->
11. ID Selector for Animations or Transitions
The ID selector can be combined with CSS transitions or animations to add dynamic effects to elements. This allows you to smoothly animate properties like size or position when the element is hovered or clicked.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
#box {
background-color: lightcoral;
width: 100px;
height: 100px;
transition: transform 0.3s;
margin: 20px;
}
#box:hover {
transform: scale(1.2);
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div id="box"></div>
</body>
</html>
<!--Driver Code Ends-->
12. Overriding element selector by id selector
The ID selector has a higher specificity than element selectors, meaning it will override any styles applied to elements of the same type. This allows you to apply unique styles to specific elements without affecting others.
HTML
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
p {
color: green;
font-size: 16px;
}
#specialText {
color: red;
/* Overrides the paragraph color */
font-size: 20px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<p>This is a regular paragraph.</p>
<p id="specialText">This paragraph has overridden styles using an ID selector.</p>
</body>
</html>
<!--Driver Code Ends-->
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read