Text-based hyperlinks are a great example. Virtually every website used the same default shade of blue. It was possible to change the link color. But most sites tended to stick with blue.

Yes, it was boring on the surface. But it was also a great way to help users quickly spot links. Designers couldn’t implement fancy styles. And so, the first generation of web users learned to look for blue, underlined text.

Then CSS came along and completely changed what was possible. Hyperlinks could be any color of the rainbow. They could also sport backgrounds, animations, and custom typography.

Plus, we could change link styles based on context. That made it possible to have differently styled links in your header and content areas, for example. It’s great to have options. But there are also some drawbacks.

Sometimes we take custom link styling too far. We trade simplicity for complexity. That can make it harder for users to discern. It impacts both usability and accessibility.

So, what should we keep in mind when styling hyperlinks? Here are some tips for making them beautiful and keeping them usable.

Make Hyperlinks Easy To Recognize

Users are more web-savvy than they were a few decades ago. Web designers recognize this. But it sometimes leads them to give users a bit too much credit.

We see examples in links that are barely perceptible. Perhaps the link color is nearly identical to the rest of the text. Or the underline blends into the page background.

Subtlety has its place in design. But that doesn’t apply to hyperlinks. They need to stand out – regardless of how you style them.

The link’s color should contrast with other text. And it needs to pass accessibility guidelines as well.

Links should also include one or more design features. That could be an underline or a change in font weight. This helps colorblind individuals discern a link from plain text.

Another accessibility note: always use the outline property on the link :focus state. Users navigating via the keyboard can more easily identify your links. We’ve used it within all snippets here.

See the Pen Styling Hyperlinks:Make Them Recognizable by Eric Karkovack

Underlines Should Be the First Choice

CSS opened the floodgates in terms of how we style hyperlinks. And many designers used it to remove underlines.

Jettisoning underlines may result in a “clean” look. However, it also makes links harder to recognize. It’s particularly troublesome in body text.

Long passages of text can frustrate users. It becomes hard to maintain focus. But things get worse when they can’t spot any links within.

That’s why underlining links should be your first choice. It’s a simple feature that makes skimming content easier.

The unfortunate thing is that client preferences can get in the way. Some associate underlines with old school web design.

This is a great time to educate them. Explain how underlines help users get where they need to go. The
added convenience could result in more conversions. Hopefully, that will convince them to put users first.

Besides, we can use CSS to make underlines more attractive. The text-decoration-color and text-decoration-style properties add plenty of styling options. Underlines may be old-school, but they don’t have to be boring.

See the Pen Styling Hyperlinks:Use Underlines by Eric Karkovack

Ensure That Styling Is Consistent

Link styling should also be consistent. Navigating a website will become more predictable. Users won’t have to think twice about how to get around.

Every link doesn’t have to look the same, however. Context also plays a role here. For example, you may use different styles in your site’s header and footer. And content within a sidebar could look different than the body text.

These different styles should be implemented within reason, though. The look should fit a defined pattern.

Using radically different typography, for instance, may throw users off. As with other design elements, there should be a rhyme and reason in how links look and work.

See the Pen Styling Hyperlinks:Stay Consistent by Eric Karkovack

Links Can Be Beautiful and Functional

Styling hyperlinks runs the gamut. Some web designers completely ignore them. Others add a kitchen sink worth of custom CSS.

When it comes to usability, the former is probably the safer path. Users will be able to spot links in the middle of your content.

Still, it’s possible to achieve a balance. You can create custom styles to dress up links to match your brand. And you can do so in a way that keeps users in mind.

Therefore, don’t be afraid to experiment with link styles. Just keep your site’s goals along with best practices in mind.

The post The Dos & Don’ts for Styling Hyperlinks appeared first on Speckyboy Design Magazine.

We often use established design patterns. Navigation is placed at the top or along the side of a page. Headings and white space create content separation. You get the idea.

This process works well. But CSS allows us to go the extra mile for users. We can now cater to their preferences as well.

By detecting a user’s system preferences, we can serve styles to match. It’s all possible through CSS media features.

Here’s a look at the various user preferences we can detect. We’ll also explore how they can help us improve usability and accessibility.

What’s Being Detected? Where Does It Come From?

The term “user preference” can have multiple meanings. In web design, it has traditionally referred to saving preferences locally. A user selects from various options on your website. From there, preferences are stored and retrieved via a cookie.

But CSS enables a different approach. A media query can detect user preferences at the device level. That allows us to retrieve a user’s configuration. We can then adjust the website’s styles accordingly.

This isn’t a way to spy on users. The data doesn’t look at personally identifiable information. The user isn’t required to have an account on your website. And the data won’t allow you to track someone.

Users can set preferences in their browser or operating system. Color schemes (dark or light), color contrast, and reduced motion are primary examples. It’s up to individual websites to detect and/or respect those settings.

This method increases privacy and efficiency. Users don’t have to divulge personal information. And web designers won’t have to build custom settings.

Examples of Detecting User Preferences with CSS

Now it’s time to explore a few examples. We’ll use three media features included with CSS.

Color Scheme

The prefers-color-scheme media feature detects a user’s device color setting. The choices are “light” or “dark” modes. Both mobile and desktop operating systems offer this feature.

If a user prefers a dark color scheme, you can use CSS to implement relevant styles. Below is an example of prefers-color-scheme in action.

See the Pen Using CSS prefers-color-scheme by Eric Karkovack

So, what if a user doesn’t want a dark website? You can use a toggle to let them switch between modes. Providing this flexibility makes your website even more user-friendly.

Color Contrast

A high-contrasting color scheme is easier to read. Operating systems tend to include the option in their accessibility settings.

It’s possible to detect this preference via CSS prefers-contrast. This setting allows for a bit more ambiguity than prefers-color-scheme. Options for “more” and “less” are the most common.

However, the “custom” option requires a specific set of colors. In that case, we can use forced-colors to adapt the page.

The following example uses a gray background by default. If the prefers-contrast preference is set to “more,” we’ll change it to white.

