# Defining Styles for a Component’s DOM ID

Use CSS attribute selectors for the style definition if you want to apply a style using a DOM ID. Attribute selectors rely on the definition of an attribute, rather than an HTML tag, to apply a CSS style.

You can set the `id` value on any Visualforce component to set its DOM ID. However, the `id` in the rendered HTML is usually preprended with the `id` of parent components, as part of Visualforce’s automatic ID generation process. For instance, the actual HTML `id` of the following code is `j_id0:myId`:

```markup
<apex:page>
    <apex:outputText id="myId" value="This is less fancy."/>
</apex:page>
```

Your CSS should take this into consideration by using an attribute selector:

```markup
<apex:page>
    <style type="text/css">
        [id*=myId] { font-weight: bold; }
    </style>
    <apex:outputText id="myId" value="This is way fancy !"/>
</apex:page>
```

This selector matches any DOM ID that contains “myId” anywhere within the ID, so the `id` you set on a Visualforce component should be unique on the page if you intend to use it for styling purposes.

**See Also**

- [Using $Component to Reference Components from JavaScript](/docs/platform/salesforce-pages-developers-guide/guide/pages-access.md)
- [Best Practices for Accessing Component IDs](/docs/platform/salesforce-pages-developers-guide/guide/pages-best-practices-accessing-id.md)
- [$Component](/docs/platform/salesforce-pages-developers-guide/guide/pages-variables-global-component.md)