W3C Designer

css syntax in html

7/04/2021
Hacker

CSS Syntax

CSS syntax consists of a set of rules. There are 3 parts to these rules: a selector, a property, and a value.

The basic goal of a cascading stylesheet (CSS) language is to allow a browser engine to paint elements of a page with specific attributes such as color, positioning, or decoration. CSS syntax indicating this goal

css syntax in html

CSS syntax consists of 2 parts:

  1. Selector
  2. Declaration Block

Selector

The selector indicates the HTML element you want to style. It can be any tag like <h1>, <title> etc.

The selector is an HTML element that you want to style. It can be any tag like <h1>, <p>, etc. Each selector can have one or more properties.

Declaration Block

Declaration Block determine how elements on a webpage are formatted.

  • A declaration block consists of one or more declarations separated by semicolons.
  • Every CSS declaration block contains a CSS property name and the property value which is separated through a colon.
  • In the various CSS declarations every declaration are separated through a semicolons, and declaration blocks are surrounded through curly brackets.

For the above example, there are two declarations.

color: yellow;

Each declaration contains a 2 parts, separated by a colon.

  1. Property : A property is a type attribute of an HTML element. It can be color, border etc.
    Simply put, all HTML attributes are converted into CSS properties. They can be color, border etc.
    The property is the style attribute of an HTML tag. All HTML attributes are converted to CSS properties (like color, width, height, border, etc.). Each property has its value.
  2. Value : Values are assigned to CSS properties. The value which describe how the feature must be handled by the engine. Each property has a collection of valid values, which are defined by a formal grammar, as well as a semantic meaning implemented through the web browser engine.

A property and value pair is called a declaration, and any CSS engine calculates which declarations are applied to each element of the page in order to prepare and style it appropriately.

By default in CSS both properties and values are case-insensitive. Pairs are separated by a colon, ':' and white spaces before, between and after properties and values are ignored, but not necessarily inside.

CSS Syntax Examples

Simple CSS Syntax is as follows :

  • selector { property: value }

As you can see in the above syntax how the css syntax happens. In the css first write the selector on which the style is applied such that any tag name (h1, p, div, table etc.)

After selector the declaration is written which is inside the curly bracket. The declaration contains the property and the value of the property. Property and value decide what to change in the selector.

You can understand it with the css line given below

  • h1 { color: #30c1ff }

In the example above, h1 is a selector that is selected to style all h1 tag.

After the selector is the declaration block which starts and ends with the brackets. Inside this the property and its value are defined for the selector.

Here color is the property and green is its value Who specifies that its color will be green.

You can understand it in this way that the color of all h1 tags has been turned green.

Let's see an example of this with the output.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Title of the document</title>
  5. <style>
  6. h1 { color: #30c1ff; }
  7. </style>
  8. </head>
  9. <body>
  10. <h1>The color of this tag is #30c1ff.</h1>
  11. </body>
  12. </html>

Output

It will give output like this

The color of this tag is #30c1ff.

In the above example the <h1> tag is a selector, color is the property, and #30c1ff is the value of the property that written in hexadecimal notation.

As you can see the property and its value are written inside curly brackets and separated by colons.

The selector can also have more than one attribute, separated by a semicolon.

set multiple style Declaration for selector

We can do many declarations for the selector. All selectors are separated by a semicolon.

So let's see its syntax

Syntax

Its syntax is as follows :

  1. selector { property: value; property: value; property: value; ....propertyn: value; }

This can be understood by the following CSS line

  1. h1 { color: white; background-color: green; }

in the above CSS line we have selected h1 and made 2 CSS declarations for h1.

Here the "color: white" is the first declaration that indicates that the h1 text color is white. and "background-color:green" is the second declaration that determines that the background color of h1 is green

Example

Example for multiple declaration is given below :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Title of the document</title>
  5. <style>
  6. h1 { color: #fff; background-color: #4dc23e; }
  7. </style>
  8. </head>
  9. <body>
  10. <h1>The color of this tag is #fff and background color is #4dc23e.</h1>
  11. </body>
  12. </html>

Output

It will give output like this

The color of this tag is #30c1ff and background color is #4dc23e.

You can see in the output that the background color of h1 is #4dk23e but its text color is #30c1ff

Note : color is written in hexadecimal you can learn more about color in our css colors chapter.

CSS statements

CSS stylesheets are made up of CSS statements that describe presentations for HTML or XML web documents.

Rulesets are the main building blocks of style sheets, which often contain only one large list of them.

But there is other information a web author may want to provide in a style sheet, such as character sets, other external style sheets to import, font face or list counter details, and more.

To do this it will use else and specific types of statements.

A statement is a building block that begins with any non-space character and is preceded by a closing brace or semi-colon (outside a string, non-escaped and not included in another {}, () or [] pair). ends.

Types of CSS Statements

There are two types of statements :

  1. Rulesets
  2. At-rules

CSS Rulesets

Rules associate a collection of CSS declarations with a condition described by a selector.

A CSS rule set is also called a "rule" that consists of a selector followed by a declaration block (properties and values wrapped by curly braces).

A rule or "rule set" is a statement that tells the browser how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.

A selector group and associated declaration block, simultaneously called a rule.

CSS Rulset Structure

CSS at-rules

At-rules are CSS statements that instruct CSS how to behave.

At-rules, immediately followed by an identifier, and include everything up to the next semicolon (;) or the next declaration block, whichever comes first.

No comments:

Post a Comment