See the Pen Using CSS prefers-contrast by Eric Karkovack

Reduced Motion

Web animation can be a great thing. It adds interactivity and context to an element. But certain types of animation can be harmful.

Users with vestibular motion disorders can become ill – or worse. That’s why it’s best to avoid intense flashing animations.

Some devices have a setting that requests that websites use minimal motion. The prefers-reduced-motion media feature will detect the setting.

The following example includes a rotating square. Note that we’ve been careful to use a slower form of movement. But if the prefers-reduced-motion setting is “reduce,” we’ll stop the animation.

See the Pen Using CSS prefers-reduced-motion by Eric Karkovack

Want to try the setting? MDN has a handy guide for locating it on your device.

Instantly Improve the User Experience

CSS provides some great ways to detect user preferences. They’re easy to use. And they take the guesswork out of building clean, accessible UIs.

Granted, we don’t have to follow a user’s device preferences. And our clients may be wary of different color schemes.

But even slight tweaks to reduce motion and increase contrast are helpful. They amount to little things we can do to improve the user experience (UX). That will benefit everyone.

The post How to Detect User Preferences with CSS appeared first on Speckyboy Design Magazine.

For beginners, tutorials are a great way to learn how to use Figma effectively. These tutorials offer step-by-step visual instructions that are easy to follow, enabling you to quickly learn new skills and improve your techniques.

Our round-up includes the best Figma tutorials available online. These tutorials cover everything from UI basics to more advanced techniques, and they will help you master Figma in no time. By following these tutorials, you’ll learn how to navigate the interface, create and edit designs, and make the most of Figma’s features.

We have also published a collection of free Figma UI templates.

Figma Tutorials For Beginners

To get started, let’s explore some winning resources for beginners. If you’re totally new to Figma, these handy tutorial guides will help you get up and running fast.

What is Figma? (Video Tutorial)

Are you just curious about Figma and what it can do? Those questions and many more are answered in this brief, bite-sized tutorial video for 2023.

Learn Figma In Under 10 Minutes (Video Tutorial)

Ready to get started with Figma? This quick intro video is a great way to get going. It covers the basics in less than ten minutes!

Design a Website from Start to Finish with Figma (Video Tutorial)

Do you want to build an entire website in Figma but need help figuring out where to start? This video is here to help, showing you how to build an entire website from scratch using Figma.

Introduction to Figma

Prefer written tutorials over videos? Try this one, with handy step-by-step guides to help you find your way around Figma and its basic features.

A Complete Figma Tutorial for Beginners

This complete guide is another resource for Figma newbies. It assists you with getting up and running, building unique content with Figma quickly.

A Beginners Tutorial to Figma (Video Tutorial)

Many of us learn best by doing. This complete video guide showcases and explains the essentials of Figma.

How to Use Figma for Your Next Project

Last but not least, start your Figma journey with this introductory tutorial. A sample design is used for a real-world example. You can follow along and learn how to start making edits of your own.

Figma Web Design Tutorials

Now, let’s dive into the details. You’ll learn how to start using Figma to design amazing websites of your own in no time. Read on!

How to Use Figma for Website Design

Figma is crafted for robust website designs. Learn how to use Figma to construct sleek, readable layouts in just a few clicks.

Advanced Features in Figma Explained (Video Tutorial)

Building a workflow in Figma is a key part of success. This video guide shows off several productivity tools that will help you work smarter and create designs faster.

Variants in Figma Tutorial (Video Tutorial)

Variants in Figma help you make alternate versions of a single object. This video shows you how to use them and offers ideas for how to leverage their power effectively.

Figma Auto Layout Tutorials

In this set of tutorials, you will learn how to use Auto Layout in Figma. With it, you can make dynamic designs that adapt to different screen sizes and layouts.

Auto Layout & Components in Figma (Video Tutorial)

You’ll learn how to use two of Figma’s essential features here. They are auto layout and components, both of which are covered here in detail. You’ll watch the features at work and learn to troubleshoot common issues.

Getting Started with Auto Layout in Figma (Video Tutorial)

Auto Layout in Figma is a newer feature for building advanced designs. It can seem daunting, but this tutorial simplifies things. It’s detailed without becoming overly lengthy.

Learn Auto Layout in Figma

Another option is this written Auto Layout article. It stands out for its detailed descriptions of Auto Layout features and how they work. Use it to boost your understanding of Figma’s creative options.

Figma Auto-Layout with Responsive Components Tutorial (Video Tutorial)

Combine the power of Auto Layout and components using the skills you’ll learn in this tutorial. They help you maintain a steady design aesthetic across projects, even while working faster.

Figma Prototype & Button Tutorials

Prototypes in Figma let you create interactive mockups of designs. Buttons are one of the critical parts of creating interactive prototypes. Here, you’ll learn to use both.

Working with Figma Button Components

Components are user interface elements in Figma. Learn how to build and work with them in this task-based tutorial article.

The Correct Way to Prototype in Figma (Video Tutorial)

Prototyping helps you see how users will experience your finished product. It ensures your content works flawlessly and stays current. To do it right, turn to this tutorial guide for Figma.

Create & Test a Prototype in Figma

Robust and detailed, this tutorial shows you how to create a prototype in Figma. You’ll learn how to connect key parts of your design, and then share it with others.

How to Create a Button With a Hover Functionality in Figma (Video Tutorial)

In this guide, you’ll learn how to create a button in Figma. This is an incredibly common use case, and here, it’s simplified so that you can get to work quickly.

Three Tips for Building Complex Prototypes in Figma

Here, you’ll learn three tips for complex Figma prototypes. They will help you dial in the specifics you need to put your work to the test.

Other Figma Tips & Tricks

To close out our tutorial roundup, we’ve compiled even more helpful resources. These written guides and videos help you make the most of Figma by unlocking its most powerful features.

10 Figma Hacks for Boosting Your Productivity

Users of every skill level can always enjoy learning new skills. Here, ten Figma tips and tricks are featured to help you do your very best work. It’s a fast read that may save you hours of work.

