CSS – Fonts

font-family

CSS defines 5 generic font families: (You can employ any of these families in a document by using the property font-family.)

1. Serif fonts
   These fonts are proportional and have serifs. A font is proportional if all characters in the font have different widths due to their various sizes. Serifs are the decorations on the ends of strokes within each character, such as little lines at the top and bottom of a lowercase l, or at the bottom of each leg of an uppercase A.
2. Sans-serif fonts
   These fonts are proportional and do not have serifs.
3. Monospace fonts
   Monospace fonts are not proportional. These fonts may or may not have serifs. If a font has uniform character widths, it is classified as monospace, regardless of the presence of serifs.
4. Cursive fonts
   These fonts attempt to emulate human handwriting. Usually, they are composed largely of curves and have stroke decorations that exceed those found in serif fonts. For example, an uppercase A might have a small curl at the bottom of its left leg or be composed entirely of swashes and curls. Examples of cursive fonts are Zapf Chancery, Author, and Comic Sans.
5. Fantasy fonts
   Such fonts are not really defined by any single characteristic other than our inability to easily classify them in one of the other families. A few such fonts are Western, Woodblock, and Klingon.

By combining specific font names with generic font families, you can create documents that come out, if not exact, at least close to your intentions.
h1 {font-family: Georgia, serif;}
Based on this list, a user agent will look for the fonts in the order they’re listed. If none of the listed fonts are available, then it will simply pick a serif font that is available.
p {font-family: Times, TimesNR, ‘New Century Schoolbook’, Georgia, ‘New York’, serif;}

---

font-weight

Values:
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

One of the numeric values (100, etc.), or one of the numeric values plus one of the relative values (bolder or lighter)

---

font-size

There are seven absolute-size values for font-size: xx-small, x-small, small, medium, large, x-large, and xx-large. These are not defined precisely, but are relative to each other:

p.one {font-size: xx-small;}
p.two {font-size: x-small;}
p.three {font-size: small;}
p.four {font-size: medium;}
p.five {font-size: large;}
p.six {font-size: x-large;}
p.seven {font-size: xx-large;}

The difference (or scaling factor) between one absolute size and the next should be about 1.5 going up the ladder, or 0.66 going down. Different user agents have assigned the “default” font size to different absolute keywords. Note that there are seven absolute-size keywords, just as there are seven font sizes (e.g., <font size=”5″>). The typical default font size was historically 3.

In a way, percentage values are very similar to the relative-size keywords. A percentage value is always computed in terms of whatever size is inherited from an element’s parent.

Note: Although font-size is inherited in CSS, it is the computed values that are inherited, not percentages.

---

font-style

• Italic text is a separate font face, with small changes made to the structure of each letter to account for the altered appearance. This is especially true of serif fonts, where, in addition to the fact that the text characters “lean,” the serifs may be altered in an italic face.
• Oblique text, on the other hand, is simply a slanted version of the normal, upright text.

---

font-variant

Values:
small-caps | normal | inherit
Purpose:
Turns fonts to capitalized characters, with the originally capitalized characters slightly larger than the non-capitalized ones.

---

font

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}
h2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}

It’s important to realize, however, that this free-for-all situation applies only to the first three values of font. The last two are much stricter in their behavior. Not only must font-size and font-family appear in that order as the last two values in the declaration, but both must always be present in a font declaration.

So far, we’ve treated font as though it has only five values, which isn’t quite true. It is also possible to set the line-height using font, despite that fact that line-height is a text property, not a font property. It’s done as a sort of addition to the font-size value, separated from it by a forward slash (/):

body {font-size: 12px;}
h2 {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}
This addition of a value for line-height is entirely optional, just as the first three font values are. If you do include a line-height, remember that the font-size always comes before line-height, never after, and the two are always separated by a slash.

Injection Attacks

• Understanding Script Injection Attacks
• MSDN – How To: Protect From Injection Attacks in ASP.NET

ASP.NET includes a feature designed to automatically combat script injection attacks, known as request validation. Two ways to disable request validation:

• Disable for individual page
  

  <%@ Page ValidateRequest="false" Language="C#" AutoEventWireup="true"
  CodeFile="Default.aspx.cs" Inherits="_Default" %>

• Disable the entire web application by modifying the web.config
  

  <configuration>
      <appSettings/>
      <connectionStrings/>
      <system.web>
        <pages validateRequest="false"/>
      </system.web>
  </configuration>

