CSS syntax

CSS syntax

a CSS A style rule is interpreted by the browser and applied to the corresponding element in the document. A style rule consists of three parts:

• Selector – The selector is the HTML tag to which the style is applied. This can be any tag, such as <h1> or <table>.

• Attributes – Attributes are a type of attribute in the HTML tag. Basically, all HTML attributes are converted to CSS properties. These can be things like color, border, and so on.

  
  

• Value – Values ​​are assigned to properties. For example, a color property can be red or #F1F1F1, etc.

You can set the syntax of CSS style rules as follows:

selector { property: value } 

Example − You can define a table border as follows −

table{ border :1px solid #C00; } 

Here, table is the selector, border is the property, and the given value is 1px solid #C00.

You can define selectors in a variety of simple ways, depending on your preferences. Let’s walk through each of these selectors one by one.

Type Selector

This is the same selector we saw above. Here’s another example: setting the color for all first-level headings.

h1 { 
color: #36CFFF; 
} 

Universal Selectors

Instead of selecting a specific type of element, a universal selector simply matches the name of any element type –

* { 
color: #000000; 
} 

This rule renders the contents of every element in our document black.

Descendant Selectors

Suppose you want a style rule to apply only when a specific element is inside another specific element. In the following example, the style rule will only apply to the <em> element when it is inside a <ul> tag.

ul em {
color: #000000; 
}

Selector Classes

You can define style rules based on an element’s class attribute. All elements with that class will be formatted according to the defined rules.

.black {
color: #000000; 
}

This rule will render the content of every element in the document with the class attribute set to black as black. You can make it more specific. For example:

h1.black {
color: #000000; 
}

This rule renders the contents of <h1> elements with the class attribute set to “black” black.

You can apply multiple class selectors to a given element. Consider the following example –

<p class = "center bold">
This para will be styled by the classes center and bold.
</p>

ID Selectors

You can define style rules based on an element’s id attribute. All elements with that id will be formatted according to the defined rule.

#black {
color: #000000; 
}

This rule renders the contents of all elements with an id attribute set to black in the document as black. You can make it more specific. For example −

h1#black {
color: #000000; 
}

This rule renders the contents of the <h1> element with an id attribute set to black as black.

The real power of id selectors comes when they’re used as descendant selectors, for example:

#black h2 {
color: #000000; 
} 

In this example, all second-level headings will appear black when they’re inside a tag with an id attribute set to black.

Child Selectors

You’ve already seen descendant selectors. There’s another type of selector that’s similar to a descendant selector but functions differently. Consider the following example –

body > p {
color: #000000; 
} 

This rule will make all paragraphs black if they’re direct children of the element. Paragraphs placed within other elements (such as

or

) will not be affected by this rule.

Attribute Selectors

You can also apply styles to HTML elements with specific attributes. The following style rule will match all input elements with an attribute type of “text”.

input[type = "text"] {
color: #000000; 
}

The advantage of this approach is that the <input type="submit" /> element is not affected, and the color is applied only to the desired text field.

The following rule applies to attribute selectors.

• p[lang] – selects all paragraph elements with a lang attribute.

• p[lang=”fr”] – Selects all paragraph elements whose lang attribute has a value of “fr”.

• p[lang~=”fr”] – Selects all paragraph elements whose lang attribute contains the word “fr”.

• p[lang|=”en”] – Selects all paragraph elements whose lang attribute contains a value of “en” or begins with “en-”.

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values ​​into a single block, as shown in the following example –

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Here, all property and value pairs are separated by semicolons (;). You can place them on one or more lines. For better readability, we’ve placed them on separate lines. Don’t worry about the properties mentioned in the above code block for now. They’ll be explained in the following sections, and you can find complete details about the properties in the CSS reference.

Grouping Selectors

You can apply styles to multiple selectors at the same time. Simply separate the selectors with commas, as shown in the following example:

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

This style rule will apply to the h1, h2, and h3 elements. The order of the list doesn’t matter; all elements in the selector will have the corresponding declaration applied. You can combine various id selectors together, like this:

#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}