CSS : Beauty of HTML
CSS stands for cascading of stylesheet. It is mainly used for giving the style to html codes. It is the beauty of HTML . CSS is used to make website responsive, attractive , user friendly etc. HTML is used to structure a website , where CSS takes responsibility to design it.
CSS have many features like borders , table , color-models, box0model , animation , transformation , tables, label , buttons , forms , grid and many more .
Bootstrap , Pure , Tailwind CSS , Milligram these are the CSS frameworks used for CSS styling to reduce the line of codes and makes more attractive.
Where we can write CSS:
We can write CSS in visual studio code (integrated development environment). There are three ways to write CSS in visual studio code .
- Inline CSS by using style in same line .
< p style="color: yellow;"> My name is Anjali </p> // here styling is added on the same line .
- By adding external file of CSS.
<link rel="stylesheet" href="./style.css">
// this is the example how we can add stylesheet in html file.
//style.css is external file using for the .html file .
- In HTML file by internally adding Style tag .
<p class="name"> My name is Anjali </p>
<style>
.name{
color: red;
}
</style>
// here we have added the style tag in html file to add styling.
Advantages of CSS
- By CSS we can design our website in our own way .
- We can make website according to our requirements.
- It makes website responsive such that user can view the website in mobile , laptop , desktop , etc.
- By this we can make animation in website , can add image in background.
- By choosing specific selectors we can give styling to them.
- There are RGBA , HSL , HSLA color models . By them we can give color to fonts , borders, shapes , etc.
Examples:
Font styling
There is an example like if we want to change the text styling or font styling we can change by using CSS font styling .
<style>
body{
font-family: sans-serif; // sans-serif is an example of font
font-size: 15px; // here we can also add font size.
}
</style>
Background image
There is also an example for background image . if we want to add background image we can add any image by using styling .
<style>
body{
background-image: url ('../ bg.jpg'); // bg.jpg is image name.
}
</style>
How we will add CSS Internally or Externally
We can add styling to our HTML code by using selectors. In CSS3 new selectors have been introduced for efficient selection of HTML elements.
What is selector?
Selector : Selector is used to select the elements from HTML . we can also give class name and id name to elements such that selecting an element will be easy . for example <p> , .class_name , #id_name .
Here are some examples of Selector
- Element Selector
- Class Selector
- Id Selector
- Contextual Selector
- Grouping of Selector
Element Selector: It is used to select element from the HTML codes.
example:
body{
background-color : red;
}
Class Selector: It is used for providing the same styling for multiple elements.
It gives styling to all the elements whose class is same .
Note: Class name can be same for multiple elements.
Id Selector: It is used for providing the styling in particular one element.
It give the styling to the element of that particular id .
Note: Id name must be unique or should not be same .
Contextual Selector: It is done by selecting of parent and child element.
example :
div p{ // it select the p (paragraph) which is after div .
font-size:15px;
}
Grouping of Selectors: It means if we want to select different different elements for same styling .
example:
h1,h3{
text-decoration: none; // It select only h1 and h2 and apply styling to them.
}
So, this is the small description about the CSS there are many more thing to learn in CSS for example color model RGBA , HSL, HSLA, BOX-Model ,Animation , Transformation , responsiveness of website and many more. Many frameworks are also available we can use them to create attractive and responsive websites .
Tags:
PROGRAMMING