Defining Style Rules

You associate formatting instructions with a web page by defining CSS rules (whether in separate files, embedded, or inline see Applying CSS to HTML and XHTML)

Syntax

Each rule has two parts: a selector and a group of one or more declarations surrounded by braces (curly brackets):

selector { declaration; declaration2; ...}

Each declaration is formed like this:

property: value

Remember that there can be several declarations in one rule. A common mistake is to mix up colons, which separate the property and value of a declaration, and semicolons, which separate declarations. A selector chooses the elements for which the rule applies and the declaration sets the value for the different properties of the elements that are chosen.

The property is one of many properties. w3.org has a list of all of the CSS Properties.

Basic Uses

Here is an example of how you would make all span elements appear bold:

span {
	font-weight: bold;
}

The font-weight: bold; declaration has the property font-weight and the value bold which makes the font bold.

That would appear like this:

Bold Text

A slightly more complex example is

span {
	font-weight: bold;
	color: yellow;
	background-color: black;
}

That would appear like this:

Yellow Bold Text

You can use many other properties, and values, but this is just a beginning as to how to use CSS.


  This article uses material from the Wikipedia page available here. It is released under the Creative Commons Attribution-Share-Alike License 3.0.

Cascading_Style_Sheets/Defining_Style_Rules
 



 

Connect with defaultLogic
What We've Done
Led Digital Marketing Efforts of Top 500 e-Retailers.
Worked with Top Brands at Leading Agencies.
Successfully Managed Over $50 million in Digital Ad Spend.
Developed Strategies and Processes that Enabled Brands to Grow During an Economic Downturn.
Taught Advanced Internet Marketing Strategies at the graduate level.


Manage research, learning and skills at defaultlogic.com. Create an account using LinkedIn to manage and organize your omni-channel knowledge. defaultlogic.com is like a shopping cart for information -- helping you to save, discuss and share.


  Contact Us