Welcome to day 10 of my 100 days web development challenge. Yesterday, I started with CSS which is used for styling html documents. I learnt the what, why and how of CSS and you can check it here. Today, I learnt the following.
Topic:
Syntax of CSS:
- An embedded style sheet consists of an opening and closing <style></style> tag which is placed between the <head> section of the HTML page.
- When we use CSS for styling an HTML element, the style rule begins with the name of that element.
For example: if you are creating a rule that will apply to all instances of the <h1> tag, then start the rule with h1.
<style>
h1
</style>
- No brackets are necessary around h1 because it's already enclosed in the <style> tag.
- A CSS compromises of style rules that are interpreted by the browser and then applied to the corresponding elements in the HTML document.
3 Parts of CSS Style Rule:
A style rule is made of three parts:
- Selector:
- A selector is an HTML tag at which style will be applied.
- This could be any HTML tag like <h1>, <p>, <table> etc.
- A selector is an HTML tag at which style will be applied.
- This could be any HTML tag like <h1>, <p>, <table> etc.
- Property:
- A property is a type of attribute of HTML tag.
- Simply, all the HTML attributes are converted into CSS properties.
- They could be color, background-color, border etc.
- A property is a type of attribute of HTML tag.
- Simply, all the HTML attributes are converted into CSS properties.
- They could be color, background-color, border etc.
- Value:
- Values are assigned to properties.
- For example: "color" property can have a value "red".
A CSS rule consists of a selector and a declaration block:
- The selector points to the HTML element you want to style.
- The declaration block contains one or more declarations separated by semicolons.
- Each declaration includes a property name and a value, separated by a colon.
- A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.
- For example:
<style> h1{ color: aqua; } p{ color: blue } </style>
- If we want multiple tags to have the same rule applied to them, we can list them together and separate them by commas.
- For example: if all the heading styles <h1> to <h6> should be red, we could write the following rule:
<style> h1, h2, h3, h4, h5, h6{ color: aqua; } </style>
- Values are assigned to properties.
- For example: "color" property can have a value "red".
- The selector points to the HTML element you want to style.
- The declaration block contains one or more declarations separated by semicolons.
- Each declaration includes a property name and a value, separated by a colon.
- A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.
- For example:
<style>
h1{
color: aqua;
}
p{
color: blue
}
</style>
- If we want multiple tags to have the same rule applied to them, we can list them together and separate them by commas.
- For example: if all the heading styles <h1> to <h6> should be red, we could write the following rule:
<style>
h1, h2, h3, h4, h5, h6{
color: aqua;
}
</style>
You can check all the blogs of this challenge below.
All links:
Comments
Post a Comment
If you have any doubts, Please let me know.