15 Tips to Design Faster in Figma (Video Tutorial)

Expert Figma users know tips and tricks that save time. Here, 15 of these are compiled into one fun video. It’s essential viewing if you want to master Figma.

How to Export Figma to HTML

Exporting HTML is easy in Figma – and you don’t have to learn to code! Learn exactly how in this written tutorial. Prefer a video? You’ll find a link here too.

Advanced Figma Tips & Tricks (Video Tutorial)

Advanced Figma features help you focus on details and fine-tune designs. Here, you’ll learn how to scrub fields, save image styles, add properties, and so much more.

How to Build a Design System in Figma

You don’t have to construct design systems from scratch. Figma supports work just like this, and the fundamentals are mapped out in this tutorial guide.

What is FigJam?

FigJam is a whiteboard built by Figma that works online. It’s an effective tool for design and collaboration. Learn the basics and get to work with FigJam after learning about the features in this tutorial.

The post 25 Fantastic Tutorials For Learning Figma appeared first on Speckyboy Design Magazine.

The result is an inconsistent design. Things like colors, animation speed, and element spacing can vary – simply because a designer didn’t catch every instance. Thus, the user experience is thrown out of whack.

CSS variables (a.k.a. Custom Properties) are a great way to combat these issues. Yet, not all designers know about this simple technique. Today, we’ll take you on a quick tour of what they are and what they do. Let’s dig in!

Set a Value Once, Use It All Over

Those familiar with programming languages such as PHP and JavaScript may recognize the term “variable.” A variable sets a value (static or dynamic) that can be retrieved later in a script. For instance, a PHP variable called $user_first_name might be utilized to fetch a logged-in user’s first name to display on a page.

Similarly, CSS variables are there to repeat a value throughout a stylesheet. At the bare minimum, this saves us from typing in a font family or hex color code multiple times.

You may also recognize variables from CSS preprocessors like Sass. There, variables serve essentially the same purpose (although the syntax is indeed different). However, they are not native to CSS. That means the preprocessor has to convert a variable into valid CSS.

CSS variables are a native solution. They’ll save you from having to use a preprocessor unless you really want to. Now, any stylesheet can take advantage of this handy feature.

And you shouldn’t have to worry about browser support – with a caveat. Every modern browser has supported CSS variables for quite some time. But if you’re still targeting Internet Explorer users, a fallback will be required. That is a consideration, but everyone else is good to go.

A Basic Example of a CSS Variable

Color is one of the properties that often gets repeated throughout a stylesheet. For instance, you might use the same color for specific headings, container backgrounds, buttons, and more. Using a CSS variable here makes the task of assigning and changing a value much more efficient.

Let’s use the iconic blue color of Speckyboy as an example. First, we’ll set up a variable in our stylesheet:

:root {
--speckyboy-blue: #4F78A4;
}

The variable name, --speckyboy-blue, is set to a hex color code. From there, it’s a matter of calling the variable for every instance where we want to use this pretty shade of blue.

If we wanted to use this as a text color on an element in our stylesheet, the syntax would look like this:

color: var(--speckyboy-blue);

The following example shows how the variable can be used in multiple places. We also threw in another variable for our top and bottom margin value to keep spacing consistent throughout our design for good measure.

See the Pen Basic CSS Variable by Eric Karkovack.

Future changes will now be much easier as well. Because of the CSS variables in the above snippet, we now only have to change the hex color of --speckyboy-blue or the pixel value of --vmargin. Those values will cascade down to every instance in our stylesheet.

CSS Variable Resources

Our example only scratches the surface of what is possible with CSS variables. It’s worth digging a little deeper to see how it can be used in more advanced scenarios. The resources below are a great place to learn more:

• A Practical Guide to CSS Variables (Custom Properties) by SitePoint
• Everything you need to know about CSS Variables by freeCodeCamp
• Global and Component Style Settings with CSS Variables by Sara Soueidan
• It’s Time To Start Using CSS Custom Properties by Smashing Magazine
• Logical Operations with CSS Variables by CSS-Tricks
• MDN: Using CSS custom properties (variables) by MDN
• What is the difference between CSS variables and preprocessor variables? by CSS-Tricks

The post How CSS Variables Can Improve Efficiency & Consistency appeared first on Speckyboy Design Magazine.

CSS media queries have long been the go-to tool. But it’s getting more difficult to account for evolving screen resolutions. If a device fails to match the viewport range you’ve set, the results can be less than ideal.

That’s where CSS clamp() can make a positive impact. It doesn’t rely on predefined viewport sizes. Instead, it provides a range of values and allows the web browser to scale an element as needed.

clamp() doesn’t necessarily replace the need for media queries. But it may well reduce the number of styles we place within them.

The following are basic examples of how clamp() can be used to produce better responsive designs. Let’s get started!

What Is CSS clamp()?

The concept of clamp() can be a bit confusing. But stripped down to the basics, it provides a way to combine the min() and max() functions into a singular line.

So, before we go any further, it’s important to note that clamp() is a means of setting a minimum and maximum value for an element. That could be text, the sizing of a container, or just about anything else that needs to be responsive.

A typical line could look something like this: font-size: clamp(1.125rem, 2vw, 1.5rem);

Note the first and last values. In this case, 1.125rem is the minimum value, while 1.5rem serves as the maximum.

Still with us? Great! Now, about that rascal in the middle…

The middle number above (2vw) is our preferred value. MDN defines it as: “The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.”

As such, we can think of it as the border between two countries. Move to the left, and you’re in Portugal, where the minimum value applies. Go to the right, and you’re in Spain, where the maximum will be used.

The preferred value can be a constant number or a mathematical expression. This allows for fine-grain control over how it’s calculated.

But back to our example. Taking a cue from MDN’s documentation, our font size will initially be set at 1.125rem.

However, once our preferred value of 2vw is greater than 1.125rem, our text will scale up to the maximum of 1.5rem.

In practice, small screens will see the minimum value, while big screens get the maximum. The preferred value merely sets the threshold.

A Few Basic Examples of clamp()

