Book Image

Web Developer's Reference Guide

By : Joshua Johanan, Talha Khan, Ricardo Zea
Book Image

Web Developer's Reference Guide

By: Joshua Johanan, Talha Khan, Ricardo Zea

Overview of this book

This comprehensive reference guide takes you through each topic in web development and highlights the most popular and important elements of each area. Starting with HTML, you will learn key elements and attributes and how they relate to each other. Next, you will explore CSS pseudo-classes and pseudo-elements, followed by CSS properties and functions. This will introduce you to many powerful and new selectors. You will then move on to JavaScript. This section will not just introduce functions, but will provide you with an entire reference for the language and paradigms. You will discover more about three of the most popular frameworks today—Bootstrap, which builds on CSS, jQuery which builds on JavaScript, and AngularJS, which also builds on JavaScript. Finally, you will take a walk-through Node.js, which is a server-side framework that allows you to write programs in JavaScript.
Table of Contents (22 chapters)
Web Developer's Reference Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
9
JavaScript Expressions, Operators, Statements, and Arrays
Index

Text


Typography is an incredibly powerful design feature and, in reality, styling text with CSS is actually simple.

Let's see how.

color

The color CSS property defines the color of the text and looks like this:

color: red;

Alternatively, it can look like this:

color: #f00;

Description

The color property supports all color modes, HEX, RGB, RGBa, HSL, HSLs, and color name.

CSS:

/*Color Name*/
.element { color: red; }
/*HEX*/
.element { color: #f00; }
/*RGB*/
.element { color: rgb(255, 0, 0); }
/*RGBa - Color has 50% opacity*/
.element { color: rgba(255, 0, 0, .5); }
/*HSL*/
.element { color: hsl(0, 100%, 50%); }
/*HSLa - Color has 50% opacity*/
.element { color: hsla(0, 100%, 50%, .5); }

text-align

The text-align CSS property defines the alignment of the text, and it looks like this:

text-align: center;

Description

The text can be centered, left-aligned, right-aligned, and fully-justified.

The text-align property only works on inline elements. If this property is applied to a block-level element, it will...