CSS online training course

CSS lesson 3, ID selectors

ID selectors

A ID selector and a class both represent the layout of a certain element in the CSS. With ID we use a number sign # infront of the name, while at classes we use a dot. The big difference is, is that you can use a class multiple times in a page not like a ID which is unique and can only be used once on a page.

Properties

  • They look alot like class selectors
  • The value of a ID attribute must be unique inside a page. The same ID may only appear once on every page
  • The difference between class and ID is that classes can be used indefinitly on a page and a ID only once
  • ID selectors are used to indicate special pieces in a document, for example the navigation bar
  • The selector is then written as followed: #value_id {css_property: value}
  • (almost) all HTML tags have a ID attribute

When is it best to use an ID

A ID is mostly being used for a unique name which is attached to the main elements of a website. For example <div id=” header”, and also for the navigation, side, footer, search function and content.
These parts only appear once on a webpage and therefor are given a unique name.

Div ( short for division ) splits the content in seperate sections. Each section can have its own layout this way as specified in the CSS. Div is a block level container which means that a new rule will come after the </ div>-tag .
Like in the following CSS:

And the result.

Conclusion:
The Div ID tag will only be used if you want to use it one time on your page.
The Div class tag can be used multiple times on your page.
<div id="naam">
The tag <id> may only be used once in the layout ( for example a footer ).
The <class> tag may be used multiple times in your layout ( for example on the navigation bar ).