1.NET Web Forms CSS: Style Sheets © 2002 by Jerry Post

2 The Power of Style Sheets  A style sheet holds layout and element style definitions for an entire website in one location.  With a few simple changes, you can instantly alter the appearance of every page in your website.  Styles provide vastly more control over layout than HTML.  The style sheet separates your design from the HTML and the code, making it easier to understand and alter all three. HTML pages linked to Single style sheet. Styles

3 The style sheet holds a formal description of the page layout and individual element styles. By defining the styles in one location, you can instantly change the style for every page with a few changes. MyStyles.css File.html

4 Some Style Options font color background margin-left margin-right text-decoration text-indent

5 Styles: Fonts font-familyserif, sans-serif, cursive, fantasy, monospace font-family: "New Century Schoolbook", Times, serif font-stylenormal, italic, oblique font-variantnormal, SMALL-CAPS font-weightnormal, bold, bolder, lighter, 100, 200, …, 900 font-size10pt (px, pc, in, cm) (points, pixels, picas, inches …) fontcombines other attributes fontfont: italic bold 12pt/14pt Times, serif

6 Styles: Colors color(see below) background-color(see below) background-imageURL, none background-repeatrepeat, repeat-x, repeat-y, no-repeat background-attachmentscroll, fixed background-positionleft, center, top, bottom, right backgroundcombines others aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. #rrggbb (e.g., #00ad00) #rgb (e.g., #0a0) rgb(x,x,x) x is an integer between 0 and 255 (e.g., rgb(0,107,0)) rgb(y%,y%,y%) y is between 0.0 and (e.g., rgb(0%,70%,0%))

7 Styles: Text word-spacing0.2em letter-spacing0.1em text-decorationnone, underline, overline, line-through, blink vertical-alignbaseline, sub, super, top, text-top, middle,… text-transformnone, Capitalize, upper-case, lower-case text-alignleft, right, center, justify text-indentlength or percentage line-heightpercentage or number

8 Styles: Box margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left padding border-top-width border-right-width border-bottom-width border-left-width border-width border-color border-style border-top border-right border-left border width height floatwrap text cleardon’t wrap

9 Styles: Lists displayblock, in-line, list-item, none white-spacenormal, pre, nowrap list-style-typedisc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none list-style-imagenone, URL list-style-positioninside, outside list-stylecombine others

10 Styles and Tags  You generally build styles for common HTML tags.   …  This technique means pages use standard HTML tags, and you can instantly alter the style and appearance.  You can also create custom styles that can be applied in individual situations. Generally, you create a style Class.  Message in a different color

11 Example BODY { margin-left: 0px; font: 9pt/11pt "Times New Roman", Times, serif; color: black; text-align: left; background-color: white; background: transparent; } P { margin-left: 0px; font: 9pt/11pt "Times New Roman", Times, serif; color: black; background: transparent; } H1 { margin-left: 0px; font: 18pt/18pt "Times New Roman", Times, serif; color: black; font-weight: bold; background: transparent; }

12 Creating Style Sheets  They are text files, but it is hard to remember all of the attributes.  Use a style sheet editor, like Visual Studio.  Right-click on an item to add a style.  Right-click on a style to build/edit it.

13 Style Sheets in Visual Studio  Choose a category  Select the attributes.  Whenever possible, use relative sizes such as em instead of pixels.  Link the style sheet to an HTML/ASPX page by dragging and dropping the style sheet on the page.

14 Sizes and Positions  Style sheets highlight the issue of sizes and positioning.  Historically, most pages describe sizes and locations in terms of pixels. Many systems (including aspects of Visual Studio) still use pixels.  The problem is that hardware technology is changing.  Ultra-high resolution screens are appearing that can displays 200 pixels per inch.  Anything measured in pixels will be too small. Imaging trying to see a line that is 1-pixel or 1/200 of an inch wide.  Low-resolution screens like cell phones are a similar problem.  Visually-impaired people also often set large font sizes, that you should never override.  Possible solutions  The print world uses points (1/72 of an inch) or picas (1/6 of an inch), but they do not translate well to computer screens.  Use relative scaling such as em (often pixels), this approach is relative because it adjusts to the user’s default font size.

15

16