What Is the Purpose of the '@' Symbol in Css

What is the purpose of the '@' symbol in CSS?

@ has been around since the days of @import in CSS1, although it's arguably becoming increasingly common in the recent @media (CSS2, CSS3) and @font-face (CSS3) constructs. The @ syntax itself, though, as I mentioned, is not new.

These are all known in CSS as at-rules. They're special instructions for the browser, not directly related to styling of (X)HTML/XML elements in Web documents using rules and properties, although they do play important roles in controlling how styles are applied.

Some code examples:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

• @font-face rules define custom fonts for use in your designs that aren't always available on all computers, so a browser downloads a font from the server and sets text in that custom font as if the user's computer had the font.

• @media rules, in conjunction with media queries (formerly only media types), control which styles are applied and which aren't based on what media the page is being displayed in. In my code example, only when printing a document should all text be set in black against a white (the paper) background. You can use media queries to filter out print media, mobile devices and so on, and style pages differently for those.

At-rules have no relation to selectors whatsoever. Because of their varying nature, different at-rules are defined in different ways across numerous different modules. More examples include:

• Conditional rules
• Keyframe animations
• Paged media

(this list is far from exhaustive)

You can find another non-exhaustive list at MDN.

What does this symbol mean in CSS?

Universal selector *

• *: What does "*" mean in CSS?

Combinators

• Child >: What does the ">" (greater-than sign) CSS selector mean?
• Following-sibling ~: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
• Next-sibling +: What does the "+" (plus sign) CSS selector mean?
• ~ vs +: Difference between CSS + selector and ~ selector

Pseudo-classes

• :focus, :active: What is the difference between :focus and :active?
• :root: What's the difference between CSS3's :root pseudo class and html?

Attribute selectors

• [att|=val], [att^=val]: What is the difference between pipe (|) and caret (^) attribute selectors?

Namespaces

• Namespace separator |: What does *|* this mean in CSS?
• @namespace rule: What is the use of @namespace in CSS?

Shadow DOM

• /deep/ combinator, ::shadow pseudo-element: What do /deep/ and ::shadow mean in a CSS selector?

Important declarations

• !important: What are the implications of using "!important" in CSS?

Hacks

• *: What does a star-preceded property mean in CSS?
• :): What does the smiley face ":)" mean in CSS?

What does the ' ' symbol in css mean?

There is no valid symbol as < in CSS. If you use it, you will invalidate your css.

However, you may want to use > - the child selector.

CSS4 will introduce a subject selector. At the moment it is marked with $.

so

$#parent a:hover{
   /* styles */
}

so these rules will not apply to the a in hoverstate, but it's parent with the parent-ID. CSS4 spec

Which characters are valid in CSS class names/selectors?

You can check directly at the CSS grammar.

Basically¹, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must² be a letter or underscore, and the name must be at least 2 characters long.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

In short, the previous rule translates to the following, extracted from the W3C spec.:

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, or a hyphen followed by a digit.
Identifiers can also contain escaped characters and any ISO 10646
character as a numeric code (see next item). For instance, the
identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".

Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

¹ It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

How can I put as a text in HTML?

Yes, simple use < and > like this:

Use then <like> this
<br>  5 < 6 = true
<br>  1 > 2 = false

.currencyinput {    border: 1px inset #ccc;}.currencyinput input {    border: 0;}

<span class="currencyinput">$<input type="text" name="currency"></span>