How to Use the ID Selector in CSS

There's lots of talk in CSS programming about IDs, classes, and pseudo-classes, etc. But what does it mean to use an ID? According to CSS tutorials and experts, the ID is an identifier for a specific HTML element that shows up once within a page. The ID is more restrictive than a class in its make-up, but adheres more to HTML convention and fits into an HTML framework in possibly a more straightforward way. Here's how to use an ID for CSS elements.

Instructions

    • 1

      Set up your CSS code space. You can use a stand-alone text file as an external CSS page, or put CSS code in the head of an HTML document. Either way, you need to define a space beyond the HTML to do your CSS coding which will apply to one or more pages.

    • 2

      Start your ID definition by naming an element within the CSS code space. Start with an HTML element, like p (for paragraph) or h1 (a heading).

    • 3

      Add a hash mark, and then the name or ID after the element. An example: p#graphID1

    • 4

      Include style directions with commands like this: p#graphID1 {text-color: black; }

    • 5

      Access your ID. Within your HTML code, start your ID element with a tag that looks like this: p id="graphID1". This will open your HTML for that element.

    • 6

      Enter the text or other content for the element you've opened. This content should be styled as your CSS commanded when you load the page.

    • 7

      Close the element with the appropriate tag. You do not need to reference the ID again when closing the element: it's already been identified, defined and constructed. Just put in the regular element closing tag.

Related Searches:

Comments

You May Also Like

  • How to Use CSS

    CSS stands for Cascading Style Sheets and it is a form of computer coding language that refers to the layout of text...

  • How to Build Websites With CSS

    Integrating cascading stylesheets (CSS) into your website gives you the ability to control the look and feel of your site---everything from fonts...

  • How to Reduce Classitis in HTML With CSS Descendant Selectors

    Have you heard of classitis? Beginning CSS designers quickly master the ability to create dozens of classes in a CSS stylesheet and...

  • How to Use a CSS Filter

    Building websites takes a certain amount of patience and persistence. One commonly used web programming technique is the use of CSS filters....

  • How to Use CSS Descendant Selectors

    Understanding CSS descendant selectors can help you target style rules for an exact area of your design.

  • How to Format a Form With CSS

    Before Cascading Style Sheets existed, Web developers placed visual styling definitions inside their HTML tags. These definitions, such as font color and...

  • How to Slide Boxes With CSS

    Start a new Web page in the program you use for editing HTML. You can use the industry-standard XHTML Transitional doctype for...

  • How to Create a CSS Web Site

    Creating a CSS website allows the designer to create layout, color and fonts for a web site. The designer can change these...

  • How to Change Text Color With CSS

    Set up default colors. Create a tag: <style type="text/css"> and insert it before the body tags. After that, begin defining the colors...

  • How to Use CSS to Design an Online Store

    CSS is an effective way to create successful designs in websites. For commercial sites, having a good design can make the difference...

Related Ads

Featured