To change bullet colors for lists, use the ::before selector. Also, to allow adding a color, you need to set the list-style to none. Set an Unordered List For our example, we have set a element − Cricket Football Tennis Archery Basketball Hockey Set List Style The list-style property is set to none − ul { list-style: none; } Change the Bullet Color Use the ::before selector and set the bullet color. To display the bullet, use the content: \2022 unicode. The color is changed using the color property − ul li::before { ... Read More

CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction flex-wrap flex-flow justify-content align-items align-content Set a Parent div First, set a parent div and style the container with display flex. The flex container becomes flexible with display flex. Wrap the flex item with the flex-wrap: wrap − .container { display: flex; ... Read More

To change the column width based on screen size, use media queries. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc. First, set the div − Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores! Set the Initial Width To set the width of the above div, use the width property in CSS − .sample { width: 50%; background-color: lightblue; height: 200px; font-size: 18px; } Change the Column Width Now, to change ... Read More

To create linear gradient, use the linear-gradient() method of the background-image property. Syntax The following is the syntax − background-image: linear-gradient(angle, color-stop1, color-stop2); The location at color stops can be set as a percentage or absolute length. For example, for linear gradient. The color stops are the colors you want to set for the smooth transitions − background-image: linear-gradient( rgb(61, 255, 2) 40%, rgb(0, 174, 255) 80%, rgb(255, 29, 29) 20% ); The gradient can also be set on an image using the url() with linear-gradient() − ... Read More

The property opacity is the modern solution and works for Firefox , Safari, Opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers − .transparent { filter: alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } Opacity That Works on all Browsers For image opacity that works in ... Read More

The pseudo-class keywords are used to specify a special state of the selector to which it is added. This gives us more control and now we can target a selector when it is in specific state for e.g.: hover, checked, visited etc. Pseudo-classes The following are some key Pseudo-classes − :active = To select the active link :checked = To select every checked element :first-child = To select the first child of an element’s parent :first-of-type = To select the first element of its parent :focus = To select the element that has focus :hover = To select ... Read More

To specify word breaking rules in CSS3, use the word-break property. This property is used to break the line. Let us see the syntax − word-break: value; The values include normal − The default line break rules. break-all − The word is broken at any character only if overflow occurs break-word − The word is broken at arbitrary-points to prevent overflow The following are the codes for specifying word breaking rules using CSS3 − Normal Word Breaking Rule The normal word breaking rule is the default rule − word-break: normal; Example Let us ... Read More

The Advanced Selectors in CSS includes Adjacent Sibling selector, attribute selector, direct child selector, nth-of-type selector, etc. It also includes General Sibling Selector, an example is shown below:h1 ~ h3Example of direct child selector −div > spanFollowing is the code showing advanced selectors in CSS −Example Live Demo #red {    color: red; } .green {    background: green; } ul:nth-of-type(1) {    background: rgb(0, 174, 255); } ul + h3 {    border: 4px solid rgb(19, 0, 128); } a[href="https://www.wikipedia.org"] {    font-size: 25px; } h1 ~ h3 {    font-size: 40px; } div > span {   ... Read More

The property opacity is the ultimate and modern solution and works for Firefox 0.9+, Safari 2, opera 9+, IE 9+ and every version of Google Chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. The filter property is for IE browsers from 5 to 9 to give opacity like effect.Following is code for image opacity using CSS for all browsers −Example Live Demo body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } img {    width:270px;    height:200px; } .transparent{   ... Read More

The text-overflow property is used in CSS3 to determine how overflowed content that is not displayed is signalled to users. Syntax The following is the syntax of the text-overflow property − text-overflow: value; The value can be clip, ellipsis, string, and initial. You can set any text using the string value. The ("...") t is shown for the clipped text when the ellipsis value is used. The following is the code for handling text overflow in CSS3 − Clip the Text In this example, the overflow text is clipped and cannot be accessed using the text-overflow property with ... Read More