Cascading Style Sheet Syntax
selector {property: value}
For example:
H1 {color: red}
The selector is normally the HTML element/tag you wish to define example: header tag <h1> the property is the attribute you wish to change (Example: color), and each property can take a value (Example: blue).
The property and value are separated by a colon and surrounded by curly braces (next to Enter with shift pressed) . If the value comprises multiple words (Example: sans serif) then put quotes around the value:
p {font-family: "sans serif"}You can also specify more than one property; each property should be separated by a semi-colon. For example to define a centre aligned paragraph, with a red text colour:
p {text-align:center;color:blue}
To make the style definitions more readable, you can describe one property on each line, like below:
p
{
text-align: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
The font-family property in the code above offers the browser several values to choose from; Note: the font you specify needs to be on the viewers computer in order for them to see the text in that font, that's why it is common to see a number of fonts for the browser to choose from. The browser will go down the line until it finds a typeface it recognizes. The first font listed (Arial) which is the preferred typeface, the second alternative font is (Helvetica) which will be used if the user's system doesn't have Arial installed.
The third item (sans-serif) is a generic style of font rather than a specific one--this is recommended as a last alternative because most systems have at least one sans-serif font installed. If the browser doesn't find any matches, it will use its default font.
Grouping
You can group selectors. Separate each selector with a comma. In the example below I've grouped heading paragraph and list item to be blue color.h1,p,li
{
color: blue
}
Other Selectors
A selector identifies the part of the document (web page) to which the formatting applies. All HTML elements can be a selector, but sometimes you want to be more specific in your style definitions.Suppose, for example, you have a table with many rows, and you want to format the rows several different ways. Using the
For this you can use classes and or IDs. Once you define a class or ID, you can attach it to any HTML element within the web page to apply a style.
The id Selector
IDs are used in basically the same way as classes except that they are preceded by a hash or number sign (#) (next to enter unshifted)#nameofid {Style definition}id selectors apply to only one element on a page whereas a clas selector can apply to several elements. The style rule below will match a paragraph element that has the id value "red-center":
p#red-center
{
text-align: center;
color: red
}in your html you would use that id like this:
The content / text / words in the paragraph
The Class Selector
A class is defined by giving it a name (always preceded by a period (full stop)) and adding the standard style definition of properties and values inside curly brackets:.classname {Style definition}With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one centre aligned paragraph in green, and one centre aligned paragraph in blue. Here is how you could do it using classes:
.green-center {text-align: center;color: green}
.blue-center {text-align: center;color: blue}
Then in your HTML document you would assign the class to the HTML tag:
This paragraph will be centred and green in color.
Where as this paragraph will be center-aligned and blue.
Related Articles
Custom Search