Professional CSS3

Piotr Sikora

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781785880940
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

Harness the power of CSS3 to design stunning, modern websites

About This Book

• Explore the CSS files structures, add the right methodologies, and get a final product without any code chaos
• Make your websites faster, more responsive, and more efficient using the minimum CSS code
• Design better and more modern websites using the new features of CSS3

Who This Book Is For

This book is for web designers who wish to learn the best ways to work with CSS for web development.

What You Will Learn

• Familiarize yourself with the concepts of CSS and the SASS pre-processor
• Get familiar with selectors to build better CSS code
• Gain knowledge on the common issues with CSS and discover the solutions
• Write scalable code using various CSS methodologies and optimization techniques
• Create a simple and reusable framework based on SASS
• Explore the various tools involved in CSS code creation

In Detail

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.

Style and approach

This book is packed with several code examples that you can easily test in all types of browsers.

Each example provides a detailed description of the inner workings of CSS techniques.

Professional CSS3

---

Table of Contents

Professional CSS3

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Foundations and Tools

Choosing the right IDE

Speeding up the programming process with snippets/Emmet

Keyboard shortcuts

Cross browser compatibility – which browsers should you install?

How to use inspector

Key shortcuts

Preprocessor – why should you use them?

Nesting elements in preprocessors

Using variables to parametrize your CSS code

Using mixins in preprocessors

Mathematical operations

Logic operations and loops

Joining of multiple files

Less – a short introduction

CSS with Stylus

SASS – the most mature preprocessor

Short comparison

SASS foundation

Variables – where and how to use

Simple mixins – where and how to use (@mixin, @include)

Extending classes (@extend)

Importing files (@import)

Using of & in SASS

Compass features

Simple automatization (with Gulp)

Pixelperfect layouts tools

Pixelfperfect plugin

MeasureIT plugin

Checking compatibility

Good assumptions in code

Creating proper selectors

Using IDs

Using classes

Grouping selectors

Interesting selectors

Adjacent sibling combinatory +

Child combinator ">"

Adjacent sibling combinatory ~

Getting elements by attributes

Attributes with exact value [attribute="value"]

Attributes which begin with [attribute^="value"]

Whitespace separated attribute values [attribute~="value"]

Attribute values ending with [attribute$="value"]

Attributes containing strings [attribute*="value"]

Using !important in CSS

Preparing your project

Files structure

How to keep variables in a project

How and where to keep mixins (local and global)

Keep typography styles in a separate file

Views of specific elements

Summary

2. Mastering of Fundamentals

Traditional box model

Padding/margin/border/width/height

Omitting problems with the traditional box model (box-sizing)

Floating elements

Possibilities of floating elements

Most known floating problems

Defining clear fix/class/mixins

Example of using floating elements

Display types

Block elements

Inline elements

Inline-block display

Where can you use other types of elements – navigation

Where can you use other types of elements – problem of equal boxes

CSS elements positioning

Static, relative, absolute, fixed – differences

Lists with fixed images (on the right or left) and descriptions

Summary

3. Mastering of Pseudoelements and Pseudoclasses

Pseudoclasses

How can we check :active, :hover state?

Usage – multilevel menu

Usage – CSS hover rows

Usage of pseudoclasses

How to use :first-child, :last-child, :nth-child()

Usage – styling table

Exploring :nth-child parameters

How to use :nth-last-child

How to use :first-of-type, :last-of-type, :nth-of-type, and :nth-last-of-type

Empty elements with the :empty pseudoclass

Supporting forms styling with pseudoclasses

Validation with :valid and :invalid

Adding input statuses :focus, :checked, :disabled

Additional aspect – colorize the placeholder

Drawing primitives with CSS

How to draw a rectangle/square

How to draw a circle

How to draw a ring

How to draw a triangle with CSS

Pseudoelements

What is :before and :after?

Where can we use :before and :after?

First letter and first line – simple text manipulation

How to change selection color? Usage of ::selection

Summary

4. Responsive Websites – Prepare Your Code for Specific Devices

The foundation of responsive websites

Desktop first methodology

Mobile first methodology

Adjusting the viewport in HTML

Choosing the right viewport

Above the fold

Media queries – where can you use it

How to build media queries

How media queries work?

Media queries for specific views/devices

How to choose proper media queries for mobile devices

Usage sample – main navigation

Summary

5. Using Background Images in CSS

CSS backgrounds

Repeating of background

Background size

Background position

Multiple backgrounds

How to create and use sprites

Usage of base64

Retina problems

Summary

6. Styling Forms

Forms – the most known issues

Forms – enable superpowers

How to style simple input

Don't forget about placeholders

Complex form based on input[type="text"] and labels

How to style textarea

Styling of select (drop down)

Summary

7. Resolving Classic Problems

Centering elements

Inline elements – horizontal centering

Block elements – centering in both axes

Using transform in centering

Dealing with opacity

Opacity versus RGBA – differences and where can we use them

Opacity in the past – fallback for old IE versions

Summary

8. Usage of Flexbox Transform

Flexbox

Flexbox property align-items

Flexbox property flex-wrap

Flexbox property justify-content

Flexbox property align-content

Flexbox property flex-direction

Usage of flexbox – creating page structure

Usage of flexbox – change order of b...

Table of contents

• Professional CSS3