Now that we know a bit more about what clamp() does, let’s take a look at it in action. The following are examples that demonstrate the function’s basic capabilities.

Fluid Typography That Adjusts to Screen Size

Creating responsive styles for text can get complicated. Staying with the desktop sizing may look overwhelming on mobile. But applying new sizing for each CSS media query means more maintenance. And getting the scaling just right can be a pain.

Thankfully, fluid typography is an area where CSS clamp() excels. The function allows text to scale based on the parameters you’ve set. Best of all, a single line of code replaces what used to require multiple instances.

Here, we’ve set our body and h2 text to scale based on the viewport. Large viewports will see bigger fonts. Meanwhile, the text shrinks accordingly on smaller screens.

Our body text will display between the defined minimum and maximum sizes (1.125rem – 1.5rem, or 18px – 24px). The h2 text has a min/max of 2rem – 2.75rem (32px – 44px).

See the Pen CSS clamp() Demo – Heading & Body Text by Eric Karkovack

A Container That Adjusts for Large Viewports

When dealing with responsive containers, we can’t forget about large screens. 1080p (1920×1080) is now serving as something of a minimum resolution for desktop and laptop devices. Thus, it’s important to consider how layouts impact these users.

A container that stretches the full width of the viewport can be cumbersome – particularly if it includes text. Having too many characters per line makes the text harder to read on large screens. Whereas this configuration is more desirable on mobile.

This example uses clamp() to improve the user experience across viewports. Small screens, where our maximum value of 90vw is greater than our 1100px preferred value, will receive a wide container.

On large screens, the container will display at its preferred value. This should make for easier reading.

Also of note is our minimum value of 40vw. It only comes into play on exceptionally large viewports. The value could be increased if you want to see it triggered sooner.

See the Pen CSS clamp() Demo – Container Width by Eric Karkovack

clamp() Down on Your Responsive Styles

As CSS evolves, it provides us with more advanced tools. They often increase efficiency and push more of the “dirty work” to browsers. clamp() certainly fits this mold.

In this case, it means having less code to maintain. By reducing the number of styles we place into media queries, clamp() makes our job easier. In addition, it keeps our designs looking good across devices – even those with unique viewports.

Best of all, it’s supported in all modern browsers. Therefore, it’s something you can immediately add to your workflow.

To learn more, please check out the resources below!

Further CSS clamp() Resources

• clamp() by MDN
• min(), max(), and clamp() CSS Functions by Ahmad Shadeed
• min(), max(), and clamp(): three logical CSS functions to use today by Una Kravets
• Intrinsic design, theming, and rethinking how to design with WordPress by Justin Tadlock
• Modern Fluid Typography Using CSS Clamp by Adrian Bece

The post Better Responsive Design With CSS clamp() appeared first on Speckyboy Design Magazine.

If you’re looking to learn more about what CSS Grid is and what it does, you’ve come to the right place. We’ll provide a rundown of what you need to know, along with some helpful resources to get you started.

First Thing’s First

One thing we need to note is that, as of this writing, CSS Grid is still a work in progress according to the W3C. That means that the final version of this specification hasn’t been fully released just yet. Overall, browser support is a bit spotty. But that will certainly change as the final spec rolls out.

That being said, it’s never a bad idea to get ahead of the curve when it comes to learning new techniques. Just keep in mind that some things may change between now and the official release. With that fair warning out of the way, let’s dig in and learn more about this important development in web design.

Layout in 2-D

CSS Grid is a system that allows for building 2-D grid layouts. While the term “2-D” doesn’t sound so groundbreaking, it absolutely is in this particular case. You see, CSS Grid will allow you to manage layout according to both columns and rows.

Flexbox, by comparison, is really just meant for columns (1-D, if you will). Using CSS Grid, designers will be able to achieve layouts that were downright difficult before. In fact, some of these things were on our wish lists since the days of table-based layouts.

With tables, it was easy enough to have a column take up multiple rows using the rowspan attribute. CSS didn’t really have a direct equivalent. That led to using multiple nested containers, floats, clearfixes, etc., to achieve the desired effect. This is exactly what CSS Grid aims to fix.

The good thing is that if you are at all familiar with Flexbox, then you’ll be off to a great start with CSS Grid. With both Flexbox and CSS Grid, things are set up via a parent container and subsequent items (children). And, like Flexbox, content order can be set via CSS. This is particularly nice when adjusting the content for mobile devices. What shows up first on a desktop grid may be pushed down lower in the display order on smaller screens.

A Simple CSS Grid Example

Let’s look at a very basic CSS Grid layout. There are three columns and two rows. The third column is unique in that it spans both rows and will display on the right side of the layout.

It actually takes very little code to make this happen. Take a look:

The CSS:

.container {
display: grid;
grid-template-columns: [col1] 33% [col2] 33% [col3] 33%;
grid-gap: 10px;
grid-template-rows: [row1] 47% [row2] 47%;
text-align: center;
color: #FFF;
}

.grid-cell-1 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-2 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-3 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-4 {
background-color: #658db5;
padding: 25px;
border-radius: 6px;
}

.grid-cell-5 {
background-color: #898989;
grid-column: 3 ;
grid-row: 1 / 3;
padding: 25px;
border-radius: 6px;
}

A few notes on the CSS:

• In .container, notice that we have the ability to define the width of columns and height of rows. We can also individually name columns and rows with the use of brackets: [name]
• .grid-cell-5 has a couple of interesting attributes. grid-column: 3; tells the browser to start this item as the third column. Meanwhile, grid-row: 1/3; says that the cell will span from the first row until the start of the (non-existent) third row.

The HTML:

Doing this type of layout without CSS Grid would be significantly more challenging. There are, of course, several more complicated layouts that can be achieved. But hopefully, this will illustrate the ease with which something basic can be set up.

The Demo:

See the Pen Simple CSS Grid by Eric Karkovack

CSS Grid Resources

There are a number of outstanding guides and tutorials out there to help you make the most out of CSS Grid. Here are just a few to get you started:

