CSS Embedded Styles


Embedded Style:
Styles that are placed within the style tag are called embedded styles.
We use style tag to place embedded styles.

Declaration block: is used to group declarations separated by semicolon in one block, so that more than one styles can applied on a selected element or more than one selected elements.
color:white; // declaration of style rule 1
background-color:black; // declaration of style rule 2
font-size:24pt; // declaration of style rule 3

Selector: is a string used to select an element or more than one elements to which we want to apply group of style rules.


Types of selectors:
tag selector, class selector, id selector, and contextual selector.
Note: Embedded styles are placed within style tag and style tag should be placed within head tag.

Limitations of Embedded Style:
If we have many web pages with common styles, then we have to copy paste all embedded declaration blocks to every other web page.
That increases the web site size.
Increase in code size.
Code Redundancy.
No maintainability.
Time consuming.
To overcome this limitation we use external style.

Interview Questions:

1. Styles that are placed within HTML style tag are called as ________
a. external style
b. inline styles
c. embedded styles
d. html styles
Answer: c