Welcome to the third week of our program! This week, we will delve into the world of Cascading Style Sheets (CSS). CSS is a cornerstone technology in web development, responsible for the visual presentation of web pages. While HTML provides the structure and content of a webpage, CSS brings it to life by controlling its layout, colors, fonts, and overall appearance. This separation of content (HTML) and presentation (CSS) allows for more flexible and maintainable code. With CSS, you can create visually appealing websites that enhance user experience and make your content more engaging.
CSS enables you to apply styles consistently across multiple pages of a website, ensuring a uniform look and feel. It also allows you to make global changes easily by modifying a single CSS file, which is then applied to all linked pages. This week, we will cover the foundational concepts and syntax of CSS, explore how to apply styles to HTML elements, and understand the importance of the cascading and inheritance principles in CSS. By the end of this week, you will be equipped with the knowledge to start styling your web pages effectively.
Day 1: Introduction to CSS CSS, or Cascading Style Sheets, is used to style and layout web pages. CSS works by selecting HTML elements and applying styles to them. The basic syntax of CSS consists of a selector and a declaration block. The selector points to the HTML element you want to style, and the declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
For example:
css
Copy code
h1 {
color: blue;
font-size: 24px;
}
In this example, h1 is the selector, and color: blue; and font-size: 24px; are the declarations. The color property changes the text color to blue, and the font-size property sets the font size to 24 pixels.
Day 2: Applying CSS Styles CSS can be applied to HTML elements in three ways: inline, internal, and external.
Inline CSS: Styles are applied directly within the HTML element using the style attribute. This method is not recommended for large-scale projects due to its lack of separation between content and presentation.
Example:
html
Copy code
<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>
Internal CSS: Styles are defined within a <style> element in the <head> section of the HTML document. This method is useful for single-page documents where styles do not need to be reused across multiple pages.
Example:
html
Copy code
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
External CSS: Styles are defined in an external .css file, and the file is linked to the HTML document using the <link> element. This method is preferred for larger websites as it allows for better organization and reusability of styles.
Example:
html
Copy code
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
External CSS file (styles.css):
css
Copy code
h1 {
color: blue;
font-size: 24px;
}
Day 3: Selectors and Specificity CSS selectors are used to "select" the HTML elements you want to style. There are various types of selectors, including element selectors, class selectors, and ID selectors.
Element Selector: Targets HTML elements by their tag name.
Example:
css
Copy code
p {
color: green;
}
Class Selector: Targets elements by their class attribute. Classes are reusable and can be applied to multiple elements.
Example:
css
Copy code
.highlight {
background-color: yellow;
}
HTML:
html
Copy code
<p class="highlight">This is highlighted text.</p>
ID Selector: Targets a single element by its id attribute. IDs are unique and should be used only once per page.
Example:
css
Copy code
#main-header {
font-size: 36px;
}
HTML:
html
Copy code
<h1 id="main-header">Welcome!</h1>
Specificity determines which styles are applied when multiple selectors target the same element. Specificity is calculated based on the type of selectors used, with IDs having the highest specificity, followed by classes, and then element selectors.
Day 4: Box Model and Layout The CSS box model is a fundamental concept that describes how elements are structured and displayed on a web page. Every HTML element is considered a box, consisting of four parts: content, padding, border, and margin.
Example:
css
Copy code
div {
padding: 10px;
border: 2px solid black;
margin: 20px;
}
Understanding the box model is crucial for controlling the layout and spacing of elements on a web page. In addition to the box model, CSS provides various layout techniques such as flexbox and grid, which allow for more complex and responsive designs.
Day 5: Styling Text and Fonts CSS offers a wide range of properties to style text and fonts, enhancing the readability and visual appeal of your content.
Color: Sets the text color.
Example:
css
Copy code
p {
color: darkblue;
}
Font-Family: Specifies the font for the text.
Example:
css
Copy code
p {
font-family: Arial, sans-serif;
}
Font-Size: Sets the size of the text.
Example:
css
Copy code
p {
font-size: 16px;
}
Font-Weight: Controls the thickness of the text.
Example:
css
Copy code
p {
font-weight: bold;
}
Text-Align: Aligns the text within its container.
Example:
css
Copy code
p {
text-align: center;
}
These properties, among others, allow you to create visually appealing typography that enhances user experience and conveys information effectively.
Objective: Apply your understanding of CSS to create a visually appealing webpage.
Task: Create a webpage that includes the following components:
Instructions:
Additional Notes: