The CSS Type Selector

How do we specify an type selector?

  • You can use the name of a single HTML element as a selector. This is then considered as a Type Selector.
  • Type Selector is perhaps the most simplest of all selectors:
    div {color:red; font-size:12px; line-height:15px;}

    With this CSS rule in effect, any HTML code containing an div element on the web page is automatically rendered in 12-pixel font size, colored red and have a 15 pixel line height.
    Example of a Type selector:
    <html>
      <head>
        <style type="text/css">
     /* By the way: CSS comments can be written in this way */
          h1 {background-color: lightgrey;}
          /* This CSS rule will give all h1 elements
               a lightgrey background color */
          div {color: blue; font-size: 20px;
                  border: 1px solid blue;}
          /* This CSS rule will give all div elements  a blue color,
              a 20 pixel font size and
              a blue solid border that is 1 pixel thick */
          p {color: green; font-size: 14px;  margin-left: 20px;}
         /* This CSS rule will give all p elements  a green color,
             a 14 pixel font size and a 20 pixel left margin*/
        </style>
      </head>
      <body>
        <h1>This is the header (h1) text</h1>
        <p>This is a paragraph text. </p>
        <div>
          Text inside the div tag follow all preset defaults.
          <p>This is a paragraph text inside a div element</p>
        </div>
      </body>
    </html>


© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.