Viewers: in countries Watching now:
Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.
- 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,
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.
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.
Find answers to the most frequently asked questions about Productivity Tips for Web Designers .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.