Explore the Cascading Style Sheets (CSS) Basics with this accessible guide. Learn the basics of CSS syntax and properties, and discover how to seamlessly integrate CSS with HTML. Enhance your web design skills in a straightforward manner, allowing you to professionally style your web pages with precision.
1. CSS Definition:
CSS, or Cascading Style Sheets, is a style sheet language used to describe the presentation and formatting of a document written in HTML or XML. It controls the layout, appearance, and design of elements on a web page. CSS allows web developers to separate the structure of a document from its visual presentation.
2. Style Rule Components:
A CSS style rule consists of three parts:
- Selector: Specifies the HTML element(s) to which the style is applied. For example,
h1selects all<h1>elements. - Property: Describes the aspect of the element you want to style, such as color, font-size, or margin.
- Value: Specifies the value for the selected property. For instance, the color property could have a value of red or blue.
3. Basic Cascading Style Sheets (CSS) Properties:
Basic CSS properties are fundamental styling options. Here’s an example:
/* Selector: h1 */
h1 {
/* Property: color, Value: blue */
color: blue;
/* Property: font-size, Value: 24px */
font-size: 24px;
}
In this example, the h1 selector is styled with blue color and a font size of 24 pixels.
4. Text Properties:
Text-related CSS properties allow you to control the appearance of text. For example:
/* Selector: p */
p {
/* Property: text-align, Value: center */
text-align: center;
/* Property: font-weight, Value: bold */
font-weight: bold;
}
This styles <p> elements with centered text and bold font weight.
5. Border Properties:
CSS border properties enable you to define borders for elements. For instance:
/* Selector: div */
div {
/* Property: border, Value: 1px solid black */
border: 1px solid black;
/* Property: border-radius, Value: 5px */
border-radius: 5px;
}
Here, <div> elements get a 1-pixel solid black border with a border-radius of 5 pixels.
6. Font Properties:
Font-related CSS properties control the appearance of text fonts. For example:
/* Selector: body */
body {
/* Property: font-family, Value: Arial, sans-serif */
font-family: Arial, sans-serif;
/* Property: font-style, Value: italic */
font-style: italic;
}
This sets the font family to Arial (or sans-serif as a fallback) and applies italic style to the body text.
7. Methods to Add Cascading Style Sheets (CSS) to HTML Documents:
There are various methods to add CSS to HTML documents:
- Internal (Embedded) Style Sheet: Placing CSS rules inside
<style>tags in the HTML document’s<head>. - Inline Style Sheet: Applying styles directly to individual HTML elements using the
styleattribute. - External Style Sheet: Creating a separate CSS file and linking it to the HTML document using the
<link>element. - Imported Style Sheet: Importing an external CSS file using the
@importrule inside a<style>tag.
Internal (Embedded) Style Sheet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Style Sheet Example</title>
<!-- Internal (Embedded) Style Sheet -->
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
margin: 10px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with internal styles.</p>
</body>
</html>
Inline Style Sheet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Style Sheet Example</title>
</head>
<body>
<h1 style="color: red;">Welcome to My Website</h1>
<p style="font-size: 18px; text-align: center;">This is a styled paragraph.</p>
</body>
</html>
External Style Sheet:
Create a new file named styles.css:
/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
p {
margin: 10px;
}
And link it in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Style Sheet Example</title>
<!-- External Style Sheet -->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with external styles.</p>
</body>
</html>
Imported Style Sheet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imported Style Sheet Example</title>
<!-- Imported Style Sheet -->
<style>
@import url("styles.css");
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph with imported styles.</p>
</body>
</html>
In this example, the styles.css file is the same as the one used in the External Style Sheet example. Choose the method that best fits your project structure and organization preferences.
8. Responsive Web Design:
Responsive web design aims to create web pages that look good on all devices and screen sizes. It involves using flexible grids, layouts, images, and media queries. Media queries allow you to apply different styles for different devices or screen widths.
9. Final Code using Cascading Style Sheets (CSS) with HTML:
The final HTML code integrates the previous HTML example with CSS styles. These styles enhance the visual presentation of the webpage by applying various formatting options to different elements. The CSS rules are embedded directly within the <style> tags in the HTML document’s <head>. Adjustments can be made based on specific design requirements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Styled Website</title>
<style>
/* CSS rules go here */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: blue;
font-size: 24px;
}
p {
margin: 10px;
text-align: center;
font-weight: bold;
}
img {
max-width: 100%;
height: auto;
}
ul {
list-style-type: none;
padding: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
iframe {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph introducing my styled website.</p>
<h2>Image Example</h2>
<img src="example.jpg" alt="An example image">
<h2>List Example</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h2>Form Example</h2>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
<h2>Table Example</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
<h2>IFrame Example</h2>
<iframe src="https://www.example.com"></iframe>
</body>
</html>
