CST272 ASP.NET Style Sheets Page 1

Size: px

Start display at page:

Download "CST272 ASP.NET Style Sheets Page 1"

Meagan Potter
6 years ago
Views:

1 CST272 ASP.NET Style Sheets Page Style Sheets in ASP.NET CST272 ASP.NET Creating Cascading Style Sheets (CSS) Stores information on how to present the site Cascading style sheets allow content to be separated from formatting W3C (World Wide Web Consortium) sets the standards for CSS Inconsistency that previously existed among browsers and CSS versions are becoming fewer ASP.NET's Style Builder is a graphical user interface for building CSS files CSS Overview A style rule is the information that is applied to a single HTML tag, or a group of tags Name and value of the style is stored Syntax for the rules vary: Inline rules apply to a single tag Embedded rules apply to all elements within a single web page External rules apply to all elements within multiple web pages Inline Style Sheets Placed inside the tag as a style attribute Join together property and value pairs with colons (:); separate the pairs using semicolons (;) Format: <tagname style = "property1:value1; property2:value2"; > Content goes here </tagname> Example <h1 style = "color:green">welcome to Tara Store!</h1> Embedded Style Sheets (Page 1) Placed in the <head> section Style content is placed within <style> </style> tags Uses same coding format found in the style attribute Style elements will apply to every matching tag (or class name) in the <body> of the web page Embedded Style Sheets (Page 2) <html> <head> <title>embedded Styles</title> <style> h1 {color:green;

2 CST272 ASP.NET Style Sheets Page 2 } </style> </head> <body> font-size:12 <h1>welcome to Tara Store!</h1> </body></html> External Style Sheets (Page 1) The style sheet is created as a separate document file with the extension.css The <link> tag in the <head> tells the browser to look to the style sheet for formatted elements This tag is placed into each web page that implements the style sheet file Promotes uniform style for an entire website Uses same coding format found in the style attribute and the <style> block for every element in a linked style sheet External Style Sheets (Page 2) The <link> tag attaches the style sheet to a web page Format: <link rel="stylesheet" href="filename.css" type="text/css" /> rel the file is a CSS style sheet type the file is a text/css MIME type href the location of the file (relative or absolute URL) Placed in the <head> section <link rel = "stylesheet" type = "text/css" href = "style.css"> External Style Sheets (Page 3) In ASP.NET, the <link> tag can be inserted by dragging the style sheet file from Solution Explorer into the Web Form, either in Design or HTML view Comments in Cascading Style Sheets The characters /* */ can be added to embedded or external stylesheets to insert internal documentation /* Styles.CSS Created By: Prof. Struck Stylesheet is used to format main menu */ /* Corporate logo */ H1 {color:green} /* Red heading */ H2 {color:red} /* Blue heading */

3 CST272 ASP.NET Style Sheets Page 3 H3 {color:blue} Cascading Style Sheet Rules and Hierarchy CSS may contain conflicting styles when there are different rules for the same elements within inline, embedded and/or external style sheets In the name cascading style sheets is the definition of the cascading element In general: Inline takes precedence over embedded Embedded takes precedence over external Classes (Page 1) A class name can be used to format a group of different tags or a subgroup of a specific tag Prefix the name of the class with a period (.) <html> <head> <title>sample Embedded CSS</title> <style> h1 {color:green}.selcat {color:red}.bluehead {color:blue} </style> </head> Classes (Page 2) Apply the class with the attribute name class and the class name as per the following example: <body> <h1 class = "BlueHead">Welcome to Tara Store!</h1> <h2>product Listing:</h2> <ul> <li class = "SelCat">Gifts</li> <li>jewelry</li> <li>china & Crystal</li> <li>clothing</li> <li>books, Music, & Videos</li> </ul> Classes (Page 3) The headings on both this and the previous page would appear in blue: <h3 class = "BlueHead">About Tara Store</h3> <ul> <li>what s New</li>

4 CST272 ASP.NET Style Sheets Page 4 <li>current Sales</li> <li>location</li> <li>contact Us</li> <li>members Only</li> </ul> </body></html> Creating an External Style Sheet To create a new style sheet: 1. Select Project from the menu bar 2. Select Add New Item from the Project menu 3. Scroll down in the Templates: window and select the "Style Sheet" icon 4. Type a Name: for the new file (.css extension automatically added) and click the <Open> button Or double-click existing style sheet (e.g. Styles.css ) in the Solution Explorer window to open it Drag style sheet document from Solution Explorer into the Web document to link it Adding Style Rule for HTML Elements (Page 1) To add a new style rule to a style sheet for an HTML element use the Manage Styles Window : 1. Move to Web document if necessary (you cannot be in the style sheet document) 2. At the upper-left corner of the Manage Styles window click the <New Style> button Adding Style Rule for HTML Elements (Page 2) To add a new style rule to a style sheet for an HTML element use the Manage Styles Window (con.): 3. In the New Style dialog window a. Select the Selector:, e.g. HR b. Select Existing style sheet for Define in: c. Click <Browse> button and select filename of style sheet for URL (unless filename is already there) 4. Click the <OK> button To combine HTML elements is to create a hierarchy, e.g. UL LI which means LI s for UL s only (not OL s) Adding Style Rule for HTML Elements Adding Style Rule for a Class (Page 1) To add new style rule for a class name to style sheet also use the Manage Styles Window : 1. Move to Web document if necessary (you cannot be in the style sheet document) 2. At the upper-left corner of the Manage Styles window click the <New Style> button

5 CST272 ASP.NET Style Sheets Page Adding Style Rule for a Class (Page 2) To add new style rule for a class name to style sheet also use the Manage Styles Window (con.): 3. In the New Style dialog window a. Select the Selector:, e.g. HR b. Select Existing style sheet for Define in: c. Click <Browse> button and select filename of style sheet for URL (unless filename is already there) 4. Click the <OK> button Build the Style Rule To build the new style rule: 1. Click anywhere within an existing style rule 2. Select Styles from the menu bar 3. Select Build Style from the Styles menu Alternately steps 2 and 3 above can be implemented by clicking Style property in Properties window 4. The Modify Style dialog window lists formatting Categories based on element(s) are being formatted; select the one(s) to be edited and modify 5. Click the <OK> button and the rules are added to the style sheet for that element

Three Ways to Use CSS:

Three Ways to Use CSS: Introduction to CSS CSS Defined: Short for "Cascading Style Sheets". Determines how the elements in our XHTML documents are displayed and formatted. Designed to separate the content of a web page from