Introduction to CSS Quick Guide

HOME BOOKS QUICK GUIDES VIDEO COURSES

NEWSLETTER CONTACT

Introduction to CSS

CSS3

Learn how to program CSS Style Sheets to style your documents. After reading this guide, you will know how to style HTML elements, how to modify the styles dynamically, and how to use CSS to design your website or web application.

Only $ 2.99

Description

Quick Guides for Masterminds are excerpts from our best-selling books SwiftUI for Masterminds, UIKit for Masterminds, and HTML5 for Masterminds, providing a cost-effective alternative to getting the information you need.

With this guide, you will learn how to program CSS Style Sheets to style your documents. After reading this guide, you will know how to style HTML elements, how to modify the styles dynamically, and how to use CSS to design your website or web application.

Table of Contents

CSS

Styles

Applying Styles

Cascading Style Sheets

References

Keywords

Id Attribute

Class Attribute

Other Attributes

Pseudo-Classes

Properties

Text

Colors

Sizes

Background

Borders

Shadows

Gradients

Filters

Transformations

Transitions

Animations

WEB DESIGN

Boxes

Display

Traditional Box Model

Floating Content

Floating Boxes

Absolute Positioning

Columns

Real-life Application

Flexible Box Model

Flex Container

Flexible Elements

Organizing Flexible Elements

Real-life Application

QUICK REFERENCE

Pseudo-clases

Fonts

Text

Colors

Size and Position

Background

Border

Shadows

Gradients

Effects

Transformations

Animation

Design

Columns

Flexible Model

Examples

Download TXT Files

Listing 1: Declaring CSS properties

Listing 2: Declaring CSS rules

Listing 3: Declaring Inline Styles

Listing 4: Including styles in the head of the document

Listing 5: Applying CSS styles from an external file

Listing 6: Defining CSS styles in an external file

Listing 7: Inheriting styles

Listing 8: Overwriting styles

Listing 9: Referencing <span> elements by keyword

Listing 10: Declaring rules with multiple selectors

Listing 11: Combining selectors

Listing 12: Testing selectors

Listing 13: Applying the > selector

Listing 14: Applying the + selector

Listing 15: Applying the ~ selector

Listing 16: Referencing by the value of the id attribute

Listing 17: Identifying the element <p> by the value of its id attribute

Listing 18: Referencing by the value of the class attribute

Listing 19: Assigning styles with the class attribute

Listing 20: Declaring a class only for <p> elements

Listing 21: Referencing only <p> elements that have a name attribute

Listing 22: Referencing <p> elements that have a name attribute with the value mytext

Listing 23: Applying attribute selectors

Listing 24: Creating a document to test pseudo-classes

Listing 25: Implementing the pseudo-class :nth-child()

Listing 26: Changing the index to affect a different element

Listing 27: Creating a list with the pseudo-class :nth-child()

Listing 28: Implementing the values odd and even

Listing 29: Using :last-child to modify the last <p> element of the list

Listing 30: Applying styles to every element except <p>

Listing 31: Defining an exception using the class attribute

Listing 32: Testing formatting properties

Listing 33: Changing the font family and size of the title

Listing 34: Changing the font with the font property

Listing 35: Aligning text with the text-align property

Listing 36: Defining the space between words with the word-spacing property

Listing 37: Removing the underline in the links of our document

Listing 38: Loading a custom font for the title

Listing 39: Assigning a color to the title

Listing 40: Assigning a color with the rgb() function

Listing 41: Assigning a color with the hsl() function

Listing 42: Assigning a custom width

Listing 43: Assigning a custom height

Listing 44: Hiding the content that overflows

Listing 45: Adding scroll bars

Listing 46: Adding margins and paddings

Listing 47: Adding a background color

Listing 48: Adding a background image

Listing 49: Configuring the background

Listing 50: Configuring the background with the background property

Listing 51: Adding a border to an element

Listing 52: Defining a border with the border property

Listing 53: Generating round corners

Listing 54: Declaring different values for each corner

Listing 55: Generating elliptic corners

Listing 56: Adding an outline to the header

Listing 57: Creating a custom border for the header

Listing 58: Defining a border image with the border-image property

