English
Amharic
Arabic
Armenian
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Czech
Danish
Dutch
Esperanto
Estonian
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hausa
Hawaiian
Hebrew
Hindi
Hmong
Hungarian
Icelandic
Igbo
Indonesian
Irish
Italian
Japanese
Javanese
Malagasy
Malay
Malayalam
Maltese
Maori
Marathi
Mongolian
Myanmar (Burmese)
Nepali
Pashto
Persian
Polish
Portuguese
Punjabi
Romanian
Russian
Slovenian
Somali
Spanish
Sudanese
Swedish
Tajik
Tamil
Telugu
Thai
Turkish
Ukrainian
Urdu
Introduction Of CSS | Full Information And Details
Introduction of CSS
CSS is a powerful language. CSS is also called Cascading Style Sheet. CSS is used to design web pages. We cannot customize a web page properly through HTML.
That is why we use CSS. We can customize the website according to our needs through CSS and make our website attractive.
Whenever we write CSS, we write it on some tag or the other. And CSS can be written in 3 ways.
Inline CSS
Internal CSS
External CSS
CSS was created by Hakon Wium Lie in 1994 and then published by the W3C – World Wide Web Consortium – in 1996.
Inline CSS
Inline CSS is used within HTML tags. However, we need to use the style attribute to do so.
Internal CSS
To write internal CSS, we need to create a style tag. Because internal CSS cannot be written without a style tag.
External CSS
To write external CSS, we have to create a file. And whenever we create an external CSS file, we have to give the extension of the CSS file as .css.
Note: If you use any CSS property outside of inline CSS and change that property to internal CSS or external CSS, then the external CSS or internal CSS property will not work.
Since you have changed that property to inline CSS.
Property and Value
For a graphical interface, complete web pages can be designed very well. Property and value are used to write CSS. Now look at the code below.
background : red;
Here, background is a property, and red is a value. In CSS, a colon ( : ) is used after the property. And statements are broken by a semicolon ( ; ) after each value.
Advantages of CSS – Cascading Style Sheet
If we talk about CSS advantages, there are many. Some of the advantages of CSS are given below.
CSS is a language that saves us time and allows us to customize multiple web pages according to our needs in minimal time.
We can create a CSS library and apply it to any web page whenever we want, and customize it as needed.
Customizing web pages using CSS is very easy, as CSS is an easy language that anyone can learn.
CSS is a language that provides more options than HTML to make our web pages attractive.
1- Introduction of Selectors
2- Types of CSS selectors
Introduction to Selectors
Selectors play a very important role in CSS. Without selectors, we can’t write internal CSS or external CSS.
Whenever we write internal or external CSS, we write or apply CSS over some tag. So, how will the browser know which tag to apply CSS to?
Whenever we write internal CSS or external CSS, we use a selector to tell the browser which CSS to apply to which tag. We write internal CSS or external CSS in two ways. However, the CSS written in both will be the same, but their functions will be different. < style> tag
Whenever we write CSS, we first create a < style> tag. Because we cannot write internal CSS without a style tag. An example is given below.
<style type=”text/css”>
h1 { background: red; }
</style>
In the above code, h1 is a selector. It is an HTML tag. And whenever we write CSS, first we write the name of the tag on which we want to write CSS.
After that we have to use two { }. We can call these opening and closing brackets. CSS is written inside these two brackets.
Types of Selectors
There are several types of selectors in CSS that can be used to write even better CSS. Full details about these selectors are provided.
Element Type Selectors
Element Type Selectors apply CSS to a specific HTML tag. The name of this type of selector is the name of the HTML tag to which you want to apply CSS. An example is given below. Look carefully.
<!DOCTYPE html>
<html>
<head>
<title>Easy Hindi Tutorials</title>
<style type="text/css">
h1 { background: red; }
</style>
</head>
<body>
<h1>Easy Hindi Tutorials</h1>
</body>
</html>Important Notice: There is a problem with Element Type Selectors. If you have more than one heading tag inside your body tag and you apply CSS to the heading tag, then CSS will be applied to all the headings. That is, you are applying CSS to the heading tag and you have more than one heading tag inside your body tag.
Class Selectors: A tag in HTML defines a class attribute. And through this class attribute, CSS can be applied to any tag in HTML.
But when we define a class for a tag, to write CSS, we first have to type a (. dot). After that, we have to type the name of the attribute which we have defined in the class attribute. An example is given below.
<!DOCTYPE html>
<html>
<head>
<title>Easy Hindi Tutorials</title>
<style type="text/css">
.h1 { background: red; }
</style>
</head>
<body>
<h1 class="h1">Easy Hindi Tutorials</h1>
</body>
</html>ID Selectors use the id attribute in the same way as the class attribute. The only difference is that they use # for id and (. dot) for class. Now look at the code below.
<!DOCTYPE html>
<html>
<head>
<title>Easy Hindi Tutorials</title>
<style type="text/css">
.h1 { background: red; }
</style>
</head>
<body>
<h1 id="h1">Easy Hindi Tutorials</h1>
</body>
</html>Important Note: Whether it’s an ID or a class, name them accordingly. You can name them anything. It’s up to you what you name the tags.
Universal Selector
The Universal selector is always represented by a ( * ). The CSS applied by this selector applies to all HTML tags.
However, it only works if CSS has already been applied to a tag, whether it’s inline CSS, internal CSS, or external CSS. This selector has no effect.
<!DOCTYPE html>
<html>
<head>
<title>Hartron Exam</title>
<style type="text/css">
* { color: red; }
</style>
</head>
<body>
<h1>Hartron Exam</h1>
<h2>Hartron Exam</h2>
</body>
</html>Attribute Selectors
If you want, you can also apply CSS using the HTML tags attribute. These selectors are used for the form tag.
<style>
img[alt=”img1”]{
width:600px;
height:300px;
}
</style>Group Selectors
If you want, you can apply CSS to multiple tags at once. This is also called a group selector.
An example is given below.
<style >
table,th,td {
color : red;
}
</style >
- Introduction to Combinators
- Html and css
- Type of CSS combinators
- Introduction to CSS combinators
Introduction to Combinators
So far, we’ve learned about selectors in CSS and have used them. However, so far, you’ve only used selectors.
Selectors allow you to easily write CSS for any tag. However, sometimes our tags are within other tags. For example, you might define a tag within a <div> tag, but it can’t be targeted by a single selector. For this, we need to use a combinator.
Combinators in CSS are used to create a relationship between two selectors. A combinator between selectors is written as a special symbol.
If you want to apply a style to HTML elements, you can target both selectors by ID or class so that not all tags on the web page are targeted.
There are four types of combinators in CSS. These are also called multiple selectors. A combinator combines more than one selector.
1- ( + ) Adjacent Sibling Selector
2- ( ~ ) General Sibling Selector
3- ( Space ) Descendent Selector
4- ( > ) Child Selector
You can see the combinators in the blocks above.
General Sibling Selector
The general sibling selector is always represented by a tilde (~) symbol. The general sibling selector selects all HTML tags that are siblings of a tag. The syntax for this selector is given below.
<html>
<head>
<style type="text/css">
p ~ span
{
background-color : red;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph tag</p>
<span>This span is tag and adjacent sibling</span>
</div>
</body>
</html>Adjacent Sibling Selector
In CSS, the Adjacent Sibling Selector is used to select adjacent siblings of HTML tags. The + (+) symbol is used between adjacent sibling elements.
Any two elements are called adjacent when they come before or after each other. That is, when two elements are recessed, they are called adjacent sibling selectors. For example, <div>, <p>, <h1>, etc. tags used within a <body> tag are sibling elements. An example is given below.
<html>
<head>
<style>
p+span
{
background : red;
}
</style>
</head>
<body>
<div id=”Div1”>
<p>This is a paragraph tag</p>
<span>This span is tags</span>
</div>
</body>
</html>Descendent Selector
This combinator is most commonly used. The descendent selector is used to target tags that are children of parent tags, regardless of how far apart those child tags are.
For example, if an ordered list is created within a <div> tag, to target the ul or li tags, use CSS to select the ul or li tags by placing a space after the div selector. This targets all the li tags within the ul tags.
<html>
<head>
<style>
#Div1 li
{
background : red;
}
</style>
</head>
<body>
<div id=”Div1”>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
</body>
</html>Child Selector
The child selector is used to select tags that are children of parent tags. Child here refers to tags created within those parent tags.
<p>This is a paragraph tag</p>
In the above code, <div> is a parent tag and the <p> tag is a child tag. If you want, you can apply CSS directly to the <p> tag. But here you can also apply CSS using the child selector. Now, look at the code below.
<html>
<head>
<style>
Div > p
{
background : green;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph tag</p>
</div>
</body>
</html>
