Online College Courses for Credit

+
Anatomy of CSS

Anatomy of CSS

Rating:
(0)
Author: Devmountain Tutorials
Description:

Recognize the parts of CSS syntax including styles, rules, and properties.

(more)
See More
Tutorial
what's covered
This section will explore the parts of CSS by discussing:
  1. REVIEW: HOW CSS IS USED IN WEB PAGES
  2. CSS RULES SYNTAX
  3. PROPERTIES AND VALUES
  4. COMMENTS AND WHITESPACE

1. REVIEW: HOW CSS IS USED IN WEB PAGES

In Unit 1 we covered the role that CSS (Cascading Style Sheets) plays in a web page. CSS is a style sheet language. Style sheet languages are used to specify how a document should be presented to users. When the browser converts HTML to a visual format for users to see, it uses CSS to determine how each HTML element should look.

Web browsers will typically include very basic, minimal styles in their default CSS. If they didn’t have default CSS, you wouldn’t be able to view the content of any HTML page that didn’t have its own CSS! Default styles exist to make sure content is readable even if the author of the page didn’t include their own CSS. Different browsers might have different default styles but, in general, they’re pretty similar — headings are large and bold, paragraphs are separated on different lines, and links are blue or sometimes purple.

Below you can see the default styles applied to each element.

Default styles are very bland though, so developers will add their own, additional CSS to give their pages a more distinctive look and feel. CSS can be used to make simple stylistic changes, like changing the font of a particular element.

Below you can see the same HTML code with CSS added to change the heading font.

In Unit 1, we demonstrated how CSS can be used to make more dramatic changes in visual style by making a paragraph look like a button. The language is so extensive that it can even be used to create animations. We also showed you examples from Codepen of developers using CSS to create visual art.


2. CSS RULES SYNTAX

When writing HTML, you use tags to create elements. When writing CSS, you use selectors and declarations to create rules. In other words, CSS syntax is used to define rules that specify groups of styles to apply to a particular elements or groups of elements on your web page.

Here’s a rule you saw earlier that changes the font of h1 elements:


h1 { 
  font-family: sans-serif; 
}

To create a rule, start with a selector.


h1

h1 will select the element that our rule should be applied to. In this case, we’re selecting any h1 elements.

Then, add a pair of curly braces. In the curly braces, you’ll list one or more style declarations.


h1 { 

} 

Style declarations are pairs of property names and values that end with a semicolon.


h1 { 
  font-family: sans-serif; 
}

In the example above, font-family is the name of a property and sans-serif is its value.

Additional declarations should be listed on separate lines. For example, if we also want to change the color of h1 elements, we can just add another declaration inside the curly braces like so:


h1 { 
  font-family: sans-serif; 
  color: purple; 
} 

Edit the CSS below in the Editable Code area so that a elements use a green, bold, sans-serif font. So far, the rule that selects all a elements only sets their font-family to sans-serif and color to green. Your task is to add another declaration to set the font-weight property to bold. You’ll see your changes update live, as you type, in the Live Output section. You can reset everything with the Reset button. Click on the Show Solution button to see the answer.

try it
Follow these steps in the box below:
1. Add a new line below color: green; and press the Tab key to indent the declaration by 2 spaces.
2. Start the declaration with the property name, font-weight. Then, add a colon (:) and a space.
3. Add the value you want to set the property to — bold.
4. End the your declaration with a semicolon (;).

Now that you understand how to read CSS and how CSS rules are structured, we can take a more detailed look at the particulars of the language, starting with properties and values.

terms to know

Rules
Rules are the basic building blocks of CSS. Rules are made of selectors and declarations.
Selectors
In CSS, selectors specify the elements or groups of elements that a rule should be applied to. A rule can have one or more selectors.
Style declarations
Style declarations, or simply declarations, are property-value pairs. A rule can have zero or more declarations.

3. PROPERTIES AND VALUES

CSS rules are made of declarations — property-value pairs used to tell the browser how elements should be styled. Properties are identifiers that represent the stylistic features to be modified. So far, you’ve encountered properties like font-family, font-weight, and color. Each property is assigned a value that indicates how the property should be styled.

CSS values can take many different forms. So far, we’ve shown examples of using keyword values to set an element’s font and color like using the keyword bold to set font-weight and green to set color.


a { 
  font-weight: bold; 
  color: green; 
} 

Besides keywords, there are also numeric values and values that take the form of a function.

Numeric values are usually numbers followed by a unit of measure. For example, the width and height properties are styled with numeric values.

In the box below you can see how the width uses a numeric value.

Use numeric values to set an element’s padding-top and padding-bottom properties by adding to the CSS rule in the Editable code section below. So far, the rule selects the ul element and sets its background-color to aqua. Add two more declarations so padding-top and padding-bottom are both set to 15px. Click Show Solution to verify that you’re on the right track. If you need to start over, press Reset.

try it
Follow these steps in the box below:
1. Add a new line below background-color: aqua; to start a new declaration.
2. Set padding-top to 15px. Don’t forget to end the declaration with a semicolon.
3. Add another declaration so padding-bottom is 15px. Again, don’t forget the semicolon!

Other values are functions. For example, the rgb() function can be used to specify a color by the color’s red, green, and blue values.

terms to know

Properties
Properties are identifiers that represent the stylistic features to be modified.
Font weight
Property that allows a choice such as "bold" to stylize text.
Color
Property that changes the color of the text.
Numeric values
Numeric values are usually numbers followed by a unit of measure, for height and width.
Function
CSS has functions that can be used as values. For example rgb() specifies a color and linear-gradient() specifies a gradient.
rgb()
Function that can be used to specify a color by the color’s red, green, and blue values.

4. COMMENTS AND WHITESPACE

Like HTML, CSS has syntax for comments. CSS comments start with /* and end with */. Developers use CSS comments for the same reasons they use HTML comments — they’re used to describe how the code works so others can understand it and can be used to temporarily “delete” a style without actually having to remove it.


aside { 
  /* Asides should be indented just a bit so they’re 
     not confused with main body text. */ 
  margin-left: 50px; 
} 
 
p { 
  /* font-size: 40px; */ 
}

For the most part, browsers ignore whitespace in CSS just like they do in HTML. For example the CSS below, though it’s hard to read, is completely valid:


body {margin: 0 auto;} 
h1, h2, h3, h4, h5, h6 {font-family: ‘Helvetica’, sans-serif; border-bottom: 1px solid blue;}

Of course, just because you can leave out whitespace you should still be diligent about adding whitespace to make your CSS easier to read and follow.


Terms to Know
Color

Property that changes the color of the text.

Font weight

Property that allows a choice such as "bold" to stylize text.

Function

Functions are used as a value for various CSS properties.

Numeric values

Numeric values are usually numbers followed by a unit of measure, for height and width.

Properties

Properties are identifiers that represent the stylistic features to be modified.

Rules

Rules are the basic building blocks of CSS. Rules are made of selectors and declarations.

Selectors

In CSS, selectors specify the elements or groups of elements that a rule should be applied to. A rule can have one or more selectors.

Style declarations

Style declarations, or simply declarations, are property-value pairs. A rule can have zero or more declarations.

rgb()

Function that can be used to specify a color by the color’s red, green, and blue values.