Basic CSS Colors

Colors bring life to a website. In CSS colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. For this guide, I have only used color names, their hex codes and corresponding rgb values

Visit W3.org for more variety of CSS colors

Web Safe Fonts

Web safe fonts are fonts that are included with most operating systems, the implication of such high availability is that a designer can expect typography involving web safe fonts to appear exactly as intended to most users. Below are non-exhaustive lists of some fonts that are considered web safe.

Font Name	Arial (sans-serif)
Font Usage	Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs. Arial is one of the safest web fonts, and it is available on all major operating systems.
Example	Lorem ipsum dolor sit amet

Font Name	Verdana (sans-serif)
Font Usage	Verdana is a very popular font. Verdana is easily readable even for small font sizes.
Example	Lorem ipsum dolor sit amet

Font Name	Helvetica (sans-serif)
Font Usage	The Helvetica font is loved by designers. It is suitable for many types of business.
Example	Lorem ipsum dolor sit amet

Font Name	Tahoma (sans-serif)
Font Usage	The Tahoma font has less space between the characters.
Example	Lorem ipsum dolor sit amet

Font Name	Trebuchet MS (sans-serif)
Font Usage	Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile operating systems.
Example	Lorem ipsum dolor sit amet

Font Name	Times New Roman (serif)
Font Usage	Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in many newspapers and "news" websites. It is also the primary font for Windows devices and applications.
Example	Lorem ipsum dolor sit amet

Font Name	Georgia (serif)
Font Usage	Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for mobile-responsive design.
Example	Lorem ipsum dolor sit amet

Font Name	Garamond (serif)
Font Usage	Garamond is a classical font used for many printed books. It has a timeless look and good readability.
Example	Lorem ipsum dolor sit amet

Font Name	Courier New (monospace)
Font Usage	Courier New is the most widely used monospace serif font. Courier New is often used with coding displays, and many email providers use it as their default font. Courier New is also the standard font for movie screenplays.
Example	Lorem ipsum dolor sit amet

Font Name	Brush Script MT (cursive)
Font Usage	The Brush Script MT font was designed to mimic handwriting. It is elegant and sophisticated, but can be hard to read. Use it carefully.
Example	Lorem ipsum dolor sit amet

Visit W3.org to check out more CSS fonts

Text Styling in CSS

One of the most common uses for CSS is to style text. Most webpages include text, after all, and changing the look of it can go a long way toward giving a webpage a more unique appearance. Without changing the HTML underneath, CSS can be used to alter the size of text, the font, the boldness, the alignment within a paragraph, and more.

~ Size ~

The font-size property in CSS is used to specify the height and size of the font. It affects the size of the text of an element. Its default value is medium and can be applied to every element. The values of this property include xx-small, small, x-small, etc.

Font-size is commonly declared in pixel values (px) to achieve pixel accuracy. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified.

Size Syntax

elementName { font-size: medium|large|x-large|xx-large|xx-small|x-small|small; }

or

elementName { font-size: 18px; }

~ Font ~

One of the simplest ways to make a major change to the look of the text on a webpage is to change the font. When no font is specified, most browsers display text in the Times New Roman font.

The font-family CSS property specifies a prioritized list of one or more font family names. Values are separated by commas to indicate that they are alternatives. The browser will select the first font in the list that is installed or that can be downloaded.

Font Syntax

elementName { font-family: 'font name', 'fall back font name'; }

or

elementName { font-family: 'Courier New', Courier, monospace; }

~ Font Weight ~

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Some commonly used font-weight values are normal (Same as 400), bold (Same as 700), lighter which is one relative font weight lighter than the parent element, bolder which is one relative font weight bolder than the parent element, and <number> which takes a value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers.

Font Weight Syntax

elementName { font-weight: Keyword or Numeric value; }

or

elementName { font-weight: bold; }

or

elementName { font-weight: 700; }

~ Text Alignment ~

The text-align CSS property sets the horizontal alignment of the content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

The text-align property is commonly specified using the keyword values like start, end, left, right, center, justify, or justify-all.

• start: The same as left if direction is left-to-right and right if direction is right-to-left.
• end: The same as right if direction is left-to-right and left if direction is right-to-left.
• left: The inline contents are aligned to the left edge of the line box.
• right: The inline contents are aligned to the right edge of the line box.
• center: The inline contents are centered within the line box.
• justify: The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
• justify-all: Same as justify, but also forces the last line to be justified.

Text Alignment Syntax

elementName { text-align: keyword value; }

or

elementName { text-align: left; }

Visit MDN Web Docs. to learn more about text styling using CSS