CSS Syntax

The syntax of CSS is the arrangement and formatting when writing text in a CSS file (.css). The syntax has often been regarded as time-consuming by the programming community, as it's strikingly different from other programming languages like JavaScript's syntax.

HTML Referencing

In order for CSS to work, an HTML file (.html or .htm) needs to exist. Inside the HTML, styling can be written in a handful of ways. CSS can be written using the style attribute in an element. For instance:

<p style="/* styles go here */">This span element will show red</p>

Moreover, styles can also be applied using the <style> element:

<style type="text/css">
    /* styles go here */
</style>

However, styling is often found in an external file, known as a stylesheet, ending with the .css filename extension. The file must be referenced in the HTML using the <link> element:

<!-- Here, the filename is 'styles.css', but this can be modified later -->
<link rel="stylesheet" href="styles.css" type="text/css" />

Basics

HTML Elements are styled within rules in the stylesheet. Rules contain two main segments. The selector grabs the HTML Element by an identifier (e. g. class, id, tag name, etc). After which are declarations, which are wrapped in curly brackets. Declarations include a property (e. g. background-color, position, border, etc) and an assigned value that can be modified to produce a specified resulting style. First, an element must exist in the document:

<span class="foo" id="bar" data-baz>Hello world!</span>

In the stylesheet, the element can be grabbed using the selector:

/* Here, all <span> elements are selected using its tag */
span {
    color: red;
}

/* Here, all elements with the class of 'foo' are styled */
.foo {
    color: red;
}

/* Here, all elements with the id of 'bar' are styled */
#bar {
    color: red;
}

/* Here, all elements with the attribute of 'data-baz' are styled */
[data-baz] {
    color: red;
}

Elements contain properties, such as margin, that are able to be modified in CSS. These properties then have values assigned to them, such as auto

Property	Description
align-content	Selects all elements that are in their active state
align-items
animation	Applies a new instance of an animation made with the @keyframes at-rule
margin	Styles the margin of an element (see box model)

Pseudo-classes

Pseudo-class	Description
:active	Selects all elements that are in their active state
:checked	Selects all checkbox inputs that are in their checked state
:hover	Selects all elements that are in their hover state
:lang(selector)	Selects all elements that have the lang attribute set to the specified selector
:not(selector)	Selects all elements that do not have the specified child element
:link	Selects all unvisited anchor elements
:visited	Selects all visited anchor elements

At-rules

At-rules are special selectors that are used mainly to apply stylistic effects onto the page.

@import

/* Imports the example font */
@import url('https://www.exampleapi.com/importfoo');
* {
    font-family: 'foo', Sans-Serif;
}

@keyframes

In CSS3, the @keyframes at-rule was introduced. It is similar to the transition property, but unlike transition, which is for simple animations/transitions, @keyframes is used for multi-step animations that can reiterate and perform complex actions. @keyframes, and CSS3 animation as a whole, uses the animation concept of keyframes.

@keyframes take in an identifier, which is defined as a unique name for an animation. @keyframes then uses selectors to set keyframes on the animation. Usually, percentages are used, but the shorthand selectors from and to (0% and 100% respectively) are also used. In the selectors, properties can be assigned. Some properties are able to be animated, such as transform or background-color, while others like font-family cannot be animated.

Below is an example of a CSS3 animation using @keyframes:

@keyframes identifier {
    from {
        background-color: red;
        transform: rotate(0deg);
    }
    
    to {
        background-color: blue;
        transform: rotate(30deg);
    }
}

The animation can then be referenced later in the stylesheet using the many CSS3 properties:

#my-element {
    background-color: red;
    animation-name: identifier;
    animation-duration: 500ms;
    animation-timing-function: ease;
    animation-delay: 300ms;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-iteration-count: 3;
}

And can be shortened using the animation shorthand:

#my-element {
    background-color: red;
    animation: identifier 500ms ease 300ms forwards normal 3;
}

@media

#my-element {
    font-size: 20px;
    display: flex;
    flex-direction: row;
}

In the @media, a device with a minimum width of 500 pixels is styled accordingly:

@media screen and (min-width: 500px) {
    #my-element {
        font-size: 12px;
        display: flex;
        flex-direction: column;
    }
}

References

This article "CSS Syntax" is from Wikipedia. The list of its authors can be seen in its historical and/or the page Edithistory:CSS Syntax. Articles copied from Draft Namespace on Wikipedia could be seen on the Draft Namespace of Wikipedia and not main one.

---