CSS3 contains several new text features. In this chapter you will learn about the following text properties: text-overflow word-wrap word-break Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -o- specify the first version that worked with a prefix. CSS3 Text OverflowThe CSS3 text-overflow property […]
With CSS3 you can add shadow to text and to elements. In this chapter you will learn about the following properties: text-shadow box-shadow Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- specifies the first version that worked with a prefix. CSS3 […]
CSS3 gradients let you display smooth transitions between two or more specified colors. Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser. CSS3 defines two […]
CSS supports color names, hexadecimal and RGB colors. In addition, CSS3 also introduces: RGBA colors HSL colors HSLA colors opacity Browser SupportThe numbers in the table specify the first browser version that fully supports CSS3 color values/property. RGBA ColorsRGBA color values are an extension of RGB color values with an alpha channel – which specifies […]
Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. CSS3 Multiple BackgroundsCSS3 allows you to add multiple background images for an element, through the background-image property. The different background images are separated […]
Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix. CSS3 border-image PropertyThe CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element. […]
Browser SupportThe numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix. CSS3 border-radius PropertyWith CSS3, you can give any element “rounded corners”, by using the border-radius property. Here are three examples: 1. Rounded corners for […]
The CSS font properties define the font family, boldness, size, and the style of a text. Difference Between Serif and Sans-serif Fonts CSS Font FamiliesIn CSS, there are two types of font family names: generic family – a group of font families with a similar look (like “Serif” or “Monospace”) font family – a specific […]
Text ColorThe color property is used to set the color of the text. With CSS, a color is most often specified by: a color name – like “red” a HEX value – like “#ff0000” an RGB value – like “rgb(255,0,0)” Look at CSS Color Values for a complete list of possible color values. The default […]
The CSS outline properties specify the style, color, and width of an outline. An outline is a line that is drawn around elements (outside the borders) to make the element “stand out”. However, the outline property is different from the border property – The outline is NOT a part of an element’s dimensions; the element’s […]
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Explanation of […]
Setting height and widthThe height and width properties are used to set the height and width of an element. The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of […]
CSS PaddingThe CSS padding properties are used to generate space around content. The padding clears an area around the content (inside the border) of an element. With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left). Padding […]
CSS MarginsThe CSS margin properties are used to generate space around elements. The margin properties set the size of the white space outside the border. With CSS, you have full control over the margins. There are CSS properties for setting the margin for each side of an element (top, right, bottom, and left). Margin – […]
The CSS border properties allow you to specify the style, width, and color of an element’s border. Border StyleThe border-style property specifies what kind of border to display. The following values are allowed: dotted – Defines a dotted border dashed – Defines a dashed border solid – Defines a solid border double – Defines a […]
The background-color property specifies the background color of an element. The background color of a page is set like this: Example body { background-color: lightblue;} Try it Yourself » With CSS, a color is most often specified by: a valid color name – like “red” a HEX value – like “#ff0000” an RGB value […]
How To Add IconsThe simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span>). All the icons in the icon libraries below, are scalable vectors that can be customized […]
With CSS, links can be styled in different ways. Styling LinksLinks can be styled with any CSS property (e.g. color, font-family, background, etc.). Example a { color: hotpink;} Try it Yourself » In addition, links can be styled differently depending on what state they are in. The four links states are: a:link – a […]
HTML Lists and CSS List PropertiesIn HTML, there are two main types of lists: unordered lists (<ul>) – the list items are marked with bullets ordered lists (<ol>) – the list items are marked with numbers or letters The CSS list properties allow you to: Set different list item markers for ordered lists Set different […]
The look of an HTML table can be greatly improved with CSS: Table BordersTo specify table borders in CSS, use the border property. The example below specifies a black border for <table>, <th>, and <td> elements: Example table, th, td { border: 1px solid black;} Try it Yourself » Notice that the table in the […]
