Perspective, tips, and insight

Articles to help you improve your digital marketing

Overview of CSS selectors

As one of Indianapolis’ top web development companies, it is important for us to understand technology and its benefits. We consistently look for new tools and best practices to improve our development process so that we can deliver the best websites possible to our clients. In this article, we're going to explore one of those tools: CSS selectors.



Understanding CSS selectors is crucial to the web development process. They can help you target website elements in new ways, leading to cleaner, more flexible styles. As a result, your website will be easier to update and maintain.

So, what is a CSS selector? If you've ever written any CSS, you've probably used them! Take a look at the example below:

h1 {
    color: black;
}

The entire piece is referred to as a CSS rule, and in this example, the "h1" is the selector.

There are many selector types, from the basics like tags and classes, to more advanced options like attribute selectors and pseudo classes. These different selector types can be used to achieve a variety of effects on the web. Let's take a closer look at some popular selectors and how you can put them to use!

Type selectors

Type selectors are one of the most basic selectors, and can target specific elements on a page by using an element's tag name.

Example 1

We want to change the color of all h3 elements on our website to red:

h3 {
    color: red;
}

Example 2

We want to add some padding to all div tags on our website:

div {
    padding: 10px;
}

Class & ID selectors

Class and ID selectors are also very common selectors. Using a class or ID name as a selector targets any element that has a matching class or ID. For class selectors, a period must be placed before the class name in the CSS. For ID selectors, a number sign must be placed before the ID name in the CSS.

It is possible to select an element with multiple classes or IDs as well. This can be done by placing the selectors one after another with no spaces in between.

Example 1

We want to add a border to any element with the ID of highlight on our page.
HTML:
<div id="highlight">
    This is section 1.
</div>

<div id="not-highlight">
    This is section 2.
</div>
CSS:
#highlight {
    border: 1px solid black;
}

In this case, section 1 would have a border, but section 2 would not.

Example 2

We want to add a border to any element that has the class of highlight, but a red border to any element with the class of both highlight and red.
HTML:
<div class="highlight red">
    This is section 1.
</div>

<div class="highlight">
    This is section 2.
</div>
CSS:
.highlight {
    border: 1px solid black;
}
.highlight.red {
    border: 1px solid red;
}

In this case, section 1 would have a red border, and section 2 would have a black border.

Descendant, child, & sibling selectors

You can use different combinations of selectors to target elements more specifically. For example, these types of selectors can come in handy when you don't have much control over the HTML code on a page. If you can't edit the HTML to add in a class or ID to target an element, you may be able to do it with a combination of selectors instead.

Descendant selectors target elements that are descendants of another element. This is done by adding spaces between element names.

Example

We want to change the text color to orange for all h1 elements that are inside of a div with the class of title.
HTML:
<div class="title">
    <h1>Heading</h1>
    <div class="section">
        <h1>Heading</h1>
    </div>
</div>
CSS:
.title h1 {
    color: orange;
}

In this example, both the of h1 elements would be orange, since they both are descendants of the div with the class of title.

Child selectors can be used to select child elements. This is done using the ">" symbol.

Example

We want to change the text color to orange for all h1 elements that are direct children of a div with the class of title.
HTML:
<div class="title">
    <h1>Heading</h1>
    <div class="section">
        <h1>Heading</h1>
    </div>
</div>
CSS:
.title > h1 {
    color: orange;
}

In this case, only the first h1 element would be orange since it is a child element of the div with the class of title. The second h1 element would be a child element of the div with the class of section instead.

General sibling selectors target elements that share the same parent element. This is achieved by placing a tilde (~) character between two element names, in which the first element comes before the second element on the page.

Example

We want to change the background of paragraphs under a title element, but only in the div with the class of section.
HTML:
<h1 class="title">Title heading 1</h1>
<p>This is paragraph a.</p>
<div class="section">
    <p>This is paragraph 1.</p>
    <h1 class="title">Title heading 2</h1>
    <p>This is paragraph 2.</p>
    <p>This is paragraph 3.</p>
