CSS, or Cascading Styles Sheets, is a way to style HTML. While the HTML is the content, the cascading style sheet is the presentation of it.
With CSS you are able to add new looks to your old HTML, restyle a whole website with a few changes to the CSS code, use the style you crate on any webpage.
A style sheet is made up of style rules that tell a browser how to represent a document. There are few ways to link these rules to your HTML documents. The simplest method is to use HTML’s STYLE element. This is the element that contains the style rules for the page. It is placed in the document HEAD.
Note: the STYLE element is a good method of experimenting with style sheets, though it has disadvantages that you should consider before using this method in practice.
Each rule is made up of a selector (an HTML element such as BODY, EM, or P) and the style that is to be applied to the selector.
Style rules are formed as follows:
selector { property: value }
Multiple style declarations are separated by a semicolon:
selector { property1: value1; property2: value2 }
The following code segment defines the color and font-size properties for H1 and H2 elements:
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE=”text/css”>
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
These style sheet tells a browser to show level-one headings in an extra-large, red font, and level-two headings in a large, blue font.
Here is some basic syntax for you to get accnowledged with.
Selectors
Any HTML element is a possible CSS1 selector. The selector is the element linked to a style. For example, the selector in
P { text-indent: 3em }
is P.
Class Selectors
A simple selector can have different classes. It allows the same element to have different styles. For example, an author wishes to display code in a different color depending on the language:
code.html { color: #191970 }
code.css { color: #4b0082 }
The example shows two classes, css and html for use with HTML’s CODE element. The CLASS attribute indicates the class of an element in HTML, e.g.,
<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>
Classes can also be announced without an associated element:
.note { font-size: small }
The note class in the example may be used with any element.
It is practical to name classes according to their function not their appearance.
ID Selectors
ID selectors are individually set to define on a per-element basis. This selector type should be used only sparingly because of its inherent limitations. It is assigned by the indicator “#” preceding a name. For example:
#svp94O { text-indent: 3em }
This would be referenced in HTML by the ID attribute:
<P ID=svp94O>Text indented 3em</P>
Contextual Selectors
Contextual selectors are only strings of two or more simple selectors marked off by white space. These selectors can be assigned normal properties. They take precedence over simple selectors due to the rules of cascading order. For example, the contextual selector in
P EM { background: yellow }
is P EM. This rule tells that highlighted text within a paragraph should be with a yellow background; emphasized text in a heading would stay unaffected.
Declarations
Properties
A property is set to a selector to manipulate its style. Properties include color, margin, and font.
Values
The declaration value is an assignment that a property get.
Grouping
Grouping of selectors and declarations is used to decrease repetitious statements within style sheets. For example, all the headings in a document can be given identical declarations through a grouping:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
Inheritance
Virtually all selectors nested within selectors inherit the property values assigned to the outer selector unless otherwise modified. For instance, a color defined for the BODY will also be applied to text in a paragraph.
There can be cases when the inner selector does not inherit the surrounding selector’s values, but these should stand out logically.
Comments
Comments are indicated within style sheets with the same conventions that are used in C programming. A sample CSS1 comment:
/* COMMENTS CANNOT BE NESTED */
This basic tutorial is intended as an introduction to Cascading Style Sheets. I hope you’ve got enough information to be able to experiment with a few of your own styles. In my next post I’ll tell you more about CSS, in particular about Pseudo-classes and Pseudo-elements and Cascading Order. Meanwhile, you may check one of the largest collections of CSS templates.
Related posts:
[...] already gave you some basic CSS tutorial, but I’m pretty sure you’d like to know more. So, in this post I’m going to give [...]
These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.