The heaven for Technology Learner CSS
WHAT IS CSS
- CSS is a styling language used to describe the presentation of a document written in HTML or XML.
- It provides a way to define how elements should be displayed on a web page, including their layout, colors, fonts, and other visual properties.
- CSS works by applying rules to HTML elements using selectors, allowing you to target specific elements or groups of elements.
- It follows a cascading nature, where multiple CSS rules can be applied to an element, and conflicts are resolved based on specificity and the order of declaration.
- CSS separates the style from the structure of a web page, enabling consistent and efficient styling across multiple pages or an entire website.
Using CSS
CSS can be added to HTML documents in 3 ways:
1. Inline CSS
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
2. Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a h1 heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
make "styles.css" file
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
COMMENTS IN CSS
/* This is a comment on a single line. */
/*
This is a comment
that spans multiple lines.
*/
HISTORY OF CSS
- Origins: CSS (Cascading Style Sheets) was proposed by Håkon Wium Lie in 1994 as a solution to separate web page content from its presentation. Lie worked together with Bert Bos, and their collaboration led to the development of the initial CSS specification.
- Standardization: CSS became an official web standard with the release of CSS Level 1 by the World Wide Web Consortium (W3C) in 1996. This marked a significant milestone in the adoption and implementation of CSS across web browsers.
- Evolution: CSS evolved through different versions. CSS Level 2 was introduced in 1998, bringing more features and improved browser support. CSS Level 2.1, released in 2004, aimed to achieve greater consistency among browsers and added further enhancements.
- CSS3 and Modules: CSS3, introduced in 1999, encompasses a series of modules that expand CSS capabilities. It introduced new features such as media queries, selectors, animations, transitions, and flexible box layout (Flexbox) to create more dynamic and responsive web designs.
- Current State: CSS is now a fundamental technology for web design and development. Modern CSS, with the ongoing development of CSS modules, offers an extensive range of styling options and layout control. It enables developers to create visually appealing, accessible, and responsive web experiences.
Syntax of CSS
p {
color: red;
font-size: 16px;
}
CSS Margin
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
CSS Padding
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
