Join Sue Jenkins for an in-depth discussion in this video Customizing your text-selection color with CSS, part of Productivity Tips for Web Designers.
- Hello, friends, this is Sue Jenkins with productivity tips for web designers. Today, I'll show you how you can customize your website's browser text selection color with CSS. All browsers have default settings for how HTML content displays, including elements like fonts, colors, links, and other content. This means, if you don't add any CSS styles to your HTML markup, different browsers will likely display your content based on that browser's default setting.
Most web designers take great care to override these default browser settings by styling and positioning their HTML content with CSS. However, it's a little known fact that you can change the browser's default text selection color with CSS. A browser's text selection color is the color that appears behind selected text. Like customizing the style for your HTML links, styling your text selection color is another really great way of personalizing your visitor's experience on your website.
While the color may seem arbitrary, most browsers use the same general shade of blue for the selection color. For example, three out of five of the most popular browsers share the same exact color blue, while the other two use slightly darker blues. Of course, if you prefer this default blue, there's no reason to change it, but if you'd like to add one more personal touch to your web design, consider creating a CSS style for your text selection color.
Here's an example of how I customized the text selection color on my own website. The great news about this style is that all current browsers support this CSS selector. Any older browsers will simply ignore it, and use whatever that browser's default color is for that style. To customize your own site's text selection color, the CSS3 style declaration is pretty straightforward. But, to ensure full compatibility, you still need to include both the standard property, and the Mozilla browser prefix.
For instance, in this example, the default selection color turns the text white, with a blue background. To change the background color, while ensuring that your text stays crisp, your CSS might look like this, with values for background text and text shadow. Here's how this looks in a browser where the colors better matched the other elements in the design. To use more than one color on the same website, create CSS classes for each section, like this, where you place the selector and class name before the ::selection selector.
For example, here's the code to make this second section use a different background color. Before this special second style will work, we must apply the class name to the desired elements in the HTML. In this instance, I'm simply adding the class attribute, to the <p tag. As you can see, when we launch the page in a browser, the first paragraph uses the first set of style rules and the second paragraph uses the second set of special style rules.
Currently, the selection pseudo-element selector can be used to customize the font color, background color, and text-shadow properties in CSS. In the near future, this selector may also support additional properties, including cursor and outline. Until then, stick with the color, background, and text-shadow properties. The next time you design and build a website, remember that styling the browser's text selection color with CSS is super easy, it's fast, and it's an unexpected way to customize your website.
Skill Level Appropriate for all
Q: In "Organic and ethical SEO coding," the author mentions Google+ Authorship. I heard Authorship results are no longer shown in Google search results. Why? Are there benefits to keeping the Google+ Authorship markup on my site?
A: As of September 2014, Google discontinued Google+ Authorship for SEO. The only reason to keep the code on your site would be for Author Rank purposes. See http://searchengineland.com/google-authorship-dead-author-rank-202254 for more information.