CSS Primer for Lightning Developers: CSS Structure

This section will guide you through commonly used CSS syntax and conventions to help you better understand how to apply styling to your Lightning Components and Applications.

Rule Sets

CSS rules – or “rule sets” – define how styles should be applied to specific elements in an HTML document.

If you were to look at a CSS style sheet, you would notice a common structure for these rule sets, as each one consists of what’s referred to as a selector followed by one or more declaration blocks.

Selector

Every rule set begins with a selector. Selectors are pattern matching rules that specify the HTML elements that a style will be applied to.

Selectors can match elements by their type, ID, class, attribute, or other contextual pattern. If an HTML element meets all of the conditions of a selector pattern, the selector matches the HTML element and the corresponding styling is applied to it.

Declaration Block

The declaration block immediately follows the selector in a rule set. Declaration blocks use syntax that resembles object notation in that they begin and end with curly braces and contain property and value pairs called declarations.

Declaration

A declaration defines how an element matched by a selector should be styled. Properties and values are separated by a colon (:) character, while each property / value pair is separated by a semicolon (;) character.

For example:

div {

    padding: 10px;

    margin: 2px;

}

As a best practice, even if you only have a single declaration in a declaration block, you should end the declaration with a semicolon.

For example:


h1 { color: red; }

Property

The property in a declaration is a specific style aspect to be applied to elements matched by the selector. Each declaration can contain only one property.

Value

The value is the assignment of a specific parameter to define the styling for an element.

CSS Comments

You can include comments in your CSS style sheets to add notes, help organize your rule sets, or hide declarations or entire rule sets from the browser if they are no longer needed.

CSS comments start with /* and end with */ and CSS syntax supports both single line and multiple line comments.

An example of a single line CSS comment:


/* This is a single line CSS comment! */

An example of a multiple line CSS comment:


/*

This is a multiple

line CSS comment.

*/

An example of using CSS comment syntax to both add in-line notes and to hide a declaration from the browser:


p {

    margin-top: 5px; /* You can add comments in-line */

    margin-right: 10px;

    /* margin-bottom: 15px; */

    margin-left: 10px;

}

Mike Topalovich
Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.

I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.

Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.
Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply