HTML CSS | Introduction to Cascading Style Sheets (CSS) in HTML
HTML Styles-CSS
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML.
CSS allows developers to separate the content of a web page from its presentation. This separation makes it easy to maintain and update the design of a website without having to change the HTML code.
As an example:
The following CSS rule sets the font size for all paragraphs on a web page to 16 pixels.
p {
font-size: 16px;
}
What is CSS?
CSS works by selecting HTML elements and defining how they should appear on the page.
CSS can be used to control many aspects of the appearance of a web page, including font styles, colors, margins, padding, borders, and layout.
By using CSS, developers can create visually appealing and responsive websites that are easy to maintain and update
How to use CSS
CSS (Cascading Style Sheets) can be added to HTML (Hypertext Markup Language) documents in three ways.
Inline CSS
In this method, CSS styles are added directly to the HTML elements using the style
attribute.
As an example:
Editor
Internal CSS
In this method, CSS styles are added within the HTML document's head section using the style
tag.
As an example:
Editor
In this method, CSS styles are stored in a separate .css
file and linked to the HTML
document using the link
tag.
As an example:
External CSS
Using external CSS is generally considered the best practice because it keeps the style information separate from the HTML code, making it easier to maintain and update the website's design.
Editor
Here is an example of how to use external CSS:
Create a new file with a .css extension and add all the necessary CSS rules to it.
As an example:
you might create a file called "styles.css"
with the following code.
body {
background-color: #f2f2f2;
}
h1 {
color: red;
font-size: 36px;
}
p {
color: blue;
font-size: 16px;
}
In the HTML file's head section, add a link to the external CSS file using the link
tag.
As an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some text on the page.</p>
</body>
</html>
In this example:
- The
"link"
tag specifies the location of the CSS file using the"href"
attribute. - In this case, the CSS file is in the same directory as the HTML file, so we can simply use the file name
"styles.css"
. - If the CSS file were in a different directory, we would need to provide the path to the file.
CSS Border
To add a border to an element, you can use the border
property. This property has several sub-properties that allow you to specify the width, style, and color of the border.
As an example:
Editor
In this example:
- The
border
property is used to set the borderwidth
,style
, andcolor
. - We are setting the width to
2
pixels, the style tosolid
, and thecolor
to black.
CSS Padding
CSS padding is a property that defines the space between the content of an HTML element and its border. You can use the padding property to add space inside an element, making the content more visually appealing or easier to read.
The syntax for the padding property is as follows:
padding: top right bottom left;
- You can specify one, two, three, or four values for padding.
- If you specify one value, it sets the padding for all four sides of the element.
- If you specify two values, it sets the padding for the top/bottom and left/right sides of the element.
- If you specify three values, it sets the padding for the top, left/right, and bottom sides of the element.
- If you specify four values, it sets the padding for the top, right, bottom, and left sides of the element.
Editor
You can also use shorthand notations to set the padding for one or more sides of an element.
As an example:
- To set the padding for the top and bottom sides of an element to 10 pixels and the left and right sides to 20 pixels
You could use the following CSS:
p {
padding: 10px 20px;
}
Here's an example of how to set the padding for all sides of an element using a single value in an internal CSS style:
Editor
In this example:
- We are using internal CSS to set the padding for all four sides of a
<p>
element to20
pixels. - Because we only specified one value for padding, it is applied to all sides of the element.
CSS Margin
CSS margin is a property that allows you to control the space between an element's border and adjacent elements or the browser window. It is used to create gaps between elements and to adjust the position of an element within its container.
The margin property can be set for individual sides of an element (top, right, bottom, left) or for all sides at once using the shorthand margin property.
As an example:
Setting margin for all sides.
div {
margin: 20px;
}
Setting margin for each side separately.
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
You can also use negative values to bring elements closer together:
div {
margin-top: -10px;
margin-bottom: -20px;
}
The margin property can also accept percentage values, which are calculated based on the width of the containing element.
div {
margin: 10%;
}
Example of setting the margin using internal CSS: