WebRTC Demo: CSS

A Cascading Style Sheet (CSS) changes the appearance and layout of the elements in an HTML document. CSS files must have the .css extension. The WebRTC HTML file refers to the CSS (Cascading Style Sheet) file named webrtc.css, listed below.

A CSS file consists of a number of sections, each starting with a selector to select a particular element or group of HTML elements, followed by the properties to be applied to the selection, enclosed by curly brackets. Elements can be selected according to their type (for example, video), id (for example, #idname), or class (for example, .classname), or a combination of these.

[toggle comments]

body {

We want to change the properties of the body element, which is roughly speaking the displayed content of an HTML document. The properties within the curly brackets are applied to the element.

  font-family: Verdana, Arial, sans-serif;

Each property line specifies the name of the property to be changed, followed by a colon, followed by the value to be applied, and ending with a semicolon. Here we state that the Verdana font is to be used for text in the body element, giving good clarity on most screens. If Verdana isn't available, use a general Arial font, and if that isn't available, just use a general sans-serif font.

  font-size: 16px;

Set the font size for text to 16 pixels.

}

A closing curly bracket ends a properties block.

h1 { text-align: center; font-size: 1.8em }

Multiple properties can be on one line. The h1 (top-level heading) element is a block-level element, as opposed to an inline element. This means it takes up the entire width of its parent element, in this case the body element, and it has a newline before and after it. To center a block-level element, we use text-align: center. The font-size in this case is expressed in em units, which is proportional to the parent font size. So 1.8em equals 1.8 x 16px.

h1 span { font-size: 0.3em; color: grey }

This selects the span element contained by the h1 element. This is a descendant selector. Any span elements within the h1 element are given the specified font-size and text color.

div {

Apply the following properties to all div elements.

  text-align: center;

As div elements are block-level, we use text-align to center them.

  margin: 1em;

Every element has a border, which in this case is invisible. The margin is the gap between this border and the element's neighbours. As there is only one value given (1em), it is used for the top, bottom, left, and right margins.

  padding: 1em

The padding is the gap between the border and the element's contents.

  background-color: lightblue;
}

The background color applies to the area of the element within its borders, and so excludes the margin area, which will revert to the background color of the parent body element (white by default).

#container { display: none }

The # prefix selects an element according to its id. In the associated html file to which this css is applied, you will notice that the first div contains id="container". We apply display: none to this so that this div and its contents are hidden by default, as we only want them shown in particular circumstances. As an id can only be used once in an HTML file, this selector can only ever apply to one element.

a {

The link element type, which unlike the h1 element, but like the span element, is an inline element. Unlike a block element, an inline element occupies only enough space for its contents, with no newlines before or after.

  display: inline-block;

We want the links to have a specific size that is bigger than their contents (like a block element), but remain on one line (like an inline element). For this, we make their display property a hybrid called inline-block.

  cursor: pointer;

Make the mouse cursor change to a hand when it passes over a link.

  border-radius: 50%;

The border-radius property defines the roundedness of the corners of the border around an element. Making the radius 50% effectively makes the link circular, as each of the corners is rounded into a quarter circle.

  margin-right: 10px;

Place a gap of 10 pixels between this link's border and the link to its right.

  line-height: 8em;

Makes the link 8 x 16px or 128px high, so it will appear as a circle of diameter 128px. Note that the height property won't work here, as the link is still really an inline element.

  width: 8em;

Make each link element 128px wide, so in conjuction with the line-height, we'll end up with a circle of diameter 128px.

  color: black;

Make the link text black.

  font-weight: bold;

Use bold text for the link label.

  text-decoration: none;
}

Prevent the links from being underlined, which is the default behaviour.

a:first-of-type { background: linear-gradient(cyan, blue) }

We could have given each of the three link elements its own id, but instead we use pseudo classes, prefixed by a colon, to select each. These are modifiers that further refine the preceding selection. The first-of-type pseudo class will select the first link element in the HTML document. The background color of the element is gradated using the linear-gradient function, which here starts at cyan at the top and gradually changes to blue at the bottom.

a:nth-of-type(2) { background: linear-gradient(yellow, green) }

The nth-of-type(2) pseudo-class will select the 2nd link element, giving it a different background from the first.

a:last-of-type { background: linear-gradient(pink, red) }

This selects the last link element, again giving it a different background colour.

a:hover {color: grey}

Another pseudo-class is hover, which applies when the mouse pointer is hovering over the selected element(s), in this case links.

video {

Applies to all video elements (<video>).

  transform: scaleX(-1);

The transform property is our most complicated yet. It flips the x axis (horizontal) of the video image, so left becomes right and vice versa. This is necessary because, for reasons unknown to me, the video image from the webcam is reversed.

  -webkit-transform: scaleX(-1);

Not all browsers subscribe to a common standard for the names of some things, some requiring a -webkit- prefix.

  position: absolute;

Places the element at a specific position on the page.

  top: 0;
  left: 0;
}

Place the element at the top-left corner of the page.

#remoteVideo {

In the HTML file, we gave each video element a separate id. Here, the hash character is used to refer to an element by its id, which in this case is remoteVideo. This element shows the video received from the other person's webcam, so we want it to be as large as possible.

  height: 100vh;

Make the height of the video element equal to 100% of the viewport height. The viewport is the visible portion of the HTML document. Viewport units (vh and vw) were introduced in CSS3. The vh unit is one hundredth the height of the viewport, so 100 of these is the whole viewport height.

  width: 100vw;

Make the video width equal to the width of the viewport. The vw unit is one hundredth the viewport width.

  object-fit: contain;
}

The object-fit property is also new in CSS3. Giving it the value contain makes it adjust the size of the video so that it fits within the boundary set by the width and height properties, whilst maintaining the aspect-ratio (the width divided by the height) to avoid horizontal or vertical distortion. Previously, this was only achievable by resorting to JavaScript code.

#localVideo { width: 10vw }

This element contains the video from our own webcam, so it only needs to be large enough for us to see that we are within frame. We set its width to a tenth of the viewport width.

@media all and (max-width:640px) {

The @media query is fundamental to responsive web design, where a web page adapts its layout and style according to properties of the device it's being displayed on, such as the screen size. In these media queries, we define how the page should appear on screens of different widths. The all keyword is used to apply this query to all display devices, whilst the max-width stipulates the maximum display width for which the following properties should be applied. The styles that should be applied for this display size are enclosed in curly brackets.

  body { margin: 0 }
  a { margin-bottom: 1em }

Reduce the margins on small-screen devices, having a screen width of no more than 640px.

}

This closing bracket ends this media query section.

@media all and (min-width:641px) and (max-width:1280px) {
  body { margin: 0 10% }
  a { margin-bottom: 1em }
}

This media query is used when the display width is between 641px and 1280px. Notice that the margin property has two values: the first is applied to the top and bottom margins, and the second to the left and right margins. So this is shorthand for margin-top: 0; margin-bottom: 0; margin-left: 10%; margin-right: 10%. The 10% size is in proportion to the page width. It is possible to specify three values for the margin property, in which case the first and last values are applied to the top and bottom margins respectively, and the middle value is used for both the left and right margins. If four values are given, then they are applied clockwise in the order margin-top margin-right margin-bottom margin-left.

@media all and (min-width:1281px) {
body {margin: 0 30%}
}

Finally, on displays at least 1281px wide, the body left and right margins are even larger.