To prevent these script injection attacks, use Server.HtmlEncode:

Response.Write("Entered Input is:" + Server.HtmlEncode(txtInput.Text));

HtmlEncode replaces characters that have special meaning in HTML-to-HTML variables that represent those characters. For example, < is replaced with < and ” is replaced with “. Encoded data does not cause the browser to execute code. Instead, the data is rendered as harmless HTML.

CSS Keyword “inherit”

“inherit” makes the value of a property the same as the value of its parent element. In most cases, you don’t need to specify inheritance, since most properties inherit naturally.  Ordinarily, directly assigned styles override inherited styles, but inherit can reverse that behavior.

CSS url

There are absolute url and relative url. In CSS, relative URLs are relative to the style sheet itself, not to the HTML document that uses the style sheet.

Example:

@import url(special/toppings.css);

Note that there cannot be a space between the url and the opening parenthesis:

body {background: url(http://www.pix.web/picture1.jpg);}   /* correct */
body {background: url  (images/picture2.jpg);}          /* INCORRECT */

Web-Safe Color Def’n

With hexadecimal notation, any triplet that uses the values 00, 33, 66, 99, CC, and FF is considered to be web-safe. Example: #00CC66, #FF00FF, etc…

MSDN – Providers General Overview

A series of MSDN articles on ASP.NET Providers:

• Microsoft ASP.NET 2.0 Providers: Introduction
• Membership Providers
• Role Providers
• Site Map Providers
• Session State Providers
• Profile Providers
• Web Event Providers
• Web Parts Personalization Providers

Couple additional resources:

• MSDN – Provider Toolkit
• 4GuysFromRolla – A Look at ASP.NET 2.0’s Provider Model

CSS – Specificity & Inheritance & Cascade

When the same element is selected by two or more rules, specificity is used to determine which rule wins out. A selector’s specificity is determined by the components of the selector itself. A specificity value is expressed in four parts, like this: 0,0,0,0. The actual specificity of a selector is determined as follows:

• For every ID attribute value given in the selector, add 0,1,0,0.
• For every class attribute value, attribute selection, or pseudo-class given in the selection, add 0,0,1,0.
• For every element and pseudo-element given in the selector, add 0,0,0,1.
• Combinators and the universal selector do not contribute anything to the specificity.
  Universal selector has a specificity of 0, 0, 0, 0
  Combinators have no specificity at all, not even zero.

Examples:
h1 {color: red;} /* specificity = 0,0,0,1 */
p em {color: purple;} /* specificity = 0,0,0,2 */
.grape {color: purple;} /* specificity = 0,0,1,0 */
*.bright {color: yellow;} /* specificity = 0,0,1,0 */
p.bright em.dark {color: maroon;} /* specificity = 0,0,2,2 */
#id216 {color: blue;} /* specificity = 0,1,0,0 */
div#sidebar *[href] {color: silver;} /* specificity = 0,1,1,1 */

h1 {color: red;} /* 0,0,0,1 */
body h1 {color: green;} /* 0,0,0,2 (winner)*/

h2.grape {color: purple;} /* 0,0,1,1 (winner) */
h2 {color: silver;} /* 0,0,0,1 */

html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */
li#answer {color: navy;} /* 0,1,0,1 (winner) */

• Specificity is sorted from left to right. A specificity of 1, 0, 0, 0 will win out over any specificity that begins with a 0, no matter what the rest of the numbers might be.
• Every inline style declaration has a specificity of 1, 0, 0, 0
• Important declarations:
  p.dark {color: #333 !important; background: white !important;}
  Declarations that are marked !important do not have a special specificity value, but are instead considered separately from nonimportant declarations. In effect, all !important declarations are grouped together, and specificity conflicts are resolved relative to each other. Similarly, all nonimportant declarations are considered together, with property conflicts resolved using specificity. In any case where an important and a nonimportant declaration conflict, the important declaration always wins.

=====================================================================================

Inheritance is the mechanism by which styles are applied not only to a specified element, but also to its descendants.

Inherited values have no specificity at all, not even zero specificity.
Example:
* {color: gray;}
h1#page-title {color: black;}
<h1 id=”page-title”>Meerkat <em>Central</em></h1>
<p>
Welcome to the best place on the web for meerkat information!
</p>
In this example, the word “central” will be gray because zero specificity defeats no specificity.

======================================================================================

Cascade rules for CSS:

1. Find all rules that contain a selector that matches a given element.
2. Sort by explicit weight all declarations applying to the element. Those rules marked !important are given higher weight than those that are not. Sort by origin all declarations applying to a given element. There are three origins: author, reader, and user agent. Under normal circumstances, the author’s styles win out over the reader’s styles. !important reader styles are stronger than any other styles, including !important author styles. Both author and reader styles override the user agent’s default styles.
3. Sort by specificity all declarations applying to a given element. Those elements with a higher specificity have more weight than those with lower specificity.
4. Sort by order all declarations applying to a given element. The later a declaration appears in the style sheet or document, the more weight it is given. Declarations that appear in an imported style sheet are considered to come before all declarations within the style sheet that imports them.

There are five levels to consider in terms of declaration weight (from the origin of the rule). In order of most to least weight, these are:

1. Reader important declarations
2. Author important declarations
3. Author normal declarations
4. Reader normal declarations
5. User agent declarations

CSS Selectors

Each CSS rule has 2 fundamental parts – the selector and the declaration block.
Example: h1 {color: red; background: yellow;} – h1 is the selector, and {…} is the declarations.

A value is either a single keyword or a space-separated list of one or more keywords that was permitted for that property.
Example: p {font: medium Helvetica;}

If you use either an incorrect property or value in a declaration, the whole thing will be ignored.

CSS keywords are separated by spaces except in one instance. In the CSS property font, there is exactly one place where a forward slash (/) can be used to separate two specific keywords.
Example: h2 {font: large/150% sans-serif;}

=================================================================================================

1. Universal selector

An asterisk (*). This selector matches any element at all.
Example: * {color: red;}

=================================================================================================

2. Grouping selectors and declarations

h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em; border: 1px solid black; font-family: Charcoal, sans-serif;}

=================================================================================================

3. Class selectors

.warning {font-style: italic;}
span.warning {font-weight: bold;}

In HTML, it’s possible to have a space-separated list of words in a single class value.
<p class=”urgent warning”>Hello</p>
The order of the words doesn’t actually matter; warning urgent would also suffice.

Say you want all elements with a class of warning to be boldface, those with a class of urgent to be italic, and those elements with both values to have a silver background. This would be written as follows:
.warning {font-weight: bold;}
.urgent {font-style: italic;}
.warning.urgent {background: silver;}

By chaining two class selectors together, you can select only those elements that have both class names, in any order.
If a multiple class selector contains a name that is not in the space-separated list, then the match will fail. Consider the following rule:
p.warning.help {background: red;}
The selector will match only those p elements with a class containing the words warning and help. Therefore, it will not match a p element with just the words warning and urgent in its class attribute. It would, however, match the following:
<p class=”urgent warning help”>Help me!</p>

Note: class and ID are case-sensitive in HTML.

=================================================================================================

4. ID selectors:

#first-para {font-weight: bold;}
This rule applies boldface text to any element whose id attribute has a value of frist-para.
Between class selector and ID selector, IDs carry more weight when you’re trying to determine which styles should be applied to a given element.

=================================================================================================

5. Attribute Selectors:

planet[moons] {font-weight: bold;}
*[title] {font-weight: bold;}
a[href][title] {font-weight: bold;}
planet[moons="1"] {font-weight: bold;}
a[href="http://www.w3.org/"][title="W3C Home"] {font-size: 200%;}

Note:
ID selectors and attribute selectors that target the id attribute are not precisely the same. In other words, there is a subtle but crucial difference between h1#page-title and h1[id="page-title"]. The Specificity is different. ID selectors have a higher specificity (more important) than attribute selectors.

• Selection based on partial attribute values:
  p[class~="warning"] {font-weight: bold;}
  img[title~="Figure"] {border: 1px solid gray;}
• [foo^="bar"]
  Selects any element with an attribute foo whose value begins with “bar”.
• [foo$="bar"]
  Selects any element with an attribute foo whose value ends with “bar”.
• [foo*="bar"]
  Selects any element with an attribute foo whose value contains the substring “bar”.
• The particular attribute selector:
  *[lang|="en"] {color: white;}
  This rule will select any element whose lang attribute is equal to en or begins with en-. Therefore, the first three elements below markup would be selected, but the last two would not:
  <h1 lang=”en”>Hello!</h1>
  <p lang=”en-us”>Greetings!</p>
  <div lang=”en-au”>G’day!</div>
  <p lang=”fr”>Bonjour!</p>
  <h4 lang=”cy-en”>Jrooana!</h4>
  In general, the form [att|="val"] can be used for any attribute and its values. Say you have a series of figures in an HTML document, each of which has a filename like figure-1.gif and figure-3.jpg. You can match all of these images using the following selector:
  img[src|="figure"] {border: 1px solid gray;}

=================================================================================================

6. Descendant selector (contextual selector)

Style only those em elements that are descended from h1 element

h1 em {color: gray;}
td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}
blockquote b, p b {color: gray;}

The child combinator (>):
h1 > strong {color: red;}

Note the difference between descendant and child.

Adjacent-sibling combinator (+) – selects an element that immediately follows another element with the same parent.
To remove the top margin from a paragraph immediately following an H1 element, write:
h1 + p {margin-top: 0;}
In addition, text content between two elements does not prevent the adjacent-sibling combinator from working.
Example: html > body table + ul{margin-top: 1.5em;}
The selector translates as “selects any ul element that immediately follows a sibling table element that is descended from a body element that is itself a child of an html element.”

===============================================================================================

7. Pseudo-Class Selectors

a:visited {color: red;}

:link
Refers to any anchor that is a hyperlink (i.e., has an href attribute) and points to an address that has not been visited.

:visited
Refers to any anchor that is a hyperlink to an already visited address.

The :link and :visited pseudo-class selectors are functionally equivalent to the body attributes link and vlink.
<body link=”purple” vlink=”silver”>

a#footer-copyright:link{font-weight: bold;}
a#footer-copyright:visited {font-weight: normal;}

Dynamic pseudo-classes
:focus
Refers to any element that currently has the input focus i.e., can accept keyboard input or be activated in some way.

:hover
Refers to any element over which the mouse pointer is placede.g., a hyperlink over which the mouse pointer is hovering.

:active
Refers to any element that has been activated by user inpute.g., a hyperlink on which a user clicks during the time the mouse button is held down.

a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}
Note that the dynamic pseudo-classes can be applied to any element, which is good since it’s often useful to apply dynamic styles to elements that aren’t links.

