Home Random Page


CATEGORIES:

BiologyChemistryConstructionCultureEcologyEconomyElectronicsFinanceGeographyHistoryInformaticsLawMathematicsMechanicsMedicineOtherPedagogyPhilosophyPhysicsPolicyPsychologySociologySportTourism






Color and background in CSS

In CSS Syntax, there are three Properties that allow you to manipulate the color in your styles directly. They all work exactly the same way but operate on different aspects of your document. The color Property controls the foreground color, which is the color of the text in the Element that it is applied to. The background-color Property controls the background color of the Element it is applied to, and finally there is the border-color Property, which changes the color of your border from the default color that it inherits from the foreground color of the BODY Element.

In CSS Syntax You can use a recognized color Name, including all the JavaScript color Names, a Hexadecimal triplet and you can also express it by using the rgb() Function.

The rgb( ) Function takes the three Arguments of redArg, greenArg, and blueArg which represent the Red, Green, and Blue Values of a total color. They are separated by commas and can be either numbers from 0 to 255 or a percentage from 0 to 100%. If a percentage is used, the percent (%) sign must follow the number for each Argument.

The color Property is quite straightforward; it lets you choose the foreground color of your Element, which changes the color of your text. Here are the four ways to express foreground color:

{ color: silver; } { color:#e35a77; } { color: rgb(5, 220, 250); } { color: rgb(38%, 43%, 69%); }

The { background-color: }

The background-color Property lets you choose the color of the background ofeach Element. Here are four examples of ways to specify the

background color of a Style for an Element with the background-color Property:

{ background-color: olive; }

{ background-color:#aaca77; }

{ background-color: rgb(155, 120, 50); }

{ background-color: rgb(50%, 0%, 90%); }

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML> <HEAD>

<TITLE> Sample 210 - CSS Example 1-10 The background-color Property </TITLE>

<STYLE TYPE="text/CSS">

<!--

H1 { background-color: blue;

border-style: ridge; border-width: 20px; border-color: purple; }

H3 { background-color: rgb(0,57,155);

border-style: ridge; border-width: 20px; border-color: aqua; }

H4 { background-color: rgb(0%,50%,0%);

border-style: ridge; border-width: 20px; border-color: green; }

P { background-color:#ef4499; font-size: 17pt; border-style: ridge; border-width: 20px; border-color: red; }

--> </STYLE> </HEAD>

<BODY TEXT="#eeeeee" BGCOLOR="#000000">

<P>This example except that the colors used are for the background instead of the foreground. Because no foreground color is specified, all of the Heading Elements inherit it from the BODY Element since they

are contained within it.</P>

<H1> This is a H1 Heading </H1>

<H3> This is a H3 Heading </H3>

<H4> This is a H4 Heading </H4> </BODY> </HTML>

Fonts in CSS



Font family: the property ‘font-family’

The property font-family is used to create a prioritization list of fonts in which a particular element or a Web page should be displayed. If the first font is not installed on the computer with which the site is displayed the next one from the list is tryed until an existing matching font is found. There are two ways to categorize fonts: font families and generic (generic terms) families. The two expressions are explained below.

Examples of a font family (often known simply as “font”) are “Arial”, “Times New Roman” or “Tahoma”.

Generic families can probably be described best as a group of font families with a similar appearance. For example, “sans-serif” which includes fonts that do not have “feet”.

If the character set on your website list in general, one begins with the preferred character set and then adds a few alternatives. We recommend that you list with a generic family. This ensures that at least one character set of the same family is available.

An example for such a prioritization list of fonts could be as follows:

h1 (font-family: arial, verdana, sans-serif;)
h2 (font-family: “Times New Roman”, serif;)

Examples.

<p style="font-style:italic;">This text is in italics.</p>

Result. This text is in italics.

<p style="font-family:georgia,garamond,serif;">This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p>

Result. This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).

 

 

Text in CSS

The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "Try it yourself" link.

Text Color

The color property is used to set the color of the text.

With CSS, a color is most often specified by:

· a HEX value - like "#ff0000"

· a color name - like "red"

Example

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

If you define the color property, you must also define the background-color property.

Text Alignment

The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified.

Example

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration

The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes:


Date: 2016-01-03; view: 1070


<== previous page | next page ==>
What is CSS and their advantage | Text Transformation
doclecture.net - lectures - 2014-2024 year. Copyright infringement or personal data (0.01 sec.)