1. Using CSS
There are three ways to insert CSS into an HTML document: by using an internal style sheet, inline styles, or an external style sheet. An internal style sheet applies to a single page, an inline style to a single element, and an external style sheet to potentially an entire web site.
Internal style sheet
An internal style sheet is useful when a single document needs to have its own unique styling. The style sheet is then embedded within the section of the web document using the element. This element is a container for style sheet rules and should have its type attribute set to "text/css" .
p { color: red; }
Inline style
Stylingcan be assigned to an individual element by using the style attribute to set an inline style. It is a generic attribute that can be included in any HTML start tag, and its value is the CSS declarations that will be applied to the element, separated by semicolons. There is no need to specify a selector because the declarations implicitly belong to the current element.
Green text
This approach should be used sparingly because it mixes style with content and therefore makes future changes more cumbersome. It can be useful as a quick way to test styles before they are moved out to an external style sheet.
External style sheet
The most common way to include CSS is through an external style sheet. The style sheet rules are placed in a separate text file with a .css file extension. This style sheet is then referenced using theelement in the web page header. The rel (relationship) attribute must be set to "stylesheet" and the meta type attribute can optionally be set to "text/css" . The location of the style sheet is specified with the href attribute.
Another less common way to include an external style sheet is to use the CSS @import function from inside of the element. For this function to work, it must be placed before any other rules.
@import url("MyStyle.css");
Using an external style sheet is often preferred because it completely separates CSS from the HTML document. It is then possible to quickly create a consistent look for an entire web site and to change its appearance just by editing a single CSS document. It also has performance benefits because external style sheets are cached and therefore need to be downloaded only oncefor the first page a visitor views at your site.
Testing environment
To experiment with CSS, you can use a simple text editor such as Notepad in Windows (found under Start Programs Accessories Notepad) or TextEdit on a Mac (found under Finder Applications TextEdit). Type the following single style rule into a new document in the editor. The rule will color the background of a web document red.
body { background: red; }
Save the file as MyStyle.css and then open another empty document. This new document will become the HTML file that uses the external style sheet you just created. Write the following HTML markup into the document, which includes a reference to the style sheet along with the minimal markup for a HTML 5 web document:
This page is red
Go ahead and save this text file as MyPage.html in the same folder as the CSS file. You have now created a simple environment in which you can test CSS. To view the page, open MyPage.html with your web browser. You will see that the background is indeed colored red because of the rule in the style sheet.
View source
While you have the browser opened, you can view the HTML markup that makes up the page by pressing Ctrl+U on a PC or Cmd+U on a Mac. This shortcut works in all major browsers, including Chrome, Firefox, and Internet Explorer (IE). You can also find the view source window by right-clicking on the page and selecting View Source. In Firefox and Chrome, the style sheet is clickable, allowing you to view the external style sheet rules that apply to the web page. (Note that in Chrome, you have to right-click the style sheet and select to open it because this file is stored on your local machine.)
Viewing the source code of web pages like this provides a great way to learn from other web developers. Whenever you find an interesting element on a web pagewhether it is created with HTML, CSS or JavaScriptthe page source will reveal how it was created.
Comments
Comments in CSS are created by using the C-style notation ( /* */ ). Everything placed between /* and */ will be ignored by browsers, even if the delimiters span multiple lines.
/* Multi-line
Comment */
The main use of comments is to clarify the code to developers, including you in the future. They can also be used to improve readability by delimiting sections of the style sheet or providing meta data about the file, such as the authors name.
/*
* Meta data
*/
/*** Section heading ***/
p { margin-top: -1px; } /* clarification */
Comments are also useful for temporarily deactivating declarations or entire style rules for testing purposes.
p { /* color: white; */ }
Whitespace
Whitespacerefers to spaces, tabs, and new lines. You are free to format your style sheets however you like with whitespace to make them easier to read. One common formatting convention is to split declarations across multiple lines.
.fruit {
color: red;
margin: 1px;
}
Another popular convention is to keep a rules declarations in a single line and split the declarations into multiple lines only when they become too numerous.
.fruit { color: red; margin: 1px; }
.fruit.apple { color: green; margin: 2px; }
The formatting you use is a matter of preference. Choose the one that makes sense to you and aim to keep it consistent.
2. Grouping
To keep style sheets short and easy to edit, similar rules can be grouped together. This grouping offers several ways to specify a set of related rules. For example, you can color the text red and the background black for two header elements in four different ways, as described in the following sections.
Ungrouped rules
Each rule can be written separately, which allows you to apply individual style rules to each selected element.
h1 { color: red; }
h1 { background: black; }
h2 { color: red; }
h2 { background: black; }
Grouped selectors
The selectors can be grouped together by separating them with a comma. This grouping will make the declaration apply to multiple selectors.
h1, h2 { color: red; }
h1, h2 { background: black; }
Grouped declarations
The declarations can be grouped together by separating them with a semicolon. All styles within the declaration block will be applied to the selector.
h1 {
color: red;
background: black;
}
h2 {
color: red;
background: black;
}
Grouped selectors and declarations
Both the selectors and declarations can be combined, resulting in a single rule.
