Home » CSS

CSS Examples

CSS Examples/Programs: This section contains CSS examples from basic concepts to advanced. Practice these examples to make a webpage interactive. Each example has the solved code, output, and explanation.

List of CSS Examples

1. How to clear floats (clearfix) using CSS?
2. How to blur an image using CSS?
3. How to set background image size using CSS?
4. How to perform 3D transformation using CSS?
5. Overlay one div over another div using CSS
6. How to display XML using CSS?
7. How to hide scrollbars while scrolling using CSS?
8. How to prevent line breaks in the list of items using CSS?
9. How to remove iframe borders using CSS?
10. Difference between values of word-break 'break-all' versus 'break-word' in CSS
11. How to create a vertically scrollable div using CSS?
12. How to hide element at the time of printing using CSS?
13. Rescale font based on container width in CSS
14. Set cellpadding and cellspacing in CSS
15. Set Divs not larger than its contents using CSS
16. How to Set height of div to 100% height of window using CSS?
17. Set the opacity only to background color and not on text using CSS
18. How to use a not:first-child selector in CSS?
19. Wildcard Selectors (*, ^ and $) in CSS
20. How to convert px into em in CSS?
21. How to remove the space between inline-block elements?
22. How to create and use CSS triangle?
23. How to horizontally center a DIV using CSS?
24. How to set the background of a text or an image as transparent using CSS?
25. How to set the sticky footer at the bottom of a webpage using CSS?
26. CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Columns (td)
27. CSS - Apply Different Style (Color, Background Color) on Even and Odd Table Rows
28. CSS - Make Two DIVs Left and Right Aligned inside Main DIV
29. CSS - Make Inner DIV center inside Outer DIV
30. CSS - Create and Apply CSS for All Buttons on the Page
31. How to change an HTML5 input placeholder color with CSS?
32. How do I center <div> tag using CSS?
33. How do I hide an element when printing a web page?
34. How to Create a Modal Popup Box with CSS and JavaScript?
35. How to set the height of an image with CSS?
36. Apply style to the parent class if it has a child with CSS and HTML
37. How to make the main content div fill the height of the screen with HTML and CSS?
38. Set the left, right, top and bottom padding of an element
39. Set outline style as a dotted line with CSS
40. How to change the cursor into a hand when a user hovers over a list item?
41. Vertically align text next to an image using CSS
42. How to vertically align an image inside a div using CSS?
43. How do CSS triangles work?
44. How to auto-resize an image to fit a 'div' container using CSS?
45. How to remove the focus border (outline) around text input boxes in Chrome?
46. How to vertically center a div element for all browsers using CSS?
47. How do I style a <select> dropdown with only CSS?
48. Which characters are valid in CSS class names/selectors?
49. How to use Google Fonts in CSS?
50. What does the '+' (plus sign) CSS selector mean?
51. How to apply !important using CSS?
52. Space between two rows in a table using CSS
53. Can I use a ::before or ::after pseudo-element on an input field?
54. CSS force image resize and keep aspect ratio
55. Hiding a scroll bar on an HTML page using CSS
56. Can the :not() pseudo-class have multiple arguments?
57. Limit text length to n lines using CSS
58. Why you should use em instead of px in CSS?
59. Make body have 100% of the browser height using CSS
60. How to change the color of an HR element using CSS?
61. How to wrap text in a pre tag using CSS?
62. What does the '~' (tilde/squiggle/twiddle) CSS selector mean?
63. CSS opacity only to background color, not the text on it?
64. Stretch and scale a CSS image in the background - with CSS only
65. How to make a vertical line in HTML using CSS?
66. How can I make a div stick to the top of the screen once it's been scrolled to?
67. How to make elements float to center using CSS?
68. How can I 'disable' zoom on a mobile web page?
69. Should I size a textarea with CSS width / height or HTML cols / rows attributes?
70. How to remove underline for anchors tag using CSS?
71. Create a Page with Sidebar and Main Content Area using HTML & CSS
72. Styling First Letters with CSS ::first-letter
73. Table Fixed Header and Scrollable Body
74. Is it possible to include one CSS file in another?
75. How to center your website horizontally with CSS?
76. How to create a 3-column layout grid with CSS?
77. How to create a 4-column layout grid with CSS?
78. How to create CSS3 Rounded Corners?
79. Change Bullet Color for Lists with ::marker CSS Selector
80. How to Create a Triangle Using CSS clip-path?
81. Indent Text with CSS text-indent Property
82. Managing Spacing between Words with CSS word-spacing Property
83. How to create a navigation menu with an input field inside of it?
84. How margin and padding properties work?
85. Change Image Opacity on Mouse Over
86. How to create an unordered list without bullets using CSS?
87. How to create equal height columns with CSS?
88. How to center an element vertically and horizontally with CSS?
89. How to set image as border in using CSS?
90. How to create a fixed footer using CSS?
91. How to create different dividers with CSS?
92. How to add custom fonts to your websites using Google fonts?
93. Does 'display:none' prevent an image from loading?
94. How to place text blocks over an image using CSS?
95. How to create a search button with CSS?
96. How to align images side by side with CSS?
97. How to create rounded and circular images with CSS?
98. How filter property works in CSS?
99. Applying Hue Rotation on Image using CSS3
100. How to change the thickness of <hr> tag?
101. How to add visual effects to images with CSS?
102. How to create a black and white image with CSS?
103. How to create a contact form with CSS?
104. Difference between '.' and '#' selector in CSS
105. How to create an email newsletter with CSS?
106. Text in Transparent Box using CSS3
107. How to Create CSS3 Keyframe Animations?
108. How to change background color in CSS?
109. Change Cursor Color with CSS caret-color Property
110. How to set Text alignment in HTML using CSS?
111. How to change link underline color using CSS?
112. How to style a checkbox using CSS?
113. How to right-align the flex item?
114. How to create icon buttons with CSS?
115. How to create Previous and Next buttons with CSS?
116. How to create and style text buttons with CSS?
117. How to hide an element when printing a web page?
118. How to create a dropdown navigation bar with CSS?
119. How to change the space between words in CSS?
120. How to always show scrollbars with CSS?
121. How to center a table using CSS?
122. How to create two div elements with same height side by side in CSS?
123. How to make a div have a fixed width using CSS?
124. How to center a webpage/website horizontally using CSS?
125. How to set a background-color for the width of text, not the width of the entire element, using only CSS?
126. Use DIVs for multiple columns layout inside a DIV using CSS?
127. How to display customized quotes before and after text using CSS?
128. How to write superscript using HTML?
129. How to create a pill navigation menu with CSS?
130. How to write comments in CSS?
131. How to create a zebra striped table with CSS?
132. How to create a side navigation menu with icons using CSS?
133. How to add an inline CSS with any HTML element?
134. How to get scrollbars for div inside container of fixed height using CSS?
135. How to define two column layout using flexbox?
136. How to add a specific color to an element using CSS?
137. How to add border-color to an HTML element using CSS?