Listing 59: Adding a shadow to the header

Listing 60: Adding the blur value to the box-shadow property

Listing 61: Expanding the shadow

Listing 62: Creating an inner shadow

Listing 63: Adding a shadow to the title

Listing 64: Adding a linear gradient to the header

Listing 65: Setting the initial position

Listing 66: Creating a gradient with a direction of 30 degrees

Listing 67: Creating a multicolor gradient

Listing 68: Creating a translucent gradient

Listing 69: Setting color-stops

Listing 70: Creating a radial gradient

Listing 71: Creating a multicolor radial gradient

Listing 72: Applying a filter to the header

Listing 73: Scaling the header

Listing 74: Creating a mirror image with the scale() function

Listing 75: Rotating the header

Listing 76: Distorting the header

Listing 77: Moving the header to the right

Listing 78: Moving, scaling and rotating the element with one property

Listing 79: Adding a three-dimensional effect to the header

Listing 80: Declaring a different origin for the viewer

Listing 81: Responding to the mouse

Listing 82: Creating a complete animation using the transition property

Listing 83: Creating a complex animation

Listing 84: Declaring more frames for our animation

Listing 85: Defining HTML5 elements as block elements

Listing 86: Testing the float property

Listing 87: Floating the image to the left

Listing 88: Recovering the normal flow with the overflow property

Listing 89: Adding an empty element to apply the clear property

Listing 90: Recovering the normal flow with the clear property

Listing 91: Creating a document for testing the float property

Listing 92: Floating boxes to the left

Listing 93: Reducing the size of the container

Listing 94: Floating boxes to the left and right

Listing 95: Setting the relative position of an element

Listing 96: Setting the absolute position of an element

Listing 97: Setting the z index

Listing 98: Displaying a slide with additional information

Listing 99: Styling the boxes

Listing 100: Animating the slide

Listing 101: Splitting articles into columns

Listing 102: Defining the columns

Listing 103: Adding a rule between the columns

Listing 104: Defining a document for the Traditional Box Model

Listing 105: Implementing a reset rule

Listing 106: Assigning styles to the header

Listing 107: Assigning styles to the navigation area

Listing 108: Assigning styles to the options of the menu

Listing 109: Assigning styles to the main content

Listing 110: Creating the columns for the main content

Listing 111: Setting the position and styles of the <time> element

Listing 112: Assigning styles to the articles

Listing 113: Assigning styles to the footer

Listing 114: Calculating the size of the sections with percentages

Listing 115: Adding submenus

Listing 116: Assigning styles to submenus

Listing 117: Organizing boxes with a flexible container

Listing 118: Declaring the element parentbox as a flexible container

Listing 119: Making the boxes flexible with the flex property

Listing 120: Creating an uneven distribution

Listing 121: Combining inflexible and flexible boxes

Listing 122: Controlling how the elements shrink

Listing 123: Defining flexible boxes with a preferred size

Listing 124: Declaring a maximum size

Listing 125: Reversing the orientation of the boxes

Listing 126: Defining the location of each box

Listing 127: Distributing empty space in a flexible container

Listing 128: Distributing empty space with justify-content

Listing 129: Distributing vertical space

Listing 130: Stretching the boxes to occupy the vertical space available

Listing 131: Aligning the boxes to the top

Listing 132: Aligning the boxes by the baseline

Listing 133: Changing the alignment for the box-2 element

Listing 134: Creating two lines of boxes with the flex-wrap property

Listing 135: Aligning multiple lines with the align-content property

Listing 136: Defining a document for the Flexible Box Model

Listing 137: Turning the header into a flexible container

Listing 138: Turning the menu into a flexible container

Listing 139: Turning the columns into flexible containers

Listing 140: Configuring the content

Listing 141: Turning the footer into a flexible container

Links

CSS References and Tutorials

CSS Properties and Pseudo-Classes

Measurement Units

Flexible Box Model

Reset Style Sheet

writing-mode Property

Resources

Download Resources

TABLE OF CONTENTS

Books

For Masterminds books include everything you need to develop professional applications. Create amazing websites and insanely great apps for iPhones, iPads and Mac computers.