CSS properties can contain the following properties:

  • Value: legal values & syntax
  • Initial: initial value
  • Applies to: elements this property applies to
  • Inherited: whether the property is inherited
  • Percentages: how percentage values are interpreted – Whether percentage signs are accepted as attribute values
  • Media: which media groups the property applies to
  • Computed value: how to compute the computed value

Attribute values can be defined in several ways:

  • Several juxtaposed words mean that all of them must occur, in the given order.
  • A bar (|) separates two or more alternatives: exactly one of them must occur.
  • A double bar (||) separates two or more options: one or more of them must occur, in any order.
  • A double ampersand (&&) separates two or more components, all of which must occur, in any order.
  • Brackets ([ ]) are for grouping.

font-family: "Gill Sans", sans-serif; - Universal font, supported by all browsersCopy the code

The User Agent is the browser.

The first declaration on The BODY element sets The font family to “Gill Sans”. The user Agent (often referred to as a “browser”) will use the ‘sans-serif’ font family which is one of five generic Font families which all users agents know. Child elements of BODY will inherit the value of the ‘font-family’ property.

Attribute

A value associated with an element, consisting of a name, and an associated (textual) value.

Content

The content associated with an element in the source document. Some elements have no content, in which case they are called empty.

The content of an element may include text, and it may include a number of sub-elements, in which case the element is called the parent of those sub-elements.

Author

An author is a person who writes documents and associated style sheets. An authoring tool is a User Agent that generates style sheets.

CSS writer.

User

A user is a person who interacts with a user agent to view, hear, or otherwise use a document and its associated style sheet. The user may provide a personal style sheet that encodes personal preferences.

The end user

User agent (UA)

A user agent is any program that interprets a document written in the document language and applies associated style sheets according to the terms of this specification. A user agent may display a document, read it aloud, cause it to be printed, convert it to another format, etc.

An HTML user agent is one that supports one or more of the HTML specifications. A user agent that supports XHTML [XHTML], but not HTML is not considered an HTML user agent for the purpose of conformance with this specification.

Property

CSS defines a finite set of parameters, called properties, that direct the rendering of a document.

Each property has a name (e.g., ‘color’, ‘font’, or border ‘) and a value (e.g., ‘red’, ’12pt Times’, Or ‘dotted’). Properties are attached to various parts of the document and to the page on which the document is to be displayed by the mechanisms of specificity, cascading, and inheritance (see the chapter on Assigning property values, Cascading, and Inheritance).

CSS property is related to document rendering, but attribute is not.

Look at an example attribute:


<html>

<div>

<span>1</span>

<span>2</span>

</div>

<div id = "jerry" actions tool="spa">

<p>3</p>

<p>4</p>

</div>

</html>
Copy the code

percentage property

Percentage values are always relative to another value, for example a length.

Percentage values are always associated with another attribute value.

Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block).

For example, if I specify a max-wdith: 60%, what is 60% of another attribute?

Another attribute may be another attribute of the same element, or an attribute of its ancestor element, or the value of formatting context, such as the width of containing blocks.

When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

Percentage Value inheritance problem

Since child elements (generally) inherit the computed values of their parent, in the following example, the children of the P element will inherit a value of 12px for ‘line-height’, not the percentage value (120%):


p { font-size: 10px }

p { line-height: 120% } /* 120% of 'font-size' */
Copy the code

The child node inherits the parent node’s property, which is the calculated property, not the Percentage property.