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:
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:
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
Return to the Glossary Index