• 10 Creative Examples of CSS Grid in Action
• A Complete Guide to Grid By Chris House
• CSS Grid Layout By Mozilla Developer Network
• Grid by Example By Rachel Andrew
• A Complete Guide to CSS Grid By Codrops CSS Reference
• An Introduction to the CSS Grid Layout Module By Ahmad Ajmi

The post An Introduction to CSS Grid appeared first on Speckyboy Design Magazine.

We can use it to craft virtually any layout imaginable. Special effects and interactivity that used to require JavaScript or browser plugins are now supported natively. The language has gone from a basic tool to one of the foundational technologies behind every website.

But like any powerful tool, CSS can also have unintended side effects. Accessibility is among the biggest areas of concern. Some implementations can indeed do more harm than good.

With that in mind, let’s look at a few CSS practices that can hurt accessibility. They include common features that require careful consideration before you start writing code. Let’s get started!

Displaying Important Text Using the content Property

The CSS content property offers a slick way to add visual enhancements to an element. For example, you might use it in combination with a pseudo-element to add an icon before a passage of text or list item. It can also display images or strings of text.

But that last one can be particularly troublesome. Text added via the content property is not included in the document object model (DOM). That means assistive technology such as screen readers may not recognize it.

This is fine for purely decorative items. However, it could lead to accessibility issues if the text provides vital context to a page. Users may miss out on important information.

Therefore, it’s best to avoid using the content property for displaying text. That is unless you’re confident that it won’t interfere with a user’s ability to comprehend the page.

Creating Intense Flashing Animated Sequences

Animation is an area where CSS has seen a major evolution. Effects that were once the territory of third-party libraries can now be crafted with relative ease. And since they’re natively supported, they can take advantage of features such as hardware acceleration to boost performance.

Basic transitions and transforms can do wonders to create a mood and grab a user’s attention. And it’s also possible to construct incredibly realistic effects with the help of JavaScript.

But certain animation styles can have negative effects. For some users, too much movement can be disorienting – or much worse. Intense flashing or strobe effects can lead to seizures. This is possible on the web – just as it is in movies, television programming, and video games.

The WCAG 2.0 offers some research-backed guidance for creating animations that won’t trigger seizures or other adverse reactions. For instance, it’s recommended that a presentation is set to flash no more than three times per second, along with keeping sizing small and avoiding the color red.

Thankfully, this doesn’t limit our ability to impress users with movement. There are still plenty of opportunities to enhance our work. But the types of animation used and their potential impacts must be scrutinized.

Unintuitive :hover or :focus States on Interactive Elements

CSS is adept at styling interactive elements. Consider what’s possible with everyday items such as hyperlinks and form fields. They can be customized to the point of being unrecognizable when compared to their default look.

That’s all well and good. But it’s also important to think about what happens when a user interacts with an element. Imagine clicking a button that doesn’t offer any visual cues to confirm what has happened. Or using a keyboard to tab through a menu that doesn’t highlight the current link.

They may be simple, but these micro-interactions help provide users with context. Confirming a button click or understanding what menu item your cursor is focused on are just two examples. And each brings a sense of confidence as a visitor browses a website.

The initial styling of an interactive element is only half the battle. Offering intuitive styles for the :hover and :focus pseudo-classes complete the user experience.

It’s worth noting that these styles should be easily perceptible. In practice, that means using more than just color as an indicator. Adding animations, outlines, or icons can help ensure that no one is left out.

Taking the Basics of Accessible Design for Granted

We’ve all been there. A project deadline is rapidly approaching and you need to get things done. In the race to launch, some accessibility-related items might slip through the cracks.

Quite often it’s the basics of accessible design that get left behind. Those CSS practices that designers might take for granted and assume are already up to standard.

Prime examples include fundamentals such as legible typography and acceptable color contrast ratios. Without considering and testing these items, a website might not be as accessible as you think.

That’s why it’s worth taking some extra time to review the broader aspects of your site’s styles. Even if an item passes the “eyeball” inspection, go the extra mile to perform an audit. You might be surprised at how many opportunities for subtle improvement you’ll find.

It’s about Using CSS Responsibly

Because CSS is so powerful, it’s easy to be tempted by the possibilities it has to offer. Why settle for a basic animation when you can create something cinematic? And how could we not love the convenience of using it to generate content?

It all comes down to empathy and responsibility. Like any tool, CSS is capable of great things. But just because we can implement a specific feature doesn’t mean it’s right for accessibility. We live in a world where people from all walks of life will consume what we build. And it’s our job to ensure they can do so without obstacles.

The bright side is that avoiding the practices above is within everyone’s reach. For the most part, it’s a matter of thinking about the potential impact of what we do. From there, testing provides us with the data we need to refine things further.

CSS is there to make accessibility easier. It’s all in how we choose to use it.

The post The CSS Practices That Can Hurt Accessibility appeared first on Speckyboy Design Magazine.

That being said, not all web designers and developers follow best practices. If you want to be a good web designer/developer, writing clean, manageable CSS is a healthy habit to make your code easier to maintain as your project development progresses.

Even if you’ve been building web pages for a quite a while, you may still have a few bad CSS writing habits that you’re better off forgetting. This post will also introduce you to some techniques that will help you get the most out of CSS and write beautiful, manageable stylesheets.

Let’s begin:

Bad CSS Practices

Using the Same Rule Repetitively

A lot of beginners use repetitive rules for each element. If you want to create a rule for multiple elements, use a class attribute instead.

For instance, instead of repeating color: blue rule for every tags and ID:

#intro1 {color: #3498db; font-size: 10px; font-weight: bold;}

