CSS Basics
CSS (cascading style sheets)
CSS is used to apply formatting to HTML documents. HTML is intended only to identify categories, or kinds, of information, not the formatting that gets applied to that information. CSS applies the formatting to HTML elements (that is, to text, page layout, borders, and so forth).
- The term style refers to content formatting.
- The term style guide most likely preceded the use of he term stylesheet which was allegedly coined in the 1930's, but they both mean essentially the same thing.
- They provide lists of styles and formats to be used when preparing documents for publishing in order to provide consistency of appearance and grammatical usage. (Note that releasing a new or updated website or software is also often referred to as publishing).
- Prior to computers, the rules were saved on a sheet(s) of paper.
- The rules could also include document naming rules, organization and interrelatedness of the various documents, and so forth. These are also concerns of websites today.
- Here is a reference to various style guides.
- Style sheets are also employed by word processing and desktop publishing applications to efficiently store collections of formats that can then be easily applied in one step, thus precluding the need to apply multiple formats individually and repeatedly.
- Style sheets applied by software allowed for the easy global modification of the styles in an entire web site.
- For example, if you wanted to italicize words that a style specified as bold, you could do that by simply modifying the definition of the style. Then all uses of that style would be automatically updated!
- This has very obvious advantages.
- When the web started it was necessary to manually set each use of a format unless a find-and-replace tool could do it to the code globally.
- The term cascade refers to the complex set of CSS rules that govern the determination of the precedence of which one of two or more conflicting styles targeting the same element gets to be applied. The method of that determination travels through a "cascade" many different rules in order to make that determination.
- Web browsers contain their own CSS style sheet (user-agent style sheets) that get applied automatically to the HTML elements of an HTML file unless overruled by other stylesheets. That is why the contents of an
<h1>
tag typically appears bold and twice as large as normal surrounding text (assuming there no other CSS affecting that text).
- Any CSS that you, the author, write and apply to an HTML file will supersede the styles applied by the CSS specified within the browser.
What is a CSS selector, a ruleset, a declaration?
- CSS rulesets use selectors to select (to designate, to specify) where CSS formatting gets applied on a web page.
- In other words: when you want to apply formatting to a part of an HTML document you need to specify where that formatting ought to be applied. CSS selectors are used for that purpose.
- For example, you may want to apply a border around an image but not to other parts of the page. Therefore, there needs to be a way of specifying where the border needs to be applied. A selector is used to specify that unique location.
- See further information about selectors as you read below in this section and the subsequent section.
- In other words: when you want to apply formatting to a part of an HTML document you need to specify where that formatting ought to be applied. CSS selectors are used for that purpose.
- A declaration consists of:
- a CSS property (for example
border-width
) - ... and a value for it (for example
2px
). - Together, this property and value would be expressed in a declaration as:
border-width:2px;
- Note that the semi-colon (
;
) is used to separate a declaration from a subsequent declaration in the same ruleset. Even if it is the only or last declaration in a ruleset, it is good form to include it at the end of all declarations regardless.
- a CSS property (for example
- A ruleset (also referred to as a rule) is a collection of one or more selectors with each of their corresponding declaration(s) enclosed in curly braces
{ }
- This is the syntax of a ruleset:
selector {
← opening curly brace
property: value;
property: value;
( ...and so on )
}
← closing curly brace
- This is the syntax of a ruleset:
The three types of basic selectors
The three basic types of selectors are:
- tag (also called element) selector
- This style gets applied whenever the specified tag is used.
- class selector
- This style gets applied whenever the attribute
class="style-name"
is used.- Example:
<p class="celebrity">
- Example:
- This style gets applied whenever the attribute
- When being defined in code, the class name is preceded by a dot ( . )
- For example (note that this rule has two declarations and is written using typical indentations):
.celebrity {
color:red;
font-size:1.1em;
}
- For example (note that this rule has two declarations and is written using typical indentations):
- Classes may be applied to an unlimited amount of tags on a page, but the styles will have no effect if they are not relevant to the element they are applied to. For example, specifying a
font-family
for an image will not do anything. - pseudo classes are a special type of class that gets applied when the user takes, or has taken, a specific action, such as hovering over an element. The most common pseudo class is the following which will apply the style when the user hovers over a link:
a:hover
- id
- No, this has nothing to do with Sigmund Freud and his theory about id and ego!
- In this context, id is an abbreviation for identify.
- This type of style gets applied whenever the attribute
id="style-name"
is used.- Example:
<div id="container">
- Example:
- When being defined in code, the id name is preceded by a hashtag (
#
)- Example:
#container {
margin:10px;
padding:5px;
}
- Example:
- The id attribute is also used extensively by JavaScript to uniquely identify an element on a page. Therefore, each id used on a page must have use a unique value on that page (but that id value can be reused on other pages, but, again, only once within any other page).
- For example, you are not permitted to have two
id="container"
attributes in one html file, but you can have that id and value in any other html file, but only once per html file.- Note that you actually can code the same id value more than once in one html file, but it is not acceptable coding practice and will cause problems in many circumstances.
The three common types of compound selectors
Most of the time CSS selectors are a combination of multiple basic selector types.
- Dependent selectors
- This type of compound selector requires that a specific class (or id) attribute and value be within an element.
- Example of the CSS code for a dependent selector, in this example a class is used:
h3.celebrity {color:#333333;}
- Example of how it would be applied in the HTML code:
<h3 class="celebrity">text</h3>
- Example of the CSS code for a dependent selector, in this example a class is used:
- The above means that whenever there is an
h3
tag that has the attributeclass="celebrity"
then the style will be applied. - This concept also works with
id
selectors- Example:
h3#bonus
- Could be applied thus:
<h3 id="bonus">
- Example:
- Descendant selectors
- This type of style is applied if one element is nested inside another element, even if there are other elements in between.
- Example of the code:
div ul {color:#333333;}
- Example of the code:
- The above means that if there is a ul element nested inside a div element, then the style will be applied.
- For example, the above would be applied to the ul clement in this html code:
<div><aside><ul>
content</ul></aside></div>
- Group selectors
- This type of style will be applied when any of the selectors listed are used.
- The selectors in a group selector can include single and group selectors.
- Grouping saves code. If you want to apply the same formatting to multiple selectors, you can group them into one rule for ease and control and to minimize the amount of code.
- Example:
h1, h2, div#spec, .school {color:#333333;}
- The above means that
color:#333333;
will be applied to:h1
andh2
elements- A
div
tag with the attributeid="spec"
- Whenever a tag has the attribute
class="school"
- Example:
- Note that group selectors can include dependent and descendant selectors.
- Example:
div#container p.story, h1 em, h2 {color:red;}
- Example:
Note that there are many other types of selectors that are more complicated.
The four parts of the box model, from the inside to the outside
- content (the inner-most component of the box)
- padding
- border
- margin (exterior component)
The four possible CSS value specifications for padding, border, and margin
The following use padding as the example property. The syntax also applies to the border and margin properties:
1 value | |
---|---|
padding: 15px |
|
The above results in this padding: | |
all sides | 15px |
2 values | |
---|---|
padding: 15px 10px |
|
The above results in this padding: | |
top & bottom | 15px |
left & right | 10px |
3 values | |
---|---|
padding: 15px 10px 20px |
|
The above results in this padding: | |
top | 15px |
left & right | 10px |
bottom | 20px |
4 values | |
---|---|
padding: 15px 10px 15px 20px |
|
The above results in this padding: | |
top | 15px |
right | 10px |
bottom | 15px |
left | 20px |
Restrictions on specifying the width and height of elements
- Only block-level elements (for example,
<p>, <h1>, <div>
) and non-text inline elements (for example, <img>, <iframe>) can have a width and height applied successfully. - Note that this can be overridden for text elements (for example,
<em>, <strong>, <code>
) by using thedisplay:inline-block
property and value.
box-sizing
The box-sizing
property is used to control how the width and/or height of an element is calculated.
There are two possible properties:
box-sizing: content-box;
box-sizing: border-box;
Following are explanations of how overall width is calculated when using the two different property values:
box-sizing: content box;
(this is the default)
- This property will add the values of any padding and/or border-width to a specified width.
- For example, if an element has a CSS
width:200px;
and also aborder-width:5px;
andpadding:20px;
the overall width would include the width of 200px, plus twice the border width (adding the border of both sides) and twice the padding (adding the padding on both sides). The total width would be: 250px. - That total is calculated thus:
5px (left border)
20px (left padding
200px (specified element width)
20px (right padding)
+ 5px (right border)
250px total width
box-sizing: border-box;
- This property will include the values of any padding and/or border-width within the specified width.
- Regardless of the amounts of the border-width or padding, the total width will be the width specified.
- Based on the example above, the overall width would be 200px.
- The width of the content within that width can be calculated by subtracting the left and right border-width and padding which, together, totals 50px. Therefore the content width would be 150px.
The three units of measurement typically used in CSS
There are other units of measurement that CSS provides, but many use physical measurements (inches, cm, mm) that are not relevant to the web and mainly apply to printed output, but not to web pages (where physical size cannot be assumed).
px
– pixelsem
– the default size of the font at the position you use it. 1em = the size of the current font at that location.rem
– this is the same as an em unit except that the size is relative to the size of the default font at the root (top) level of the page.%
– percentage of container at the location where it will be applied.- The default container is the body element, but the container can also be other elements.
Note that there are other CSS units of measurement that are being used now that are more complex in nature such as vw, vh,
and others.
The three specificity values of basic selector types
Sometimes there is more than one CSS property value specified for an element. For example, if you have one CSS rule that says text ought to be blue and another that specifies red, which one takes precedence? Part of the cascade rules used to calculate which formatting takes precedence is the specificity of the selector used to apply the formatting.
The highest specificity means the highest precedence in applying a format, although there are several other factors to take into account when determining the formatting precedence in addition to specificity. Specificity is an important factor for determining precedence.
To determine the specificity of a selector, the values of its component selectors are used. These are the values for each type of basic selector:
- 1 – tag (element) selector
- 10 – class selector
- 100 – id selector
Examples:
- This selector has a value of 10:
.celebrity
- The following selector has a value of 101:
#maincontent h1
- How the specificity is calculated:
- the id selector = 100, plus the element selector = 1: total 101
- The following has a value of 22
div.school em.idea
- How the specificity is calculated:
- the two class selectors = 20, plus the two element selectors = 2: total 22
Note that pseudo-element and pseudo-class selector specificities are calculated by adding their components. For example the pseudo class :hover plus the anchor element together a:hover has a specificity of 11.
Three places you can store CSS
- In an external style sheet (plain text) file that uses the .css file extension. It is linked to within the
<head>
element of the html file. - Example (note that the link element has no closing tag):
<link href="path/file-name.css" rel="stylesheet" type="text/css">
- In the head of a document, putting the code inside
<style>
tags. - Example with two declarations:
<style rel="stylesheet" type="text/css">
span.celebrity {font-size:1.1em; color:#9bc439;}
#container {width:1100px: margin:0 auto;}
</style>
- A style can also be stored inside an opening tag using html's style attribute. This is often referred to as an inline style. This method ought to be avoided in favor of using an external .css file which allows for applying the style elsewhere and modifying it in one central location.
- Example using two properties:
<h2 style="color:#F35c68; font-weight:normal;">Content goes here</h2>
- Example using two properties:
12/20/17 last full update