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 »
CSS Units CSS has several different units for expressing a length. Many CSS properties take “length” values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. Example Set different length values, using px (pixels): <!DOCTYPE html> <html> <head> <style> h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px;… Read More »
Website Layout A website is often divided into headers, menus, content and a footer: There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial. Header A header is usually located at the top… Read More »
CSS counters are “variables” maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document. Automatic Numbering With Counters CSS counters are like “variables”. The variable values can be incremented by CSS… Read More »