Cascading Style Sheets (CSS) is the second core web technology of the web. It defines the appearance of web pages by applying stylistic rules to matching HTML elements. CSS is normally declared in a file with the .css extension, separate from the HTML files it is modifying, though it can also be declared within the page using the <style>
element, or directly on an element using the
A CSS rule consists of a selector and a definition block, i.e.:
A CSS selector determines which elements the associated definition block apply to. In the above example, the
h1 selector indicates that the style definition supplied applies to all
<h1> elements. The selectors can be:
- By element type, indicated by the name of the element. I.e. the selector
papplies to all
- By the element id, indicated by the id prefixed with a
#. I.e. the selector
#fooapplies to the element
- By the element class, indicated by the class prefixed with a
.. I.e. the selector
.barapplies to the elements
<span class="bar none">, and
<p class="alert bar warning">.
CSS selectors can also be combined in a number of ways, and pseudo-selectors can be applied under certain circumstances, like the
:hover pseudo-selector which applies only when the mouse cursor is over the element.
You can read more on MDN’s CSS Selectors Page .
CSS Definition Block
A CSS definition block is bracketed by curly braces and contains a series of key-value pairs in the format
key=value;. Each key is a property that defines how an HTML Element should be displayed, and the value needs to be a valid value for that property.
Measurements can be expressed in a number of units, from pixels (px), points (pt), the font size of the parent (em), the font size of the root element (rem), a percentage of the available space (%), or a percentage of the viewport width (vw) or height (vh). See MDN’s CSS values and units for more details.
Other values are specific to the property. For example, the cursor
property has possible values
grab. You should use the MDN documentation for a reference.
One common use for CSS is to change properties about how the text in an element is rendered. This can include changing attributes of the font
font-family), the color
, and the text
text-justify). These are just a sampling of some of the most commonly used properties.
These values provide additional space around the content of the element, following the CSS Box Model :
The third common use for CSS is to change how elements are laid out on the page. By default HTML elements follow the flow model , where each element appears on the page after the one before it. Some elements are block level elements, which stretch across the entire page (so the next element appears below it), and others are inline and are only as wide as they need to be to hold their contents, so the next element can appear to the right, if there is room.
The float property can make an element float to the left or right of its container, allowing the rest of the page to flow around it.
Or you can swap out the layout model entirely by changing the display
flex (for flexbox, similar to the XAML
grid (similar to the XAML
Grid). For learning about these two display models, the CSS-Tricks A Complete Guide to Flexbox
and A Complete Guide to Grid
are recommended reading. These can provide quite powerful layout tools to the developer.
This is just the tip of the iceberg of what is possible with CSS. Using CSS media queries can change the rules applied to elements based on the size of the device it is viewed on, allowing for responsive design. CSS Animation can allow properties to change over time, making stunning visual animations easy to implement. And CSS can also carry out calculations and store values, leading some computer scientists to argue that it is a Turing Complete language.