Cascading Style Sheets (CSS) is the tag used for the web design, that is, the way the Text and graphics used in web pages are formatted. While HTML adds the basic structure and the content to your webpage, CSS is the one that makes it more beautiful by regulating the design in aspects like layout, color, font, etc.
What is CSS?
Cascading Style Sheets abbreviated as CSS is a programming language used in coding website design. It enables you to apply such items as fonts, colors, spacing, and layout to the destined web pages. The ‘cascading’ part is informing how the CSS is working where rules of a certain type follow those of a higher type.
Basic CSS Syntax
A CSS rule consists of a selector and a declaration block:A CSS rule consists of a selector and a declaration block:
selector {
property: value;
}
- Selector: The selector which is the HTML element that you wish to apply the styling on.
- Property: The style attribute you wish to change ( for example, color, font-size).
- Value: The value you want to set the property to or if you want to remove it.
For example:
p {
color: blue;
font-size: 16px;
}
This CSS rule will set the text color of all the `<p>` (Paragraph) tags in the HTML document to blue and decrease font size of the text to 16px.
Adding CSS to your Webpage
There are three main ways to add CSS to your HTML document:There are three main ways to add CSS to your HTML document:
Inline CSS: In-line by applying the CSS style using the ‘style’ attribute in the HTML element being used.
<p style=”color: blue;”>This is a blue paragraph.</p>
Internal CSS: Between the `<style>` tags, in the `<head>` part of an HTML document.
<head>
<style>
p {
color: blue;
}
</style>
</head>
External CSS: In another file `.css` file linked to your HTML document.
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
In your `styles.css` file:
p {
color: blue;
}
Basic CSS Properties
Here are some common CSS properties to get you started:Here are some common CSS properties to get you started:
Color
- Changes the text color.
- Example:
p {
color: red;
}
Background-color
- Changes the background color of an element.
- Example:
body {
background-color: lightgray;
}
Font-family
- Sets the font of the text.
- Example:
p {
font-family: Arial, sans-serif;
}
Font-size
- Sets the size of the text.
- Example:
h1 {
font-size: 24px;
Text-align
- Aligns text inside an element.
- Example:
h1 {
text-align: center;
}
Padding
- Adds space inside the element, between the content and the border.
- Example:
div {
padding: 20px;
}
Margin
- Adds space outside the element, between the element and other elements.
- Example:
div {
margin: 20px;
}
Border
- Adds a border around an element.
- Example:
div {
border: 2px solid black;
}
Example: Styling of a simple Webpage
As practice let’s try to add internal CSS to a simple HTML webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Styled Webpage</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
}
h1 {
text-align: center;
color: #4CAF50;
}
p {
font-size: 18px;
line-height: 1.6;
}
a {
color: #008CBA;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.container {
width: 80%;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class=”container”>
<h1>Welcome to My Styled Webpage</h1>
<p>This is a simple example of how you can style a webpage using CSS. With just a few lines of code, you can transform the look and feel of your site.</p>
<p>Check out more tutorials on <a href=”https://www.example.com”>our website</a>.</p>
</div>
</body>
</html>
Explanation:
- Body: For the background we have set the standard light gray color and for the content of the webpage we have used the standard sans-serif font throughout the webpage.
- h1: The first title given to the content of a site has the name that is centered and colored green.
- p: Several selections are made when it comes to paragraphs to make them easy to read, this is in terms of font size and line height.
- a: Links look like specific colored text with no underline by default, but underlined on mouse over.
- . container: To style a div that wraps the content, the class selector is used with padding, white back ground, rounded corners and small box shade.
Conclusion
CSS plays a critical role in the task of the Web designers and Web developers, as it helps you build your Web sites’ appearance. CSS simplified enables the enhancement of your first webpage from where you can grow more professionalism to enhance the difficult webpages.