</div>
CSS:
.section .title ~ p {
    background: red;
}

In this case, only paragraphs 2 and 3 in the div with the class of section would have a red background, since they are both siblings (share the same parent) of Title heading 2. Although paragraph 1 shares the same parent as well, it comes before the title instead of after it.

Adjacent sibling selectors target elements that share the same parent element but are also adjacent to each other. This is achieved by placing a plus sign between two element names, in which the first element comes before the second element on the page.

Example

We want to change the margin on paragraphs that are directly underneath title elements to not have quite as much space at the top as other paragraphs.
HTML:
<p>This is paragraph 0.</p>
<h1 class="title">Title heading</h1>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
CSS:
p {
    margin: 10px 0;
}
.title + p {
    margin: 0 0 10px 0;
}

In this case, paragraph 1 would not have any top margin, though the other paragraphs would remain the same.

Attribute selectors

Attribute selectors are one of the advanced selectors that can be used to gain control over your website. These selectors can be used to target an element's attribute instead of just the element itself, using brackets following the selector name.

Example

We want to add a PDF icon to PDF links to differentiate them from normal links. This can be done using the "ends with" attribute selector.
CSS:
a[href$=".pdf"] {
    background: url("images/pdf.png") 100% 50% no-repeat;
    padding: 0 24px 0 0;
}

This targets any link element whose URL ends with ".pdf", allowing us to add our PDF icon at the end of the link name.

Pseudo-classes

Pseudo-classes are another type of advanced selector, and can be used to generate a variety of interesting effects on a website. They are unique in that they can be applied dynamically to elements based on things like user actions or element state. A pseudo-class is applied to the end of an element, with a colon following the pseudo-class name.

User action pseudo-classes

We can target elements in different states: hover, focus, and active.
CSS:
element_selector:hover {...}
element_selector:focus {...}
element_selector:active {...}

Structural pseudo-classes

There a variety of ways to target elements based on its position in the structure of a page. Here are some popular options:
:first-child & :last-child
These pseudo-classes can target the first or last child of an element. For example, you could target the first and last items of a list:

ul li:first-child {...}
ul li:last-child {...}
:nth-child
This is a more complicated pseudo-class, but a very powerful one, that targets elements based on numbers or expression. Below is a basic example that will target every even numbered list item.

li:nth-child(even) {...}

These are only a few of the available pseudo-classes. For a more advanced look at pseudo classes, check out Smashing Magazine's article How to Use CSS3 Pseudo-Classes.

Pseudo-elements

Pseudo elements are similar to pseudo-classes, but they differ in that they don't target existing elements.

:first-letter & :first-line

The :first-letter and :first-line pseudo-elements can be used to control text within a parent element.
CSS:
p {
    font-size: 12px;
}
p.one:first-letter, p.two:first-line {
    font-size: 18px;
}

In this example, the paragraph with the class of one and the first line of the paragraph with the class of two would be larger than the rest of the text in those paragraphs.

Generated content pseudo-elements

The :before and :after pseudo-elements can be used to add content to an element.

Example 1

We could use the :before pseudo-element to add "read more" in front of links to additional information:
CSS:
a.read-more:before {
    content: "Read more: ";
}

Example 2

We could use the :after pseudo-element to add an email icon after email links.
CSS:
a[href^="mailto:"]:after {
    content: url('images/email.png');
}

For some creative uses of pseudo-elements, check out the CSS Tricks article A Whole Bunch of Amazing Stuff Pseudo Elements Can Do.

Hopefully now you have a better understanding CSS selectors, and how powerful they can be. Try them out on your project, and see what you can accomplish! Check out this guide to Complex selectors for more information and examples. For the most current information on CSS selectors, check out the W3.org CSS selector specification.


Get better SEO results with a long-tail strategy

A successful Search Engine Optimization (SEO) strategy certainly targets keywords or phrases but also stretches out to encompass longer phrases. As Google continues to enhance its search mechanisms to better respond to "real questions," the long-tail keyword is experiencing a resurgence in effectiveness.

