Understanding CSS:
CSS (Cascading Style Sheets) is a style sheet language used to define the presentation and layout of HTML documents. It allows web developers to control the appearance of web pages, including colors, fonts, spacing, and positioning of elements. CSS works by selecting HTML elements and applying styles to them.
Basic Structure of CSS:
CSS rules consist of selectors and declarations:
- Selectors: Selectors target HTML elements to apply styles. They can target specific elements, classes, IDs, attributes, or even combinations of these.
- Declarations: Declarations define the styles to be applied, such as color, font size, margin, padding, etc. They are enclosed within curly braces {} and separated by semicolons ;.
Linking CSS to HTML:
CSS can be linked to HTML documents in three main ways:
External Style Sheet:
This method links an external CSS file (styles.css) to the HTML document.
Internal Style Sheet:/* CSS code here */
</style>
This method includes CSS code directly within the <style> tags in the HTML document.
Inline styles are applied directly to HTML elements using the style attribute.
CSS SelectorsElement Selector:
color: red;
}
Targets all <p> elements and sets their text color to red.
background-color: yellow;
}
Targets elements with class="highlight" and sets their background color to yellow.
ID Selector:font-size: 24px;
}
Targets the element with id="header" and sets its font size to 24 pixels.
Attribute Selector:border: 1px solid black;
}
Targets <input> elements with type="text" and applies a black border.
color: blue;
}
Sets the text color of <h1> elements to blue.
Font Property:
font-family: Arial, sans-serif;
}
Sets the default font family for the entire document.
Background Property:background-image: url('background.jpg');
background-size: cover;
}
Applies a background image to elements with class .jumbotron and covers the entire element.
Margin and Padding:margin: 10px;
padding: 20px;
}
Sets margin and padding values for elements with class .box.
Positioning:
position: fixed;
top: 0;
left: 0;
width: 200px;
}
Fixes the position of .sidebar to the top left corner and sets its width to 200 pixels.
CSS Box Model:The CSS box model describes the space occupied by an element, including content, padding, border, and margin.
- Content: Actual content area where text or images are displayed.
- Padding: Space between the content and the border.
- Border: Boundary around the padding.
- Margin: Space outside the border, separating elements.
Example:
Let's consider a simple example to illustrate CSS styling:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to CSS Styling</h1>
<p class="intro">This is a CSS example.</p>
<div id="container">
<p>This is a styled paragraph.</p>
</div>
</body>
</html>
css
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: blue;
}
.intro {
font-size: 18px;
}
#container {
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}
In this example:
- The
<h1>element's text color is set to blue. - Paragraphs with class .intro have a font size of 18 pixels.
- The
<div>with ID container has a white background, padding, border, and margin.
CSS is a powerful tool for styling HTML elements, offering control over appearance, layout, and presentation. Understanding CSS selectors, properties, and the box model is essential for creating visually appealing and well-structured web pages. By linking CSS to HTML and applying styles selectively, developers can create engaging and responsive user interfaces.
Practice Excercise Practice now