How-to articles, tricks, and solutions about CSS

Learn how to create and style custom checkboxes and radio buttons. Also set custom images as checkboxes and radio buttons. See all with examples.

Learn 2 methods of how to specify the size of a checkbox and have a larger size checkbox. Use width and height properties or the transform property. See examples.

Use outline: none to remove the ugly border color for a form field in Chrome. Learn also how to give your own style for showing that the box is active. All with examples.

Learn how to make a word or character have half style or triple style. Use only CSS to get the effect, or do it with the help of JavaScript and jQuery.

Use CSS3 opacity property to make an image or a background transparent. Learn also how to change the opacity while hovering. All with examples.

How to style the select box. Learn 4 ways of replacing the annoying drop-down arrow and setting either a background-image instead of it or a punctuation mark.

Learn how to make a placeholder for a select box. Use only 3 HTML attributes or CSS :invalid pseudo-class and the display property set to none.

Style Font Awesome icon color, size, shadow, create buttons and lists, animate, rotate and position icons. All in one place with detailed examples.

Learn the ways of removing, styling and replacing list bullets with images. Also how to make horizontal lists. All with examples.

Learn about the ways of changing the default cursor. See funny tricks to do with cursors and set images and icons as a cursor on your website.

Use the CSS ::selection selector to change the default highlight color while selecting texts. Use only CSS and do cool tricks to have a better user experience. All with examples.

Use the CSS3 resize property with its "none" value to disable the resizing function of the textarea element. Learn the ways of only vertically or horizontally resizing, too.

Learn the alternative ways of having continually scrolling text without using the obsolete <marquee> tag. See examples with CSS animations, JavaScript and jQuery.

Responsive images automatically adjust to display images based on the user’s device. Learn How to Make Images Responsive with CSS. Try examples.

Learn How To Change the Color of an HTML5 Input Placeholder with CSS with W3docs tutorial. Try the code examples yourself. Fast solution.

Use text-shadow and box-shadow CSS properties for shadow effects in CSS. See how to have amazing effects for texts, borders and boxes.

How to add border as a frame for images. Also add image borders to images. See also Circle and Round frames. All with examples.

Use CSS padding and border-spacing properties for setting cellpadding and cellspacing for tables. Step by step guide with examples.

Learn the ways of styling and have attractive horizontal lines: how to change color and size, set images as horizontal lines and a pack full of various kinds of <hr> examples.

Style comment boxes, change the background color, add a background image or set borders to your comment box. See all with examples.

Learn about how to change hyperlink colors, inline and external methods with examples. See also how to give different styles to your anchor link and to change underline color with examples.

Learn about how to add border to an image, how to add styling to it and how to specify each corner and have circle borders. Practice all with examples.

The <div> tag is used to define parts of a page or a document. Learn How to Horizontally Center a <div> in Another <div> with W3docs tutorial.

Learn about how to add blurring effect to your background image withe the CSS filter property. See examples.

To add background image to your HTML document you should use CSS styles.