Target the right audience with more specific terms.

Long-tail keywords have lower search volume and thus are easier to target and tend to be more effective when captured. For example, a search for "web design" is certainly a potential target for TBH Creative but is that a search for a web design firm? A person who wants a web design job? A designer looking for inspiration? It's hard to tell and therefore, hits captured off that keyword target are going to offer mixed results.

However, a search for "web design firm Indianapolis" is a far better prospect for us. A person searching for that long-tail term is far more likely to be looking for our services and our SEO efforts with that phrase are going to be more successful.

Illustration  by Chris Anderson, The Long Tail, CC by 2.0

In this article summary: Articles on Longtail Keywords for SEO Strategy, Design M.ag hits on the importance of long-tail keywords: "Longtail keywords are the searches which make up over 70% of Google search terms. These are often longer than 3-4 words and they can be very specific in relation to your website. This is why most visitors who search longtail will stay on your website for a long time, if you can fill their exact need(s)." Read the full article.

Enhance your long-tail strategy with landing pages.

Once you research and develop your list of long-tail targets, step back and look at your website content. There's a fine balance between writing content that is of genuine value to your audience while naturally incorporating your long-tail targets and writing content that is loaded with phrases and keyword terms but doesn't offer much inherent value.


Landing pages can help with this balance. As you review your website content strategy, consider developing separate pages for separate long-tail keywords. Assuming these targets are viable sources of potential leads, they are also ripe for developing into information that is useful and will best connect with your audience.

For example, Dr. Stephen Klapper is an eyelid and facial plastic surgeon in Indianapolis. As such, he offers a specific set of medical services to his audience that they search for with longer search phrases. As part of an overall content strategy, Dr. Klapper developed a set of pages to describe each of his primary surgeries and treatments.


These pages are of definite value to his potential patients as they learn more about the procedures they need. They also help Dr. Klapper most effectively capture searches for those "long-tail" terms.


Benefits of Email Marketing

Email marketing continues to thrive as more people connect to their email through their smartphones, tablets, computers, and other devices. Not only are many people checking their email but also many check their email multiple times during the day. With this in mind, it is important for business owners to to consider email marketing as a tool to connect with consumers to promote their business.

With the click of a button, email marketing is a way to instantly send out information to consumers.

Getting started with email marketing

Here are ways your business can get ahead by incorporation email blasts into its online marketing strategy:
  • Build loyalty and brand awareness
    • Through email marketing, businesses can establish meaningful, long-lasting relationships with their consumers. Each email that is read by a consumer helps build awareness of your business and its brand. Emails are instant and don't take long to create; therefore, businesses can communicate with their customers more frequently if needed. Whether a business sends out emails once a week or once a month, customer loyalty will grow especially if consumers are sent valuable content.
  • Personalize offers and messaging
    • Email marketing presents the opportunity for businesses to target their messages to customers on an individual basis. You can personalize emails with custom greetings that use the recipients' names or even by presenting specific offers based off of the recipients' purchase history. Marketing through email gives businesses the opportunity to separate their database into customers lists based on location, gender, and other characteristics. These personalized lists help businesses tailor their emails. 
Email marketing example from Kermans Flooring
  • Improve tracking and feedback
    • With other types of marketing and advertising it can be difficult to measure what consumers have viewed and what they're interested in. Through email marketing, you can track open rates, see what links are clicked, and learn which messages lead to sales or additional communications. This valuable feedback can help your team to figure out what is working with your online marketing and what can be improved to better meet customer needs and improve sales.
  • Stay on budget
    • Email marketing can be done at a much lower cost in comparison to other types of online marketing options. Marketing through email doesn't require many employees in order to achieve its goal. Your business also doesn't need to worry about printing or postage costs involved with traditional direct mail. Many businesses prefer email marketing because it's "green." 
If you want to learn more tips for email marketing check out other blog entries from TBH Creative.
 

Partner with the right email marketing service

