CSS Syntax for Identifying Items I Want to Modify on a Webpage

There are different ways to identify elements on a webpage with CSS in order to control their formatting.  Below are the most commonly used for styling Enterprise webpages.

Elements can be identified by their type, for example <div>.  When referencing elements by type the styling will be applied to all <div> tags on the page.  This should be used when trying to apply styling to make all <div> elements look the same.

The CSS syntax for identifying elements is: div {…}

Elements can be identified by their class.  The webpages have predefined classes assigned to elements on the page, for example <div class = “RegRowHeader”>.  This allows us to apply styling to more specific items on the page.  However, some classes are used for multiple items on the page, for example <div class=”RegMediumText”>.  Any styling applied to this class would affect most of the text on the page.

The CSS syntax for identifying classes is: .RegRowHeader {…}

Elements can also be identified by their ID.  Most items on webpages have a unique id assigned, for example <div class=”RegMediumTextBold” id=”OrderNumber”>.  Identifying elements by ID allows the styling to be targeted to just that specific item on the page.  This is most often used to hide an item that is not being used in order to make the page simpler to read.

The CSS syntax for identifying items by ID is: #OrderNumber {…}