PHP Library

Support Us

Donate

CSS Library

Css font properties

Css font properties allow you to change the font family, boldness, size, and the style of a text. You probably already knew how to make text bold or underlined, but did you know you could resize your font using percentages? . Basically Css gives you great control over the way your text is displayed. Devsocial.net offers free online tutorials, references and free SEO Tools the world wide web design library.

Property ::	Description ::	Values ::
Font	A shorthand property for setting all of the properties for a font in one declaration.	font-style font-variant , font-weight , font-size/line-height, font-family , caption, icon , menu , message-box , small-caption , status-bar
Font - family	A prioritized list of font family names and/or generic family names for an element.	font-style , family-name , generic-family
Font-size	Sets the size of a font.	xx-small , x-small , small , medium , large , x-large , xx-large , smaller , larger , length , %
{ Font-size-adjust: `Any Value` ; }	Specifies an aspect value for an element that will preserve the x-height of the first-choice font	none , number
Font-stretch	Condenses or expands the current font-family.	normal , wider , narrower , ultra-condensed , extra-condensed , condensed , semi-condensed , semi-expanded , expanded , extra-expanded , ultra-expanded
Font-style	Sets the style of the font.	normal , italic , oblique
Font-variant	Displays text in a small-caps font or a normal font.	normal , small-caps
Font-weight	Sets the weight of a font.	normal , bold , bolder , lighter , 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

CSS Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

Note: If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6 
{
color: green
}

Class Selector

With the class selector you can define different styles for the same type of HTML element.

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">
This paragraph will be right-aligned.
</p>

<p class="center">
This paragraph will be center-aligned.
</p>

Note: To apply more than one class per given element, the syntax is:

<p class="center bold">
This is a paragraph.
</p>

Rating:

Capable: broswers

Date Posted: 2/5/2023

Note: Make sure your page contains a valid doctype for this menu to render properly.

Revision History: Nov 8th, 2023': updated code..

Usage Terms: | Please Read - -> >

Viewed: 73,077

info Share our library with others. Spread the love. Share:

Was this article & Examples Helpful ?
If so you can help us bring this and more to become available for you at anytime. You can help us by donating any amount or Sharing & Following Us. Donate through PayPal.

Buy Ready made Web Apps

Real Estate ready made Web App

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $3,500

Social Network Software + Install + Domain + Hosting.

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $3,700

Services/Booking Web APP

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $4,500

Videos / Streaming Web App

Includes 5 Yr. Domain + 5 Yr. hosting FREE.

Price: $23,500

Live Radio Station

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $4,700

Video Courses/Training

Includes 2 Yr. Domain + 2 Yr. hosting FREE.

Price: $17,500

Free Tools

Dev's Tips

Dev: Ramon Sanchez

TIP: # 251 | Meta Tags
When adding META TAGS make sure you dont over Repeat the keywords it wont help with SEO. Keep it Simple dont overdue it...
Contact Developer