To really get the value out of CSS, you need to create a style sheet. To create a style sheet in Visual Studio, choose Website -> Add New Item from the Visual Studio menu. Then, pick the Style Sheet template, specify a file name (like StyleSheet.css), and click Add. In a style sheet, you define several styles (also known as rules). You can then use these rules to format ordinary HTML and ASP.NET controls. Each rule defines a collection of formatting presets that determines how a single ingredient in your web page should be formatted. For example, if you want to define a rule for formatting headings, you start by defining a rule with a descriptive name, like this:
.heading1
{
}
Each rule name has two parts. The portion before the period indicates the HTML element to which the rule applies. In this example, nothing appears before the period, which means the rule can apply to any tag. The portion after the period is a unique name (called the CSS class name) that you choose to identify your rule. CSS class names are case sensitive.
Once you’ve defined a rule, you can add the appropriate formatting information. Here’s an example the sets the heading1 style to a large sans-serif font with a green foreground color. The font is set to Verdana (if it’s available), or Arial (if it’s not), or the browser’s default sansserif typeface (if neither Verdana nor Arial is installed).
.heading1
{
font-weight: bold;
font-size: large;
color: limegreen;
font-family: Verdana, Arial, Sans-Serif;
}
As you can see, the syntax for defining a style in a style sheet is exactly the same as it is for defining an internal style (not including the rule name and curly braces). By convention, each formatting option in a style is placed on a separate line, but this detail is optional. You can also create rules that are applied to HTML tags automatically. To do this, specify the tag name for the rule name. Here’s a rule that affects all <h2> tags on the page that uses the style sheet:
h2
{ ... }
If you want to apply formatting that applies to the entire web page, you can create a style sheet rule for the <body> element:
body
{ ... }
This gives you a good way to set the default font name and font size. Fortunately, you don’t need to hand-write the rules in your style sheet. Visual Studio allows you to build named styles in a style sheet using the same style builder you used to create inline styles earlier. To use this feature, add a blank style with the right rule name, like this:
.myStyle
{
}
Then, right-click between the two curly braces of an existing style and choose Build Style. You’ll see the familiar Modify Style dialog box, where you can point and click your way to custom fonts, borders, backgrounds, and alignment. If you want to create a new style from scratch, simply right-click an empty region of your style sheet and choose Add Style Rule. A typical style sheet defines a slew of rules. In fact, style sheets are often used to formally define the formatting for every significant piece of a website’s user interface. The following style sheet serves this purpose by defining five rules. The first rule sets the font for the <body> element, which ensures that the entire page shares a consistent default font. The rest of the rules are class based, and need to be applied explicitly to the elements that use them. Two rules define size and color formatting for headings, and the final rule configures the formatting that’s needed to create a bordered, shaded box of text.
body
{
font-family: Verdana, Arial, Sans-Serif;
font-size: small;
}
.heading1
{
font-weight: bold;
font-size: large;
color: lime;
}
.heading2
{
font-weight: bold;
font-size: medium;
font-style: italic;
color: #C0BA72;
}
.blockText
{
padding: 10px;
background-color: #FFFFD9;
border-style: solid;
border-width: thin;
}
Posts
No comments:
Write comments