CSS is the acronym of cascading style sheets. By using CSS syntax you can easily make your personal website or blog. The CSS codes allow you to create the beautiful looking website. You can give shape to the HTML codes by using CSS syntax.
Here are the codes which you can use with the HTML tags.
Selector: The HTML tag allows you to apply the style. Use this tag to give style to the <h1> tags or <table> HTML codes.
Property: The property tag is the attribute of HTML tag. It uses to declare the HTML element to give CSS style.
Value: The value syntax is used to give information about the style that you are looking for a particular element. e.g if you want to apply color red for background then assign the value red or #F1F1F1 etc
Universal Selector: This selector selects all the element available in the HTML code. The value of the universal selector will be applied to all the elements.
Example:
* {
color: #000000;
}
The above universal selector will make all the elements look black because we have applied the value color: #000000.
Descendant Selector : This selector is used when you want to apply the style to a specific element which lies under the other element.
Example:
ul em {
color: #000000;
}
In above case, the “ul” is parent element and it has sub-element called “em”. Your HTML document might have many em used multiple time. If you apply any value to the em element in the CSS then it will be applied to all “em” element. so to avoid that you can give parent element and then use “em” as the secondary element to give the value only to the particular HTML tag.
Class: The class element is the most used element in the CSS document. It uses to give style to the particular document. You can create an individual class for each element and define value to it.
Example 1:
.black {
color: #000000;
}
You can also apply it to a particular element.
Example 2:
h1.black {
color: #000000;
}
In the above case, the class “black” is applied to the h1 element.
You can also multiple class selector in one element.
Example 3:
<p class=”center bold”>
This para will be styled by the classes center and bold.
</p>
In the above example, the class selector “center” and “bold” is used to give style to the <p> HTML element.
The class element starts with a dot in the beginning. If you forget the dot then it will not apply the value to the element so make sure when you are using class element in the CSS property you start your class name with a dot.
ID Selectors: It is similar to the class selector. It is used to give style to the particular element based on the defined ID Selector.
#black {
color: #000000;
}
In the above example, the HTML document applied with this id selector will get the given style color to the element.
You can also make it more particular.
Example 1:
h1#black {
color: #000000;
}
In above code, the black id attribute will be applied to only h1 HTML tag.
Example 2:
#black h2 {
color: #000000;
}
In above case, all h2 tags will get the value of “black” id selector.
Child Selector: You can use this selector if you are willing to apply one value to all the element that fits into the given attribute.
Example:
body > p {
color: #000000;
}
The above value will be applied to the element if it is a direct child of the <body> element. It will affect the other HTML element <div> or <td> etc.
Input element: Your website might have input HTML tags for the form. To give the style to the text mentioned in the input element you will require input CSS tags.
Example:
input[type = “text”]{
color: #000000;
}
In this case, the input type “text” gets the value from the CSS tags. This is useful when you want to apply a different style to the submit button available in the contact us form. The input attribute will be applied to the text and all another element will be unaffected.
Here are some of the input elements.
p[lang] – Select all the paragraph using lang attribute.
p[lang=”fr”] – Select all the paragraph whose lang attribute has the value exactly “fr”.
p[lang~=”fr”] – Select all the paragraph whose lang attribute contain the word “fr”.
p[lang|=”en”] – Select all the paragraph whose lang attribute is exactly the “en” or it is beginning with the word “en”.
Grouping Selector: You can apply the style to multiple selectors. Just separate them with commas (,).
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Similarly, you can apply the one style to multiple id selectors.
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}