header {color: #3498db; font-size: 20px; background-color: green;}

#banner {color: #3498db; font-size: 30px; background-image: url(images/static.jpg);}

Use a class instead:

.blue {color: #3498db;}

Using an ID Selector for Multiple Elements

When writing CSS, there should only be one ID in the HTML. Always use the class attribute for multiple elements.

For instance, instead of:

<p id="big">This is a great heading.

<p id="big">This is absolutely a greater heading.

You should use:

<p class="big">This is a great heading.

<p class="big">This is absolutely a greater heading.

Over Using the !important Rule

The !important rule was conscripted in the mid-to-late 90’s to help web designers and developers override the rules of their style sheet. The !important rule prevails over all the previous styles and says, “I’m more important, forget about all of that other CSS and use me!“. Using this out of laziness will give you a headache later on as your style sheet will be harder to maintain.

For instance:

header { 
    color: #e74c3c; 
}
header.intro {
    color: #3498db !important;
    font-size: 20px;
}
header#capture { 
    color: #2ecc71; 
    font-size: 20px;
}

In the above example, the header color is red. Except the header with the class intro and the one with the ID capture. The importance of the entire rule (both the color and font-size in this case) is accomplished by the specificity of the selector.

If you use !important, it is added at a property level, not a selector level. This means that the color property has a higher importance than the font-size. The color is more important than the color in the header#capture selector too.

Recommendation: You should only use the !important rule when overriding styles in a user style sheet, overriding 3rd party code and inline styles as well as utility classes.

Using the !important rule is often considered a bad practice due to the clutter it can bring with one of CSS’s core mechanisms which is specificity.

Using Inefficient CSS Selectors

When you are using selectors, the longer it is, the higher specificity it will comprise. This can break the CSS cascade and mess up the styles of your site.

This can be avoided by not using IDs within the selectors as they are directly specific.

For instance, we have these long selectors:

#header #intro h1.big a {... }

#header #intro h1.big a.normal {... }

We can compress it up to two or three levels deep:

.big a {... }

.big .normal {... }

Using Tons of Webfonts

It is understood that typography is a fundamental element of good web design, branding and readability.

However, regardless of the viewport size and resolution, web fonts are crucial to good web design, UX, and performance. Each font is an additional resource and not all web fonts render text well.

Depending on how you optimize the font and how they are loaded, it may affect the page size and the rendering time.

It is recommended to use one or two (probably a maximum of three) web fonts for your site and fall back to the browser defaults to keep your site optimized.

Using Inline Styles

Using Inline Styles is probably one of the worst CSS practices that many web designers and developers are still doing to this day. It transgresses the main goal of why we use CSS – which is to separate style from the HTML structure. This breaks the specificity of web pages.

It’s considered a good habit to keep your CSS and HTML separate. When you add inline styles, it makes it difficult revising the design of your site and makes your code harder to manage.

However, you can use inline CSS for HTML emails as many rules are not supported by email clients. This is an important thing if you are creating newsletter designs.

Overall, inline styles are at the lowest level of the cascade as they’ll override all other styles, so you need to be careful when using it.

CSS Good Practices

Now that we’re done talking about bad practices in writing CSS, let’s now take a look at some of the good ones.

Use a CSS Table of Contents

It is recommended to use a CSS table of contents when starting your style sheets. This will help you track down your code easily as you move along. Keep things organized and you will write styles more efficiently.

Consider this example below:

/* Project Meta */

/* reset  */

/* general */

/* typography */

/* grid */

/* header */

/* footer */

/* Page template A */

/* Page template B */

/* Media Queries */

Make Your CSS Readable

Writing clean sets of rules involves making the code readable. Having a readable CSS makes it much easier to maintain in the future, as you’ll be able to find each rule more quickly.

There are two ways you can make your CSS readable.

1. One line Form

.box {background: #3498db; border: 1px solid black;}

2. Standard Form

.box {
background: #2ecc71;
border: 1px solid black;
}

Separate jQuery Plugin Stylesheets

If you are using jQuery plugins, you need to put their styles into another style sheet and name it an easily remembered name such as JS-plugin.css. This will help you organize all of your CSS, in particular when you need to add or modify styles of your jQuery plugin.

Use a CSS Reset

A CSS Reset (or “Reset CSS”) is a compressed or minified set of CSS rules that resets all the styles of your HTML. Adding a reset reduces browser inconsistencies by providing general styles that can be modified and extended.

The MeyerWeb is the most popular and widely use CSS reset, although there is another option which is normalize.css by Nicolas Gallagher. It’s a modern HTML5 kind of CSS reset. You can use a CSS reset by either placing the source file link in your HTML file or copying the whole CSS reset into your style sheet.

Add CSS3 Animations Last

It is recommended to add CSS3 animations last in your style sheets to avoid any discrepancy when editing rules higher in the sheet. This will make the web browser load the important and basic CSS first before executing the animations.

Combine Elements

If elements within your style sheet share the same rules, you can simply combine all of them in one line or in a standard form instead of rewriting code over and over again.

For instance, your h1, h2, and h3 elements might all share the same font-family and color.

h1, h2, h3 {font-family: 'Lato', sans-serif; color: #dadada;}

Use Shorthand Properties

Shorthand properties allow you to set the rules of numerous CSS properties simultaneously. Using a shorthand property will shrink your CSS and increase readability.

For instance, instead of using margin-top, margin-right, margin-bottom, margin-left separately you can simply use just one line.

#div {

margin-top: 10px;

margin-right: 10px;

margin-bottom: 3px;

margint-left: 4px;

}

#div {margin: 10px 10px 3px 4px; // top, right, bottom left}

Always Use Comments

One of the best practices for writing CSS is placing a comment on each group of elements. This will give you an ease of accessibility when you are looking for a specific groups.

/* GENERAL RULE */

html,

body {

font-family: 'Lato', sans-serif;

height: 100%;

background: #ecf0f1;

overflow: hidden;

}

h1 {

color: #3498db;

text-align: center;

font-size: 35px;

margin: 100px 0px;

font-weight: 700;

}

Use CSS Preprocessors

This is is a hot topic lately. A CSS preprocessor is a scripting language that extends CSS and then compiles it into regular CSS files.

There are three primary CSS preprocessors available today, Sass, LESS, and Stylus. Using a preprocessor can help speed up your development process as it minimize the repetitive tasks such as placing hex color values, closing your tags and so on that every web designers and developers often encounters.

Compress Your CSS

Another way to write efficient CSS is to shrink the file size by using tools like CSS compressor or Minify CSS to help the browser speed up the loading time. This will remove white spaces, line breaks as well as repetitive CSS styles.

Use Hex Color Often

There are several opinions and arguments on the web when it comes to choosing between Hex color and color name values. Different browsers may be unable to define what some color names mean. Hex color values are assured of matching across a palette of 16,777,216 colors while HTML and CSS are limited to 140 colors. There are not names for all 16 million 24-bit colors, so Hex is a good choice when it comes to choosing and deciding which color variation you should use.

You can check the CSS Color Module Level 3 here for more information.

Validate

Validating CSS with the W3C free CSS Validator will help you check your code and see if there are any errors. Things like aforgotten closed bracket or missed semi-colon will be easily found by this handy tool.

Try it out!

What’s Next?

After discussing the good and bad CSS practices, it’s now time for you to apply what you’ve learned here.

A sign of maintainable HTML, CSS, and JavaScript is when web designers and developers can easily and quickly modify parts of the code without affecting other, unrelated parts.

What are your thoughts? What good and bad CSS practice can drive you off the wall? Please leave a comment below.

The post The Good & Bad CSS Practices for Beginners appeared first on Speckyboy Design Magazine.

Its greatest feature is its ability to manipulate an item’s width/height to occupy all the space within its container (also known as a “flex container”) – otherwise, it shrinks to prevent overflow.

Unlike the regular CSS box model, flexbox offers an enhanced model for block elements without the use of floats. And, it supports direction – which means you can control the flow of each item vertically or horizontally. Almost all browsers that are active today support it, so it’s good to know how it can be used on different kinds of projects.

To give you an idea of how amazing flexbox is, I wrote this quick tutorial to show how you can use it on your website. We’ll use flexbox properties and media queries to enable the responsive layout of each element on different screen sizes and show you the advantages of using it on your projects. Let’s get started.

If you’re new to flexbox, you might also like to take a look at these Guides, Tools & Frameworks for getting started with CSS flexbox.

Navigation Bar Using Flexbox

Flexbox is perfect for creating a responsive navigation. You can lay out the navigation in one column on smaller viewports, scale it up on medium size viewports and position it in one row on large and extra-large viewports. Let’s look at how to create a navigation using flexbox.

For the HTML, we will wrap our navigation within a header tag. We will use an unordered list (ul) for our links with their respective classes. Here is the HTML:

<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

For the CSS, we will first add the basic styles that we need:

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h2,h3,a {
  color: #34495e;
}

a {
  text-decoration: none;
}

.logo {
  margin: 0;
  font-size: 1.45em;
}

.main-nav {
  margin-top: 5px;
}

.logo a,.main-nav a {
  padding: 10px 15px;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.main-nav a {
  color: #34495e;
  font-size: .99em;
}

.main-nav a:hover {
  color: #718daa;
}

.header {
  padding-top: .5em;
  padding-bottom: .5em;
  border: 1px solid #a2a2a2;
  background-color: #f4f4f4;
  -webkit-box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  -moz-box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  box-shadow: 0 0 14px 0 rgba(0,0,0,0.75);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

When the viewport is 769px or wider, we will use flexbox to change the vertical layout of the navigation to a horizontal layout. That will fill the horizontal space of the large and extra-large screens and devices.

To do that, we will use media queries to manipulate the layout. We will declare the display: flex to set the flexbox on all elements. We will also set the flex-direction: column to set the axis of our element from top to bottom.

@media (min-width: 769px) {
  .header,.main-nav {
    display: flex;
  }

  .header {
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }
}
}

On a screen size with a minimum width of 1025px, we will set the flex-direction: row with justify-content: space-between. This means that our header will be displayed horizontally instead of vertically.

@media (min-width: 1025px) {
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
}

Here is the final output:

See the Pen Flexbox Navigation Bar by Sam Norton

Thumbnail Gallery with Flexbox

Thumbnails are smaller versions of images that are organized in a particular area of a website to give you a hint of how the full-sized picture looks. Usually, thumbnails are used for image galleries. With flexbox, you can create thumbnails using the row property while manipulating the display size of the image.

For our thumbnail example, we will create a div with a class of thumb that will wrap all of our thumbnail images. This will also be our flex container.

<div class="thumb">
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
  <div><img src="https://www.iliveaccountable.com/wp-content/uploads/2016/05/thumb.jpg"></div>
</div>

For our CSS, we will set a width for the flex container, which is the thumb class. We will then set the display to flex to set the flexbox property inside it. There are three properties that we need:

• flex-wrap – to set our flexible items in a single line or can be flowed into multiple lines. In this case, we use wrap. This means our thumbnails will be set to the multi-lines direction.
• flex-direction – to specify the direction of the flexible items. In this case, we set it to columns. This means our thumbnails will be displayed from top to bottom.
• flex-flow – which is a shorthand property for the flex-direction and the flex-wrap.

.thumb { 
  width: 30%;
  margin: 0 auto;
  border: 1px solid #898989;
  padding: .6vw;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Next, we will set the width on our images using the box-flex property to auto. To specify a -moz-box or -webkit-box grows to fill the box that contains it. The rest of the code is simple media queries to manipulate the padding on a viewport with a maximum width of 480px.

.thumb div { 
   width: 100px; 
  margin: .6vw; 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
}
.thumb div img { 
   height: auto; 
  width: 100%; 
}
@media screen and (max-width: 480px) {
  .thumb div { margin: 0; }
  .thumb { padding: 0; }
}

Flexbox Forms

A form is a vital part of every website. It enables users to input data using checkboxes, radio buttons, or text fields that are sent to a server for processing. With flexbox, you can create responsive forms without depending too much on media queries.

Let’s first create our text fields and wrap them within a form tag. For our container, we will use a div with a class of form.

<div class="form">
  <form action="#">
    <div>
      <p class="title">Registration Form</p>
      <p><label for="first name">First Name :</label> <input autofocus="" id=
      "first_name" type="text"></p>
      <p><label for="last name">Last name :</label> <input id="last_name" type=
      "last_name"></p>
      <p><label for="email">E-mail :</label> <input id="email" type=
      "email"></p>
      <p><input class="btn" type="submit" value="Register"></p>
    </div>
  </form>
</div>

For our CSS, we’ll add first the basic styles:

form {
  border: 1px solid #555;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  margin: 0 auto;
}

.title {
  font-size: 27px;
}

.btn {
  position: relative;
  vertical-align: top;
  height: 40px;
  width: 25%;
  padding: 0;
  font-size: 15px;
  color: #fff;
  text-align: center;
  background: #4d4d4d;
  border: 0;
  border-bottom: 2px solid #d0d0d0;
  cursor: pointer;
  margin-left: auto;
}

label {
  width: 7em;
  margin-right: .5em;
}

Now to make it responsive, let’s add display:flex on the paragraph label tag so that it collapses on smaller screens. We will also add flex: 1 on our input type to enable all of the flexible items on the same length inside the same container. We will then add our media queries for screens with a maximum width of 600px and display the labels of each field as block elements as well as the button element.

input:not([type="submit"]) {
  flex: 1;
  padding: 10px 20px;
  box-sizing: border-box;
}

p {
  display: flex;
}

@media (max-width: 600px) {
  p {
    display: block;
  }

  input {
    width: 100%;
  }

  input[type="submit"] {
    width: 100%;
  }
}

Check the final output below:

See the Pen Flexbox Forms by Sam Norton

Sticky Footer with Flexbox

A sticky footer is a footer that “sticks” to the bottom of the screen no matter how long or short the content of the web page is. While there are several ways to create one, flexbox is a great option.

For our HTML, let’s create a simple web page using the header, section, and footer tags:

<header>
  <h1>A Big Header</h1>
</header>
<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
  <p>© Flexbox Sticky Footer</p>
</footer>

For our CSS, we will set the display: flex property to our body tag to enable flexbox. We will also set the flex-direction column to set the direction of the flex items from top to bottom, along with some basic styles.

body {
  font-family: 'Montserrat',sans-serif;
  line-height: 1.6;
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

Since we are using the section tag as our container, we will set the flex property to 1. This sets the section content to the same length regardless of its content relative to the rest of the container.

section {
  padding: 10px;
  flex: 1;
}

The rest are just simple styles for our elements.

Check out the demo below:

See the Pen Flexbox Sticky Footer by Sam Norton

The CSS3 Flexible Box is a very helpful feature nowadays. Many web designers and developers find it easier to use on their websites than the typical CSS layout model.

The post Getting Started With CSS Flexbox Using Practical Examples appeared first on Speckyboy Design Magazine.

Yet there are times when a specific part of a design doesn’t quite fit the mold. It may be a one-off design feature that is utilized on a single page or area of a site. For example, home pages often include elements that don’t carry over to secondary pages. Individual blog posts might also require a certain formatting of their own.

The trouble is that the HTML markup may be same throughout the website. Think of a WordPress theme that has the same structure for every page. How can you target only specific instances of an element?

This is where the CSS :not pseudo-class comes in handy. It allows you to target elements that do not match a list of provided selectors. The result is more fine-grain control over those niche design features.

Let’s take a look at a few scenarios that demonstrate the power of :not.

Full-Width Content on the Home Page

In our first example, let’s consider a home page that is going to use full-width content. Perhaps it has a lot of content and a wide layout would take advantage of large screens. However, that’s the only place we want to add this style for now.

We’ll also assume that we’re adding a CSS class of .home somewhere on the page, while secondary pages get their own class of .secondary-page.

The goal is to adjust the width of the #content element only for pages that don’t include the .home class.

This allows us to implement full-width content on the home page, while keeping it at 66% wide everywhere else. So, even if a page has a class other than .secondary-content, that rule still holds true.

Here’s how it looks in practice:

See the Pen CSS :not – Full-width content for a home page by Eric Karkovack (@karks88)
on CodePen.

Remove Text Decoration on Hyperlinks Outside the Content Area

Underlining hyperlinks is helpful for accessibility. However, there may be places within a website where you don’t necessarily want this visual enhancement. Navigation bars and even footers might eschew underlined links altogether.

In this scenario, we’ll underline links – but only within the #content element. Every other area of our fictional page will forego them.

To accomplish this, we’ll look for child elements of the .container element, which wraps around the entirety of the page. Links that are not within the #content element will have a style of text-decoration: none;.

See the Pen
CSS :not – Underline links within #content by Eric Karkovack

Change a Text Heading Style When Inside of a Multi-Column Layout

Typography styles are often adjusted for different types of page layouts. You might want to use different font sizes and margins, for example, within a multi-column layout as opposed to a single-column page.

Large text headings could be especially overwhelming when used in smaller spaces. With this example, we’ll adjust <h2> elements to better fit in these situations.

Specifically, the CSS we’ve written assumes that any <h2> elements that aren’t within in a container using the .single_column class should be made smaller. In addition, we’ve changed the color and a few other properties.

See the Pen CSS :not – Different heading styles for multi-column layouts by Eric Karkovack

:not a Bad Way to Control Your CSS

Part of the beauty of CSS is in its flexibility. There are often a number of ways to accomplish a given goal. This allows web designers to work more efficiently than ever.

The :not pseudo-class is yet another helpful tool. You may have looked at the scenarios above and thought of other techniques for doing the very same thing. And there are indeed times when you might want to take a different approach.

But in many cases, :not can increase efficiency. It saves us from individually targeting multiple selectors that require similar styling. And, as previously mentioned, it’s great for those one-off design elements that we want to stand out. Browser support is also very strong.

It should be noted that :not does have some limitations. Also, it requires a bit of background on how the CSS cascade works. Therefore, writing an effective piece of code can take a few tries.

Still, it’s worth learning. Once you get the syntax down, you might be surprised at how truly useful this functionality is.

The post How to Target Design Elements with the CSS :not Pseudo-Class appeared first on Speckyboy Design Magazine.