Cascading Style Sheets (CSS)

Cascading Style Sheets, abbreviated CSS, allow website developers and designers to style a website’s layout and content in a wide array of ways. While HTML is a coding language used to define the structure of a web page, CSS allows us to target specific HTML structure elements to modify their position and display style.

Targeting Elements, Classes, and IDs

CSS rules are written with the following syntax:

selector { property: value; }

The property and value combined are referred to as a declaration.
An example CSS rule:

h1 { color: red; }
The above CSS declaration applied to this element is what is making this font color Red.

The above CSS rule selects each H1 HTML element and sets its color property to the value of red. The color property is what determines the font color of a text.

CSS Pseudo-classes

A CSS Pseudo-class is added to a selector in order to target (or select) a specific state of an element.
CSS Pseudo-class example:

.link-hover-css a:hover {
    color: blue;
}
.link-hover-css a {
    color: red;
}

The above example CSS selects all “a” elements within containers with a class of “link-hover-css” and sets their font color to Red. When the link is hovered over with a mouse cursor, the link color is then changed to blue.
Example output of above CSS: Red link, blue on hover.

There are many different Pseudo-classes. Here are a handful:

:visited
:hover
:active
:focus
:first-child
:first-of-type
:last-child
:last-of-type

CSS Pseudo-elements

Pseudo-elements are used to style specific aspects of the targeted element. They can be used to target and style the first letter or first line of text within a container, add content before or after an element, or to style the display of selected text.
CSS Pseudo-element examples:

.pseudo-elements-css { font-size: 16px; color: black; }
.pseudo-elements-css::first-line { color: red; background-color: blue; }
.pseudo-elements-css::after { content: " --content added using ::after-- "; }
.pseudo-elements-css::before { content: " --content added using ::before-- "; }
.pseudo-elements-css::selection { background-color: black; color: white; }

This is an output example of the above “pseudo-elements-css” classes:

The first line will have a background color of blue and a font color of red. There will be content added after and before the element which speaks to itself, and when text is selected with your mouse cursor it will have a black background with a white font. The default, non-styled text will be black at 16px in size.

Here is a list of CSS Pseudo-element selectors:

::first-letter
::first-line
::after
::before
::selection

CSS Media Queries

Media queries allow for the targeting of elements based on specific conditions and media states. A general example would be targeting the width property of a specific element. Using media queries, the width for an element could be set to 200px when the screen resolution is 1000px wide or greater and 100px when the screen resolution is 999px in width or less. This is a common approach toward making a website mobile friendly which is referred to as mobile responsive. A more in-depth definition (with examples) of CSS Media Queries can be found here.

CSS Rules: What can CSS do?

 Margins 

The Margin property adds a definable amount of space around the outside of an HTML element.
Margin Syntax Examples:
Define all margins separately:

selector { property: top-value right-value bottom-value left-value; }
h1 { margin: 1px 2px 3px 4px; }

The above will add a 1px margin to the top, a 2px margin to the right, a 3px margin to the bottom, and a 4px margin to the left of the element to all H1 elements.

Define grouped and separate margins:

selector { property: top-value right-and-left-value bottom-value; }
h1 { margin: 1px 5px 4px; }

The top margin will be set to 1px, right and left to 5px, and the bottom to 4px.

Define top, bottom and left, right margins together:

selector { property: top-&-bottom-value right-and-left-value; }
h1 { margin: 5px 10px; }

The above example will add a 5px margin to the top and bottom and a 10px margin to the right and left of all H1 elements.

Define a single specific margin:

selector { property-top: value; }
h1 { margin-top: 1px; }

The margin property can be indicated as a margin-top, margin-bottom, margin-left, or margin-right in order to target the specific property with a value.

 Padding 

Padding in many ways are similar to Margins, however they apply to the inside of the container to which they are applied and not the outside as margins do. With this being the primary difference between the two, their rules can be written with the same syntax. Review the margin examples above, and note that the word ‘margin’ in each rule can be replaced with ‘padding.’
Define a single specific padding:

selector { property-top: value; }
h1 { padding-top: 1px; }

The difference between Margin and Padding:

This is an example of a div element with a margin of 25px and no padding.
The above example shows a div with 25px of margin space which is acting on the outside of the element creating white space around it.
This is an example of a div element with padding of 25px and no margin.
This example has 25px of padding applied, but no margin set. As you can see the padding applies to the div inside the border and adds “padding” between the content and the container border.
This is an example of a div element with padding of 25px and no margin.
Finally, with both rules applied, we see the internal padding along with the external white space.

Additional CSS Properties (not a complete list):

color
font-style
font-size
font-weight
font-family
background
background-color
height
max-height
min-height
width
max-width
min-width
display
visibility
float
This entry belongs to the following Glossary Lists:
Cascading Style Sheets (CSS), Coding, Mobile Friendly, Responsive, Website Design, and Website Development.

Return to the Glossary Index

About Rick D'Haene

Rick D'Haene is a self-taught web developer, with a degree in website design, who has extensive knowledge of internet marketing and organic search engine optimization (SEO). He and his lovely wife Melissa reside in Bellingham, Washington, and have a few fun pets to keep them company.

Find me here: Twitter /Facebook /Google+ /

    Leave a comment

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>