CSS - CSS Selectors - ID Selector




 CSS Id Selector

Learn css - css tutorial - CSS Id Selector - css examples - css programs

ID Selector - Definition and Usage

  • In css id selector is used to style the element with specified id attribute.
  • To select elements with a specific class, write a period (#) character, followed by the name of the id.
CSS ID Selector

What is CSS ID Selector ?

  • The id selector is used to specify a style for a single, unique element.
  • Id selector is represented by ‘#’ symbol (# Id Name)
  • Id Selectors are used as a base for descendant selectors.

CSS Syntax [ code css ]

#para1 {
        text-align: center;
        color: red;
       }
click below button to copy the code. By - css tutorial - team

Sample HTML Code [ html css ]

 Tryit<!DOCTYPE html>
<html>
    <head>
        <style>
            p{
            text-align: center;
            color: blue;
            }
        </style>                     
    </head>
    <body>
        <p id="para1"><b>Wikitechy is enhanced for learning, testing, and 
                        training</b></p> 
        <p>Normal Paragraph</p>
    </body>
</html>
click below button to copy the code. By - css tutorial - team

CSS Code Explanation [ css style ]

Code Explanation Code Explanation CSS id Selector
  1. In this above example, id selector is declared as “#para1” which is the id attribute value being called by hash symbol(#) followed by the id name.
  2. Using text-align property we have assigned the text (“Wikitechy is enhanced for learning, testing, and training“) to display in the center of the web page.
  3. color:blue; defines the text (“Wikitechy is enhanced for learning, testing, and training“) to be displayed in blue color .
  4. <p id="para1"> using the id name (#para1) , the styles declared in the para id will be applied to that paragraph with its font style as Bold.

CSS Code Output [ tutorial css ]:

Output CSS id Selector
  1. The text “Wikitechy is enhanced for learning, testing, and training“ will be displayed in blue color with its alignment as center.
  2. This is just a normal paragraph which does not have any css styles, so simply it displays the text “Normal Paragraph”.

This page provides a detailed information on best html and css editor , website css , css html editor , basic css code , learn css3 , css 2 , html and css codes , css for beginners , style css html , css template generator , online html and css editor , basic html css template , html and css tutorial for beginners , learn css online , css code generator , css3 design , css free , html with css , online html css editor , best way to learn css.


View More Quick Examples

CSS BASICS & SELECTORS CSS SELECTOR ATTRIBUTE CSS STYLE FORMS COLORS & BACKGROUND CSS MARGIN & PADDING CSS WIDTH & HEIGHT CSS LINKS CSS BLOCKS

Related Searches to CSS id Selector

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×