CSS CSS CSS

Don’t know how to make your website pretty? Nothing new, it’s always a struggle… TURN FOR HELP AND LEARN!

WebDesignerWall – This site is just GOD LIKE. It’s beyond awesomeness!! Don’t know how? LEARN!!

Below are several other misc sites, none has tutorials except the first couple, but one of the best ways, and the first step, of learning how to make things pretty is to look at pretty things, isn’t it? Look at the sample works, featured sites or whatever…

N.Design Studio

BestWebGallery

FlashMint

StyleMedia

EKOnline

GraphicallySpeaking

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

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