Many email marketing services provide easy and attractive templates as part of their plans, but it's important for your business to partner with a strategic web design firm like TBH Creative to customize your template in order to have it match the look and feel of your other communications. Emails are a quick and easy way to reach your consumers and a way to reach consumers more frequently, but this form of communication is only effective if it's professionally done. Once established, your customers will be able to easily join your list as well as forward your emails to other people they know, furthur spreading your offers and messages.

Looking for an email marketing service? Try one of these companies' helpful solutions:
Keys to email marketing success:
  • Customer-focused content
    • Tailor email messages for each audience type by incorporating information that the use would be interested in. Remember the email isn't for you; it's for your customers.
  • Only send emails to subscribers
    • Don't annoy your customers by sending emails to customers who are not subscribed to your email list.
  • Offer a way to unsubscribe
    • Give your customers the ability to unsubscribe from your email list. Give them a reason to stay a subscriber by including exclusive information or sales.
  • Keep your list updated
    • Email addresses can change frequently, make sure to stay updated on who is asking for more information or requesting to unsubscribe. Also pay attention to emails that are not being opened or for bounce-back emails.
  • Use an attention-grabbing subject line
    • Create a subject line that is going to grab the attention of the reader and excite them to open the email. Avoid subject lines that are vague such as "Our February Newsletter" and use your email topic instead.
  • Pay attention to length
    • Make sure to only include relevant information and not go into too much detail. Many people will be more likely to read emails that are interesting and concise. Use bullet points and white space for messages that contain mostly text.
  • Evaluate your success and ask for feedback
    • If your email marketing system provides reports on the success rate of your emails make sure to review the information. Use information from your report to improve your future emails. Also ask for customer feedback for information they would life to see in the future.
Want to know more? Check out these four must-haves for your e-newsletter.

Content Marketing Trends to Watch

We are always watching content marketing trends and have a short list that you should consider as you review your Internet strategy for 2014.

CC by 2.0, photo by Gerd Altmann
One of the strongest things you can add to your website strategy is a content marketing plan. Done well, content marketing can improve your SEO, enhance your brand awareness, improve lead generation, engage your customers and more. Content marketing plans require thinking beyond traditional web content and looking at new ways to enhance and expand what you offer your customers. That’s why we've highlighted the following content marketing trends - to help you be aware of what's happening and consider how to take advantage. Contact TBH Creative to learn how you can capitalize on these content marketing trends.

Three predictions of content marketing trends that will matter in 2014

Content will explode.
The sites that appear highest in search results on sites like Google have a solid combination of appropriate keyword content and current, regularly updated content. That content includes social media posts (Twitter, Facebook, Instagram, Pinterest and more), enewsletters, blogs, case studies, videos, white papers, webinars, infographics, mobile apps, digital magazines and more!

>The strongest websites are those that take advantage of different content mediums to present valuable information to their customers.

Content will be more relevant.
Organizations will soon start to realize (if they haven't already) that their website is far more than a brochure. A website is an opportunity to engage, connect and influence their audience. Good content will attract the right audience. Relevant content - content that teaches something about today's trends or helps a person understand how a news event or regulation impacts their work, content that goes beyond what an organization does and talks about related subject matter - that content keeps the right people coming back and telling others about your site.

>The most relevant websites are those that seek to connect with their audience on a regular basis.


Maybe it's time for a content audit of your site. TBH Creative can review your site and make recommendations for improvement. We can also help edit existing content or write new content. Learn more about our web content creation services.


Content marketing plans will become more common.
With content taking on more importance in websites, it will become even more important to develop a well-structured plan for that content. And with today's shifting world, it is likely worth revisiting this plan every quarter. A good content marketing plan should encompass a variety of content while also relating that content back to the service that an organization provides. The content marketing plan makes sure the increasing volume of content is relevant - it ties it all together.
>The most successful websites are those that plan to take advantage of content marketing trends.

For more on this topic, we recommend reviewing the 2014 Content Marketing Institute’s marketing research report on B2B Content Marketing.




Receive articles in your inbox