CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. It is used to add styles, such as colors, fonts, and layouts, to web documents written in HTML and XML.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). With CSS, web developers can create visually engaging and consistent websites with a separate file for styling.
This makes it easier to maintain and update the look and feel of a website without having to make changes to the HTML markup.
How to use CSS with HTML
There are three main ways to use CSS styles in an HTML document:
1. Inline styles:
CSS styles can be applied directly to an HTML element using the style attribute. This method is useful for applying a one-off style to a specific element, but it can be difficult to maintain and not recommended if you have a lot of styling to do.
<p style="color: blue;">This is a blue paragraph.</p>2. Internal stylesheet:
You can include a CSS stylesheet within the head of an HTML document using the style element. This method is useful when you want to style multiple pages within a single website, but it is not recommended if you have multiple websites that you want to share styles between.
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a blue paragraph.</p>
</body>
</html>3. External stylesheet:
You can also create an external CSS file and link to it from the head of your HTML document using the link element. This method is the most flexible and recommended way of using CSS with an HTML document.
<head>
<link rel="stylesheet" href="styles.css">
</head>/* File: styles.css */
p {
color: blue;
}You can use these methods in combination, for example you can override the styles of external stylesheet via inline styles.
Different examples of using CSS with HTML
CSS Colors
There are different ways to use CSS colors, fonts, and sizes in HTML, but the most common approach is to use CSS class or id selectors to apply the styles to specific elements in the HTML document.
To use CSS colors in HTML, you can set the color property on an element. You can specify colors using color names, hex codes, or RGB values.
<p class="blue-text">This is a blue paragraph.</p>/* File: styles.css */
.blue-text {
color: blue;
}CSS Fonts
To use CSS fonts in HTML, you can set the font-family property on an element. The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/OS.
<p class="custom-font">This is a text with custom font</p>/* File: styles.css */
.custom-font {
font-family: 'Open Sans', sans-serif;
}CSS Sizes
To use CSS sizes in HTML, you can set the font-size property on an element. You can specify sizes using various units such as pixels px, ems em, or percentages %.
<p class="big-text">This is a big text</p>/* File: styles.css */
.big-text {
font-size: 2em;
}You can use these techniques to apply different styles to different elements in your HTML document, making your web pages more visually engaging and consistent.
CSS Border
To use a CSS border in HTML, you can set the border property on an element. The border property is a shorthand property that allows you to set the width, style, and color of a border all at once.
You can also use the border-width, border-style, and border-color properties to set the individual aspects of the border.
Here is an example of how to use the “border” property to create a red solid border with a width of 2px:
<div class="bordered-div">This is a bordered div</div>/* File: styles.css */
.bordered-div {
border: 2px solid red;
}You can also use the individual border properties to create the same effect, this way you can control the width, style, and color separately
.bordered-div {
border-width: 2px;
border-style: solid;
border-color: red;
}You can also control the border for each side individually, for example:
.bordered-div {
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
border-right-width: 2px;
border-right-style: solid;
border-right-color: red;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: red;
border-left-width: 2px;
border-left-style: solid;
border-left-color: red;
}You can use different border styles, like dotted, double, groove, ridge, inset, and outset. And use different units like px, em and % to control the width of the border. You can also use color names, hex codes, or RGB values to set the color of the border.
CSS Padding
To use CSS padding in HTML, you can set the padding property on an element. The padding property is used to create space around an element’s content, inside of any defined borders.
The padding property can also be broken down into four individual properties for more precise control (padding-top, padding-right, padding-bottom, and padding-left).
Here is an example of how to use the “padding” property to create a space of 20 pixels around the content of a div element:
<div class="padded-div">This is a padded div</div>/* File: styles.css */
.padded-div {
padding: 20px;
}You can also use the individual padding properties to create the same effect, This way you can control the padding for each side individually:
.padded-div {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}You can use different units to set the padding like px, em, %, and rem.
CSS padding is important because it helps to define the element’s total size, including the size of the content and the size of the padding.
It also helps to create more space between elements, improve the overall design and readability of the web page.
CSS Margin
To use CSS margins in HTML, you can set the margin property on an element. The margin property creates space outside of an element’s border, and it can be used to control the distance between elements.
The margin property can also be broken down into four individual properties for more precise control (margin-top, margin-right, margin-bottom, and margin-left).
Here is an example of how to use the margin property to create a space of 20 pixels around a <div> element:
<div class="margin-div">This is a margin div</div>/* File: styles.css */
.margin-div {
margin: 20px;
}You can also use the individual margin properties to create the same effect, This way you can control the margin for each side individually:
.margin-div {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}You can use different units to set the margin, like px, em, %, and rem, and also use auto to center elements.
CSS margin is useful because it helps to control the distance between elements and create more whitespace around them. This can help to improve the overall design and readability of a web page. Negative values are allowed for margins, which will overlap elements.
It is also important to keep in mind the CSS box model, that it’s the way that the size and position of elements is calculated and it’s composed by content, padding, border and margin.
