Lets learn more about CSS syntax,properties, types in a easy Q & A model.
Basics of CSS
What is the basic syntax of CSS?
Syntax:
[HTML Element] { list of CSS properties : value combination with ‘;’ separated }
example
Div { font-size: 10px; color: Red;}
What is selector and types of selectors in CSS?
‘Selector’ is to identify
the HTML element in CSS. There are three types of selectors are available.
1. HTML element selector
2. ID selector
3. Class selector
Now we can learn how each selector
works:
In this type of selector, we can apply the styles directly to the HTML element like below <p>,<div>,<h1> tags.
<style>
p {color: blue;}
div {color:red;font-size:10px;}
h1 {color:black;text-align:center;}
</style>
<body>
<p> this is Paragraph in blue color</p>
<div>
this is div in red
</div>
<h1>
this is header 1 in black
</h1>
<body>
2. ID selector
In this type of selector, we can provide the ID attribute of the HTML element with ’#’(hash)
<style>
#para1 {color: blue;}
#div1 {color:red;font-size:10px;}
#header1 {color:black;text-align:center;}
</style>
<body>
<p id=”para1”> this is Paragraph in blue color</p>
<div id=”div1”>
this is div in red
</div>
<h1 id=”header1”>
this is header 1 in black
</h1>
<body>
3.Class
selector
In this type of selector, we can
provide the class attribute of the HTML element with ‘.’(dot).
This selector is useful, in case of the same style applicable to multiple HTML elements.
In the below example, all
the tags content<p>,<div>, and <h1> display in blue color.
<style>
.class1 {color: blue;}
</style>
<body>
<p class = ”class1”> this is Paragraph in blue color</p>
<div class = ”class1”> this is div in red</div>
<h1 class = ”class1”> this is header 1 in black</h1>
<body>
How
many ways we can include CSS styles in the HTML page?
There are three ways we can include
or define the CSS within the HTML page.
1.Inline CSS
In this approach, define the CSS
style within the HTML element.
HTML code:
<html>
<body>
<div style="color:tomato;"> // CSS style defined with in the HTML element
This is Div Tag. Content in Div is in yellow color using inline CSS style.
</div>
</body>
</html>
Output:
This is Div Tag. Content in Div is in tomato Red using inline CSS style.
2.Internal CSS
In this approach, define the CSS
style within the <head> tag.
HTML Code:
<html>
<head>
<style>
div {color:tomato;font-weight:bold;}//CSS style defined with in the<head> element
</style>
</head>
<body>
<div>
This is Div Tag. Content in Div is in yellow color using inline CSS style.
</div>
</body>
</html>
Output:
This is Div Tag. Content in Div is in tomato Red using inline CSS style.
3.External CSS
In this approach, create one CSS
file with file extension(.css), define the CSS properties inside the file and
then include the file inside the HTML page.
1. Create one CSS file and place the file somewhere
Filename: Style.css
2. Open the Style.css file and add the CSS properties
you want to access within the HTML Page
div {color:tomato;font-weight:bold;}
3. Now open the HTML page, add the below <link>
tag to include the style.css file.
<head>
<link rel =”stylesheet” href = ”../Style.css”/> // properfile path in the href
</head>
Basic CSS style properties
1.Color
:
To change the color of the html element text
example:
h1{color: blue;} // h1 header in blue color
2.Background-color:
To change the background color of the html element
example:
div{background-color: red;} // div with red background
3.Font-size:
To increase the font size of html element text
example:
p{font-size: 10px;} // to increase the paragraph font size
4.background-image:
To change the background image of the html element
Example:
div{background-image: url(“imagepath”) // to set image as background
5.Text-align:
To change the position of the html element text
Example:
h1{text-align: center;} // the other options are left and right
6.Border
To draw a border around the paragraph, div tags etc.
example:
div
{
border; 2px solid blue;
}
// parameters: border width, border type, border color
7.
Border radius
To draw a round border around the paragraph, div tags, etc.
example:
div
{
border; 2px solid blue;
border-radius:5px;
}
8.Display
To control, how to display the HTML element
Example:
Span{display:inline;} // show the elements as inline
Ul{display: block;} // show the data as a block
Ui{display: none;} // used to hide the element
9. Width and Height
To increase the width and height of the Html elements (div,p, span
etc.)
example:
div
{
width: 100px; // increase the div width horizontally
height: 50px; // increase the div height vertically
}
Conclusion
This blog covered most of the CSS basics including basic syntax, types, and basic properties.
I hope this helps to a quick start on CSS learning.
No comments:
Post a Comment