CSS Text Overflow, Word Wrap, Line Breaking Rules, and Writing Modes In this chapter you will learn about the following properties: text-overflow word-wrap word-break writing-mode CSS Text Overflow The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped: This is some long text that will not… Read More »
CSS Shadow Effects With CSS you can add shadow to text and to elements. In these chapters you will learn about the following properties: text-shadow box-shadow CSS Text Shadow The CSS text-shadow property applies shadow to text. In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px): Text shadow effect! Example… Read More »
CSS gradients let you display smooth transitions between two or more specified colors. CSS defines three types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point) CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are… Read More »
This page will explain the transparent, currentcolor, and inherit keywords. The transparent Keyword The transparent keyword is used to make a color transparent. This is often used to make a transparent background color for an element. Example Here, the background color of the <div> element will be fully transparent, and the background image will show through: <!DOCTYPE html> <html> <head> <style>… Read More »
CSS Multiple Backgrounds CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. The following example has two background images, the first image is a… Read More »
CSS Border Images With the CSS border-image property, you can set an image to be used as the border around an element. CSS border-image Property The CSS border-image property allows you to specify an image to be used instead of the normal border around an element. The property has three parts: The image to use as the border Where… Read More »
CSS border-radius Property The CSS border-radius property defines the radius of an element’s corners. Tip: This property allows you to add rounded corners to elements! Here are three examples: Here is the code: Example <!DOCTYPE html> <html> <head> <style> #rcorners1 { border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border:… Read More »
The CSS math functions allow mathematical expressions to be used as property values. Here, we will explain the calc(), max() and min() functions. The calc() Function The calc() function performs a calculation to be used as the property value. CSS Syntax calc(expression) Value Description expression Required. A mathematical expression. The result will be used as the value.The following operators can be used:… Read More »
What is !important? The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! Let us look at an example: Example <!DOCTYPE html> <html> <head> <style> #myid { background-color: blue; } .myclass… Read More »
What is Specificity? If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will “win”, and its style declaration will be applied to that HTML element. Think of specificity as a score/rank that determines which style declaration are ultimately applied to an element. Look… Read More »