The @ rules in CSS

We have come a long way into learning CSS now, and it's time we learn some miscellaneous constructs that are associated with Cascading Style Sheets.

Comments

Comments, as we all know help better document your code so that it is easier to maintain and update the style. CSS comments are similar to C programming comments(/* This is a comment */).

Comments help people understand your code better, so it is recommended that you comment your code. The HTML comment syntax (<!—comment -->) does not apply to CSS and are ignored but you can use them to better organize your style blocks.

<style type=”text/css”>
<!--
p { 
font-size: xx-larger; 
font-family: Serif; 
color: red; 
border: 5px; 
} -->
</style>

@charset

This construct is used to define the character set encoding of the style rules and values. If you have any non-ASCII text in your CSS file, for example non-ASCII characters in font names, in values of the content property, in selectors, etc., you need to be sure that CSS knows how to transform the bytes into characters correctly, so that it understands your CSS code.

Example:

@charset “UTF-8”

The construct is case in-sensitive. UTF-8 is the most popular charset that is used. UTF-8 is a character encoding capable of encoding all possible characters, or code points, in Unicode. The encoding is variable-length and uses 8-bit code units.

UTF-8 is the dominant character encoding for the World Wide Web, accounting for 84.6% of all Web pages in August 2015.

Note: @charset should not be used in an embedded style sheet, use the tag instead or an HTTP header.

@font-face

This rule is used to associate a font name to be used in a style sheet with some downloadable font. A font-family property is used to name the font along with a source (src) associated with the external font name.

Syntax:

@font-face { font-family: font-name;
src: url (fontfile); }

Note: You can also add a font-weight property to the @font-face.

However, you should always provide an alternate font, just in case if the downloaded font is not supported by the client or the font fails to load for some reason. Modern browsers use TrueType files for downloadable fonts.

@page

This is used to define a page block for printing. The size, page and margin properties are used to control the dimensions of the page.

Example:

@page{ size: 8.5in 11in; margin: .5in; }

We can also use name a page setting with an identifier.

@page{ size: landscape; }

Note: Not all browsers support this construct.

!important

This construct specifies that a style takes precedence over anyy different, conflicting styles.

Example:

body { font-family: Times; }
div { font-size: 20px; font-family: Arial ! important; }

All divs will use the Arial font-family due to !important.