This CSS tutorial, whether you’re a student or a professional is a valuable resource to enhance the visual appeal of your websites or personal blogs. Here, you will learn CSS all the basic to advanced concepts, such as properties, selectors, functions, media queries and more.
CSS is used to enhance the visual presentation of web pages. Without the use of CSS, a web page will appear visually unappealing.
CSS Tutorial
What is CSS?
CSS (Cascading Style Sheets) is used to styles web pages. Cascading Style Sheets are fondly referred to as CSS. The reason for using this is to simplify the process of making web pages presentable. It allows you to apply styles on web pages. More importantly, it enables you to do this independently of the HTML that makes up each web page.
CSS
Why learn CSS?
Styling is an essential property for any website. It increases the standards and overall look of the website that makes it easier for the user to interact with it. A website can be made without CSS, as styling is MUST since no user would want to interact with a dull and shabby website. So for knowing Web Development, learning CSS is mandatory.
CSS Code Format: It is the basic structure of the CSS style of a webpage.
body {
background-color: lightgray;
}
h1 {
color: green;
text-align: center;
}
p {
font-family: sans-serif;
font-size: 16px;
}
Types of CSS: There are three types of CSS which are given below.
- Inline: Inline CSS contains the CSS property in the body section attached with the element known as inline CSS.
- Internal or Embedded: The CSS ruleset should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
- External: External CSS contains a separate CSS file that contains only style property with the help of tag attributes.
Example: Let’s see a small example of HTML webpage with CSS styles. Here, we use styles to set the alignment and text color of a webpage.
<!DOCTYPE html>
<html>
<head>
<title>
Simple webpage
</title>
<!-- Stylesheet of web page -->
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
Output:
CSS Tutorial Code Output
CSS Key Features
- CSS specifies how HTML elements should be displayed on screens.
- The Major key feature of CSS includes styling rules which are interpreted by the client browser and applied to various elements.
- Using CSS, you can control the color text, the style of fonts, spacing between elements, how columns are sized, variation in display for different devices and screen size as well as a variety of other effects.
CSS Complete References
CSS Practice Quiz Sets
Learn more about CSS
CSS Projects:
This CSS examples section contains a wide collection of CSS programming questions. The CSS examples are categorized based on the topics including properties, selectors, functions, and many more.
FAQs
Q. Is learning CSS worth it when there are lots of CSS Frameworks?
A. Yes, learning CSS is still worth to investment time, it gives you a free hand to design your website as you want. Frameworks is a collection of pre-written CSS code you can utilize as a starting point for your own projects.
Q. What does CSS mean?
A. CSS was established to address the issue of tags for formatting a web page, which were not intended in HTML. CSS eliminated the style formatting of HTML pages, making it easier and more cost-effective to create large websites.
Q. How CSS is different from HTML?
A. HTML is used to define a web page structure, while CSS is used to style it. CSS can be internal or external depending on the requirement, and has higher backup and support than HTML.