1CSS Basics & Selectors
Introduction to CSS
CSS, or Cascading Style Sheets, is the language that controls how your web pages look. While HTML defines the structure and content of a page, CSS is what makes it visually appealing: colors, layouts, fonts, spacing, and more.
CSS has evolved over the years. CSS1 introduced basic styling, CSS2 added positioning and media types, and CSS3 brought animations, transitions, flexbox, and much more. Modern CSS lets you create responsive, interactive, and visually stunning websites.
How CSS Works
CSS works by targeting HTML elements using selectors and applying rules that define the property and value. Understanding specificity, inheritance, and the cascade is key to controlling which styles apply.
Adding CSS to HTML
You can add CSS to HTML in three ways: inline, internal, or external.
<!-- Inline -->
<p style="color: blue;">This text is blue.</p>
<!-- Internal -->
<style>
p { color: green; }
</style>
<!-- External -->
<link rel="stylesheet" href="styles.css">CSS Selectors with Code Examples
Selectors let you target HTML elements to apply styles. Here are the main types explained with code:
/* Element selector: targets all <p> tags */
p {
color: blue;
}
/* Class selector: targets elements with class 'highlight' */
.highlight {
background-color: yellow;
}
/* ID selector: targets element with ID 'header' */
#header {
font-size: 24px;
font-weight: bold;
}
/* Universal selector: targets all elements */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Attribute selector: targets <input> elements of type 'text' */
input[type='text'] {
border: 1px solid black;
padding: 5px;
}
/* Descendant selector: targets <p> inside a <div> */
div p {
font-style: italic;
}
/* Child selector: targets only direct <li> children of <ul> */
ul > li {
list-style-type: square;
}
/* Adjacent sibling selector: targets <p> immediately after <h1> */
h1 + p {
color: gray;
}
/* General sibling selector: targets all <p> following <h1> */
h1 ~ p {
font-family: Arial, sans-serif;
}Mini Project Step
Create a simple HTML page with a header, two paragraphs, and a list. Use CSS to style the header with an ID, one paragraph with a class, and another with an element selector. Add background colors, fonts, and padding to your list items. Try using a descendant, child, adjacent, and general sibling selector in your styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Basics Project</title>
<style>
#main-header {
color: teal;
text-align: center;
}
.highlight {
color: white;
background-color: orange;
padding: 5px;
}
p {
font-family: Arial, sans-serif;
line-height: 1.5;
}
ul li {
background-color: lightgray;
margin: 5px 0;
padding: 5px;
}
h1 + p {
font-style: italic;
}
h1 ~ p {
color: gray;
}
</style>
</head>
<body>
<h1 id="main-header">Welcome to CSS Basics!</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p>Another paragraph styled with element selector.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</body>
</html>