CSS3’s Content Property

CSS3’s content property allows for content to be added to the page from within the CSS. This is useful in styling, but it’s especially useful if for some reason you don’t have access to or don’t want to edit your HTML files. The content property is used in conjunction with the :before and :after pseudo-selectors to make content appear before or after certain HTML elements.

Let’s say you wanted a question mark to appear after every h1 element. Below is the h1 tag before the content property is applied to it, followed by the CSS for adding a question mark after the h1 element using the content property.

Screen Shot 2016-07-19 at 3.38.15 PM


h1:after{

content: "?";

}

The result of the above CSS should be this:

Screen Shot 2016-07-19 at 3.38.26 PM

You can add style rules to your pseudo selected element just like you would to any other element. You can change the color, font-size, and even the placement (HOWEVER – you can only change the placement/add margins or padding by defining the position of the pseudo-selected element as absolute. If you don’t take this step then any margins or padding you add will be ineffective).


h1:after{
content: "?";
color: #ff0074;
font-size: 50px;
}

Screen Shot 2016-07-19 at 3.44.00 PM

You can even use the content property to insert an image into your HTML using a url() syntax, like this:


h1:after{
content: url(insert/path/to/image);
}

 

How to Use CSS’s Counter-Reset Property

Screen Shot 2016-07-18 at 10.02.18 AM

Most developers probably think of CSS as a means to bring designs to life, but CSS3 is capable of going beyond aesthetics. CSS3’s counter-reset property can actually be used to assign chronological numbers to certain sections and subsections of your HTML, which you can then use number certain elements. For this example, we’ll use the property to […]

Read on...

CSS3’s Font Shorthand

Screen Shot 2016-07-10 at 12.45.16 PM

There are many CSS font properties available to style your fonts. If you need to define the font-style, size, family, and weight, that can add up to a lot of lines of CSS. Fortunately, however, there is a shorthand for CSS font properties. Here’s the formula: Make sure you don’t forget the forward slash between […]

Read on...

Using CSS3’s Outline Property

Screen Shot 2016-07-10 at 12.25.09 PM

CSS3’s outline property is one that is often thought to be interchangeable with the border property. Though the two properties are very similar, the outline property can actually be used to place an outline OUTSIDE of a defined border. There are three facets of the outline property: outline-style, outline-color, and outline-width. Outline-style takes a bunch […]

Read on...

How to Use CSS3’s Line-Height Property

Screen Shot 2016-07-07 at 11.20.14 AM

CSS3’s line-height property is one that is often underrated and misunderstood. The property can be very helpful in styling certain elements, and it can take many different types of values, including number values, pixel values, and percentages. Let’s apply it to this paragraph to see how it works: This paragraph has the default line-height value […]

Read on...

Using CSS3’s Opacity Property

Screen Shot 2016-07-05 at 10.25.15 AM

With CSS, any HTML element can become (slightly or completely) transparent. The opacity property controls how opaque an element is, and it takes values between 0 and 1. So if you have an image that you want to be slightly transparent, all you need to do is determine how transparent you want it to be […]

Read on...

Change the Text-Selection Color Using CSS

There are many fun, unique ways to customize your sites using CSS. One of our favorites is changing the default text-selection color to match the theme of your site — it’s a subtle change that adds a nice touch of personalization to any page. To do it, we need to employ CSS3’s ::selection pseudo-selector and […]

Read on...

Quick Tip: Using CSS3’s Border-Width Property

Screen Shot 2016-06-28 at 9.14.01 AM

Most people probably use the shorthand when defining CSS’s border property, which is written as follows: But what some developers may not know is that the border-width property, the first property defined in the CSS shorthand for the border property, takes values other than those defined by px or em. The property also takes keyword […]

Read on...

Styling Links as Buttons with CSS3

Screen Shot 2016-06-21 at 2.58.21 PM

With CSS, it’s easy to turn any a tag into a stylish button. In less than 10 lines of CSS, you can go from this: to this: All you need to do is get rid of the default text-decoration (underline), add some padding, a background color, a slight border-radius, and a box shadow. Here’s an […]

Read on...

CSS3’s Color Property

I think it’s safe to say that almost every beginner developer knows that CSS’s color property is used to define the color of your HTML text elements. What many beginner developers might not know, however, is that the color property can also be used to define the color of other HTML elements as well. In addition […]

Read on...