Update ID selector with basic information. (#23865)

* Update ID selector with basic information.

* Fixed typos, formatting, grammar
This commit is contained in:
CJ Wright
2018-12-14 22:15:42 -05:00
committed by Manish Giri
parent ea7442072d
commit 77d2e5e755

View File

@ -1,15 +1,26 @@
---
title: Id
---
## Id
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/selectors/general/id/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
# ID
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
the "id" selector is used within a html/css file in order to style a unique element on a page. Unlike other kinds of selectors such as attributes or class selectors, an id can only be used on a single element in a page.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
## Using an Id selector
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
### HTML example
To use an Id selector within an HTML file, you must simply assign the id within the opening tags of an html attribute like shown below. Not that the Id should not include spaces and should be surrounded by quotes.
```html
<p id="company-motto">To do our best!</p>
```
### CSS example
Once you have added a unique Id selector to your page, you can add specific styling to the id you've selected using CSS as shown below.
```css
#company-motto {
font-weight: 900;
}
```
## Notable features
When one or more elements with the same Id are present within the same html file, only the first instance of the the Id will have the style. Additionally because Ids are unique selectors, they should only be used when an element absolutely has to have a specific style and therefore has a high specificity in order for its styling to take precedence over other possible selectors.