3. Mastering of Pseudoelements and Pseudoclasses | Professional CSS3

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Professional CSS3

By : Piotr Sikora

2 (2)

Professional CSS3

2 (2)

By: Piotr Sikora

Overview of this book

CSS is the preferred technology to design modern web pages. Although CSS is often perceived as a simple language, applying modern styles to web pages with CSS and maintaining the code for larger websites can be quite tricky. We will take you right from understanding CSS to designing high-quality web pages in CSS3. We'll quickly take you through CSS3's features, and show you how to resolve common issues so you can build your basic framework. Finally, you will learn about code architecture and CSS methodologies used in scalable apps and you'll explore the various new features of CSS3, such as FlexBox, to help you create the most modern layout methodologies. By the end of the book, you will be a master at creating pure CSS web pages and will know sophisticated web design techniques, giving you an edge over other web designers.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Foundations and Tools

1. Foundations and Tools

Choosing the right IDE

Cross browser compatibility – which browsers should you install?

Preprocessor – why should you use them?

SASS foundation

Simple automatization (with Gulp)

Pixelperfect layouts tools

Checking compatibility

Good assumptions in code

Creating proper selectors

Preparing your project

Summary

2. Mastering of Fundamentals

2. Mastering of Fundamentals

Traditional box model

Floating elements

Display types

CSS elements positioning

Summary

3. Mastering of Pseudoelements and Pseudoclasses

3. Mastering of Pseudoelements and Pseudoclasses

Pseudoclasses

Usage of pseudoclasses

Supporting forms styling with pseudoclasses

Drawing primitives with CSS

Pseudoelements

Summary

4. Responsive Websites – Prepare Your Code for Specific Devices

4. Responsive Websites – Prepare Your Code for Specific Devices

The foundation of responsive websites

Media queries – where can you use it

Usage sample – main navigation

Summary

5. Using Background Images in CSS

5. Using Background Images in CSS

CSS backgrounds

Retina problems

Summary

6. Styling Forms

6. Styling Forms

Forms – the most known issues

Forms – enable superpowers

Summary

7. Resolving Classic Problems

7. Resolving Classic Problems

Centering elements

Dealing with opacity

Summary

8. Usage of Flexbox Transform

8. Usage of Flexbox Transform

Flexbox

More about transform

Summary

9. Calc, Gradients, and Shadows

9. Calc, Gradients, and Shadows

The calc() method

Gradients in CSS

How to add box-shadow

How to add text-shadow

Additional font and text features

Data attribute

Summary

10. Don't Repeat Yourself – Let's Create a Simple CSS Framework

10. Don't Repeat Yourself – Let's Create a Simple CSS Framework

File structure

Short forms of useful elements

Other mixins

Media queries

Grids

Standard reusable structures

Gathering other reusable mixins

Let's test and use our framework

Remember!

Summary

11. Mailers Fundamentals

11. Mailers Fundamentals

Testing your mailer

Back to tables

Targeting specific devices through media queries

Inlining the e-mail template

Tips for e-mail template development

Testing with Litmus

Summary

12. Scalability and Modularity

12. Scalability and Modularity

Building scalable and modular code

CSS methodologies

Which methodology should you use?

Maybe your own methodology?

Summary

13. Code Optimization

13. Code Optimization

Self-optimization

Summary

14. Final Automatization and Processes Optimization

14. Final Automatization and Processes Optimization

Gulp

Jade as your templating engine

UnCSS

Minifying CSS

Final automatizer

Summary

Index

Index

Pseudoclasses

Pseudoclasses are used in CSS to describe elements, behavior after specific actions. Actions supported by pseudoclasses are as follows:

Mouse hover
Mouse click/touch
Input focus

Another use of pseudoclasses is matching elements in a specific container described by the order in this container:

First child, last child
Any child
Any child of type

The most important feature of pseudoclasses you can see on links (<a> elements with href attribute).

How can we check :active, :hover state?

Hover state can be checked whenever you move your mouse pointer over the link. The easiest use of this property can be checked with the following code:

HTML:

<a href="#"> Title of link</a>

SASS:

a
  color: #000
  background: #fff

a:hover
  color: #fff
  background: #000

Generated CSS code:

a {
    color: #000;
    background: #fff;
}

a:hover {
    color: #fff;
    background: #000;
}

With the preceding code, whenever you hover the mouse over the link, the color and background of the link will...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Professional CSS3

Search

Your notes and bookmarks