The order of the pseudo-classes is more important than it might seem at first. Recommendation is “link-visited-focus-hover-active.”

:first-child – used to select elements that are the first children of other elements.
Consider the following markup:

<div>
<p>These are the necessary steps:</p>
<ul>
<li>Insert key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
</div>

In this example, the elements that are first children are the first p, the first li, and the strong and em elements. Given the following two rules:
p:first-child {font-weight: bold;} - bolds the p that is a first-child; so “These are the necessary steps” will be bolded.
li:first-child {text-transform: uppercase;} – Set the <li> that is a first-child to upper case; so “Insert key” becomes “INSERT KEY”

For situations where you want to select an element based on its language, you can use the :lang( ) pseudo-class. In terms of its matching patterns, the :lang( ) pseudo-class is exactly like the |= attribute selector. For example, to italicize any element in French, you would write:
*:lang(fr) {font-style: italic;}
The primary difference between the pseudo-selector and the attribute selector is that the language information can be derived from a number of sources, some of which are outside the element itself.

Combine Pseudo-classes
a:link:hover {color: red;}
a:visited:hover {color: maroon;}

8. Pseudo-Element Selectors:

p:first-line {color: purple;}
p:first-letter {color: red;}

In addition, all pseudo-elements must be placed at the very end of the selector in which they appear. Therefore, it would not be legal to write p:first-line em since the pseudo-element comes before the subject of the selector (the subject is the last element listed).

h2:before {content: “]]”; color: silver;} - preface every <h2> with “]]”
body:after {content: ” The End.”;} - end your document with “The End”

CSS comments

CSS comments:

• /*   */
• cannot be nested

Enclose CSS in HTML comment tag

it is recommended that you enclose your CSS declarations in a HTML comment tag because with browsers that don’t recognize <style></style>, the tags within them might not get ignored completely and could cause potential problems for the HTML file.

<style type="text/css">
<!--
@import url(sheet2.css);
h1 {color: maroon;}
body {background: yellow;}
-->
</style>