Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

CSS for beginners – Step 1/3

Friday, August 1st, 2014 by Servage

CSS SyntaxAs I am addressing novice programmers of CSS in this post, I presume they may have some knowledge of HTML. Hopefully, they understand that what I am providing here is just slightly more advanced than simple HTML coding. CSS strengthens web design, particularly for HTML 4.0 and on. In fact, CSS was specifically introduced to improve the performance of HTML, by reducing a lot of interference within the document and coding itself.

To be clear, HTML defines the content of the documents with specific tags, such as: heading (h1,h2,h3…), paragraph (p), etc. But HTML is no longer necessary for defining style throughout a site, as styles often change as well as repeat in particular instances across several web pages. Web programmers have always been tasked with distinguishing styles in specific parts of a site, while engaging in the intensive labor of repeating these distinctive blocks of code each time programming for a new web page begins. Prior to styling methods, this work was very tedious, while adding bulk in HTML documents or source code. Therefore, W3C devised CSS (Cascading Style Sheets) to modify the various styles found on a page. In turn, this kept code bulk out of HTML documents. With CSS, you can find a short and sweet HTML document at the web page source!

In this first part, let’s dive into CSS syntax directly and see how it is formed in a general sense.

Introduction to CSS Syntax

In CSS there are style patterns. These patterns are implemented through a defined arrangement with matching rules. Essentially, we define which style is to be applied to which elements in your HTML code document.

When pointing towards a particular pattern (HTML element you wish to style), we use the CSS to select it. Therefore, one of the more basic elements of CSS are called “selectors”. These selectors are simple HTML tags like h1, h2, h3 or can be more elaborate patterns for a specific part of the code.

Whatever style we wish to apply to a particular selector is defined by way of a “declaration”. This means we declare or broadcast its style properties through values found in the declaration code. (See image above)

Rules & Components of CSS Syntax

There are certain rules in CSS syntax such as:

Your CSS declaration appears in curly brackets and always ends with semicolon. You must put a semicolon at the end of each individual declaration.

Properties and values, within a declaration, are separated by a colon, as in the following example:

{

property 1 : value 1;

property 2 : value 2;

}

Notice that we have two declarations, each on a separate line and that the curly brackets also begin and end on separate lines. While not mandatory to write the code in this manner, it makes for clean code that is a standard practice. The standard is to present code with as little clutter as possible.

Besides selectors and declaration, another important component of syntax is CSS comments. These are optional, but help programmers understand how or why a specific selector is being used. If we look at a short categorical list of CSS selectors, we find many different types, serving different purposes such as:

  • Type Selectors: name the HTML tag to style, matching a specific element within the HTML document.
  • Class Selector: match with a specific class or classes cited in the HTML document. Classes are applicable to multiple elements in HTML. And so you edit the HTML document to designate a class, which is then defined by the CSS.
  • ID Selector: match HTML elements with specific ID, or individually targeted element. Like class selectors, you need to edit the HTML document by specifying a unique ID for each page.
  • Universal Selector: match with any element throughout the entire site.
  • Attribute Selectors: are applicable to elements with specific attributes; i.e., attribute value.

There are other types of CSS selectors, and we will explore their types and practical usage in part 2 of this series.

References & More Reading
CSS Introduction
What is a CSS Selector?

 

CSS for beginners - Step 1/3, 3.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials, Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.