CSS Rule Sets and Cross-Browser Compatibility in ASP.NET Applications
Learn how to code CSS rule sets and ensure cross-browser compatibility in ASP.NET applications. Explore Visual Studio features for working with HTML and CSS, along with guidelines for testing web pages on different browsers and utilizing HTML5 features effectively.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Ch3 HTML5 & CSS3 with ASP.NET applications [94 - 111] Akash Kurva Shekarappa Presentation ID: 6 CSCI 5633-1
Outline How to code CSS rule sets and comments How to ensure cross-browser compatibility Visual studio features for working with HTML Visual studio features for working with CSS
How to code CSS rule sets an comments The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
/*The styles for the elements*/ body{ font-family: Arial, Helvetica, sans-serif; font-size: 85%; width: 55px; margin: 0 auto; padding: 10px; background-color: white; border: 2px solid #0000FF; } /*The styles for classes */ .entry{ margin-left: 1em; margin-bottom: .5em; width: 10.5em; }
/*The styles for server controls*/ #ddlMonthlyInvestment{ width: 10.5em; } #lblFutureValue { font-weight: bold; margin-lef t: 1em; } CSS comments /* This is a comment */ p { text-align: center; a /* This is another comment */ color: black; font-family: arial }
The cross browsers and their HTML5 ratings Browsers Google chrome Opera Mozilla Firefox Apple safari Internet explorer Release 27 12 22 6 10 HTML5 test rating 463 419 410 378 320
Guidelines for cross-browsers compatibility Test your web pages on all of the major web browsers, including all of the older versions of these browsers that are still commonly used. Use the HTML5 features that are supported by all of the modern browsers, especially the HTML5 semantic elements. But use the two workarounds that follow so these applications will run on the older browsers too. The two workarounds for using the HTML5 semantic elements The JavaScript shiv that lets older browsers know about the elements <script src= http://html5shiv.googlecode.com/svn/trunk/html5.js ></script> The CSS rule set that sets the eight semantic elements to block elements article, aside, figure, figcaption, footer, header, nav, section{ display: block; }
Visual studio features for working with HTML IntelliSense as an HTML element is entered in Source view IntelliSense options including snippets are displayed as you start a tag Press the Tab key twice to enter the snippet for the tag
The smart indent feature If you press the enter key when the cursor is in the content area.. the ending tag is dropped down two lines with the cursor where you want it
Visual studio features for working with CSS When we use visual studio we don t have to keep track of all the CSS properties that are available. Instead, Visual Studio can generate rule set for using a visual interface.
How to create and add an external style sheet Right-click on the project in the solution Explorer. Then, choose the Add -> style sheet command, type the name for the new style sheet, and click OK. How to comment out and uncomment one or more rule, Press Ctrl+K, Ctrl+C to comment out selected rules, or Ctrl+k, Ctrl+U to uncomment them. Or, click the comment or uncomment button in the style sheet toolbar. How to use the CSS outline window this window. Then, to navigate to a rule set in the style sheet, click on its selector in this window. Use the VIEW -> other Windows -> Document outline command to open
SAMPLE EXTERNAL STYLE SHEET IN VISUAL STUDIO
HOW TO USE APPLY STYLES WINDOW The apply styles window lets you work with the styles defined in both internal and external style sheets as well as inline styles. To display this window, use the View -> Apply styles command. To view the properties for a style, just point to the style in the apply styles window. To apply a style to an element or literal text, select the element or text and then click on the style in the Apply Styles window. To remove all class and inline styles, click clear styles.
Sections that may appear in the Apply styles window Section Style sheet name Description Class and ID styles that are defined in the style sheet with the specified name Class and ID styles that are defined in the current page The element styles that s applied to the currently selected element, if any. The inline styles that s applied to the currently selected element, if any. Current page Contextual selectors Inline styles
HOW TO USE CSS PROPERTIES WINDOW The CSS properties window is divided in to two panes Applied rules CSS property pane The CSS properties window is most useful for reviewing and modifying the styles that have been applied to a page. To display this window, use the View -> CSS properties command.
HOW TO MANAGE STYLES WINDOW The manage styles window provides a convenient way to move the styles used by a page from one style sheet to another. That includes styles defined in both external and internal style sheets. To display this window use the View -> Manage styles command. All styles in an external style sheet appear under the name of that style sheet. All styles in an internal style sheet appear under the current page heading. To move a style from one style sheet to another, simply drag and drop it .you can also drag and drop a style within a style sheet to change the order of the styles.
