.png)
7. CSS and Styling
7.1 : Overview of CSS and its role in web design.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML (Hypertext Markup Language). It is used to control the layout, formatting, and appearance of web pages. CSS provides a way to separate the structure and content of a web page from its visual representation, making it easier to maintain and update the design.
7.2 : Inline styles, internal stylesheets, and external stylesheets.
1. Inline Styles:
Inline styles are applied directly to individual HTML elements using the "style" attribute. Inline styles have the highest specificity, meaning they override other styles applied to the element.
Here's an example
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>
2. Internal Stylesheets:
Internal stylesheets are defined within the "head" section of an HTML document using the "style" element. Internal styles apply to the entire document or specific sections defined by HTML elements.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a paragraph with styles from an internal stylesheet.</p>
</body>
</html>
3. External Stylesheets:
External stylesheets are defined in separate CSS iles and linked to HTML documents using the "link" element. This approach allows for reusability and separation of concerns, as multiple HTML documents can share the same stylesheet.
Here's an example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph with styles from an external stylesheet.</p>
</body>
</html>
7.3 : Applying styles to HTML elements (text formatting, backgrounds, borders).
In each of these methods, you can apply styles to HTML elements using CSS properties. Some common examples include:
1. Text Formatting:
CSS provides properties like "color" for specifying the text color, "font-size" for adjusting the font size, "font-family" for setting the font type, "font-weight" for controlling the text boldness, and many more.
2. Backgrounds:
CSS allows you to set background properties such as "background-color" to define a background color, "background-image" to specify an image as the background, "background-repeat" to control how the background image is repeated, and so on.
3. Borders:
CSS provides properties like "border-width," "border-style," and "border-color" to define borders around elements. You can adjust these properties to control the border width, style (solid, dashed, etc.), and color.
These examples are just a glimpse of what CSS can do. With CSS, you have extensive control over the visual aspects of HTML elements, enabling you to create appealing and well-designed web pages.
