Introduction To CSS
CSS (Cascading Style Sheets) is used to style and layout web pages – for example, to change the font, color, size, and spacing of your content, break it into multiple columns, or animations And add other decorative features.
What is CSS?
CSS stands for Cascading Style Sheet. It is a style sheet language that is used for shaping the HTML sheet, which will be displayed on the web-page of browsers. CSS is a simple mechanism for describing the presentation semantics common to each page of a website. It can control the layout of the web page all over at once. Its latest version is CSS 3.
CSS Syntax
CSS is a rules-based language – you define rules that specify groups of styles that should be applied to particular elements or groups of elements on your web page. For example, “I want to show as the main title big red text on my page.”
Selector:- The selector indicates the HTML element or HTML tag you want to style. It is used more to select or select HTML elements based on their element name, id, class, attribute.
Property:- When we write something in the property, it indicates that it is a particular property, you have to apply to the selector, which is written as a selector.
Property-Value:- In property-value, we write what we want to assign.
EX:-
p {color: red; font-size: 22px;}
p {
color: red;
font-size: 22px;
}Code language: CSS (css)There are three type of CSS? And how to work.
- Inline style
- Internal style sheet / Embedded style sheet
- External style sheet
Inline styles
Inline-styles are CSS declarations that affect a single HTML element, which is contained within a style attribute. An implementation of inline style in an HTML document can be as follows:
The inline CSS style that will look like below code:
<h1 style="color: green;">DevOpsSchool</h1>
Code language: HTML, XML (xml)Internal stylesheet
An internal stylesheet resides in an HTML document. To create an internal stylesheet, you place the CSS inside a <style> element inside the HTML <head>.
The internal CSS style that will look like below code:
<!DOCTYPE html>
<html>
<head>
<title> internal CSS </title>
<style>
h1 {
color: green;
}
</style>
<head>
<body>
<h1">DevOpsSchool</h1>
</body>
</html>Code language: HTML, XML (xml)External stylesheet
An external stylesheet contains CSS in a separate file with the .css extension. CSS is the most common and useful way to get a document. You can do the same CSS file can add several web pages, all styled with a CSS stylesheet. To begin with CSS, we added an external stylesheet to our web page.
The external CSS style that will look like below code:
<style>
h1 {
color: green;
}
</style>Code language: HTML, XML (xml)Advantages of CSS:
- Maintenance: It is easy to maintain, changing in one place will affect your web site globally. There is no need to change every specific location.
- Time-saving: You can use any CSS script to easily reach many places.
- Support: CSS makes the site faster and enhances the search engine capabilities to crawl web pages.
- Native front-end: CSS has a huge list of features and functions that are helpful in designing HTML pages
- Selectors: In CSS, there are many selectors (ID selectors, class selectors, etc.) that will be helpful in performing specific tasks.
I’m a DevOps/SRE/DevSecOps/Cloud Expert passionate about sharing knowledge and experiences. I have worked at Cotocus. I share tech blog at DevOps School, travel stories at Holiday Landmark, stock market tips at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at TrueReviewNow , and SEO strategies at Wizbrand.
Do you want to learn Quantum Computing?
Please find my social handles as below;
Rajesh Kumar Personal Website
Rajesh Kumar at YOUTUBE
Rajesh Kumar at INSTAGRAM
Rajesh Kumar at X
Rajesh Kumar at FACEBOOK
Rajesh Kumar at LINKEDIN
Rajesh Kumar at WIZBRAND
Find Trusted Cardiac Hospitals
Compare heart hospitals by city and services — all in one place.
Explore Hospitals
