Skip to main content

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

Loading...

Internal CSS​

In this method, CSS styles are added within the HTML document's head section using the style tag.

As an example:

Editor

Loading...

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

Loading...

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

Loading...

In this example:

  • The border property is used to set the border width, style, and color.
  • We are setting the width to 2 pixels, the style to solid, and the color 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

Loading...

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

Loading...

In this example:

  • We are using internal CSS to set the padding for all four sides of a <p> element to 20 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:

Editor

Loading...