Hi there, we’re Harisystems
"Unlock your potential and soar to new heights with our exclusive online courses! Ignite your passion, acquire valuable skills, and embrace limitless possibilities. Don't miss out on our limited-time sale - invest in yourself today and embark on a journey of personal and professional growth. Enroll now and shape your future with knowledge that lasts a lifetime!".
For corporate trainings, projects, and real world experience reach us. We believe that education should be accessible to all, regardless of geographical location or background.
1
Web Development: Mastering CSS
CSS (Cascading Style Sheets) plays a pivotal role in web development, allowing you to style and enhance the appearance of HTML elements. In this article, we will explore the fundamentals of CSS and provide examples to help you grasp its concepts and unleash your creativity.
Inline CSS
Inline CSS is applied directly within an HTML element using the style attribute. It allows you to define styles specific to that element. Here's an example:
<p style="color: blue; font-size: 18px;">This is a paragraph with inline CSS.</p>Internal CSS
Internal CSS is placed within the <style> tags in the <head> section of an HTML document. It applies styles to multiple elements on the same page. See the following example:
<style>
.box {
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
.text-center {
text-align: center;
}
.text-red {
color: red;
}
.text-bold {
font-weight: bold;
}
</style>
<div class="box text-center">
<p class="text-red text-bold">This is a styled paragraph inside a box.</p>
</div>External CSS
External CSS is defined in a separate CSS file and linked to the HTML document using the <link> tag. It allows for reusability across multiple web pages. Here's an example:
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="text-red text-bold">This paragraph has styles applied from an external CSS file.</p>
</body>
</html>
<!-- styles.css -->
.text-red {
color: red;
}
.text-bold {
font-weight: bold;
}CSS Selectors
CSS selectors are used to target specific HTML elements for styling. Here are some commonly used selectors:
tagname: Selects elements based on their tag name (e.g.,p,h1,div)..classname: Selects elements with a specific class name (e.g.,.box,.text-center).#id: Selects an element with a specific ID (e.g.,#header,#logo).
Example:
p {
color: blue;
}
.box {
background-color: #f1f1f1;
}
#header {
font-size: 24px;
}CSS Box Model
The CSS box model consists of four elements: margin, border, padding, and content. Understanding these elements is crucial for controlling the layout and spacing of elements on a web page. Here's an example:
<div class="box">
<p>This is a box with content.</p>
</div>Conclusion
CSS empowers you to transform simple HTML elements into visually stunning web pages. By mastering CSS, you can create engaging designs, layout structures, and enhance user experiences. Practice using different CSS selectors, experimenting with styles, and exploring advanced CSS features to unlock the full potential of web development.
4.5L
Learners
20+
Instructors
50+
Courses
6.0L
Course enrollments
Future Trending Courses
When selecting, a course, Here are a few areas that are expected to be in demand in the future:.
The Python Course: Absolute Beginners for strong Fundamentals
By: Sekhar Metla
Data Analysis: Microsoft Excel Zero to Hero - Complete Excel Course
By: Sekhar MetlaFuture Learning for all
If you’re passionate and ready to dive in, we’d love to join 1:1 classes for you. We’re committed to support our learners and professionals their development and well-being.
View Courses
Most Popular Course topics
These are the most popular course topics among Software Courses for learners