JavaScript Tutorial

HTML CSS

CSS stands for Cascading Style Sheets, which is used to control the styling of a webpage and allows for efficient control of the styling of multiple pages from one place.

With CSS, we can control various aspects such as color, font, background color, size, and spacing between content. Additionally, we can also set up different styles for different screen sizes using CSS Media-queries.

CSS file is defined with extension as .css.

CSS can be added to any of the HTML document using three ways:-

  • Inline Styling
  • Internal Styling
  • External Styling

Inline Styling

To target a single element styling, inline styling is preferred. It is done by using the "style" attribute on elements. The following example sets the text color to white and the background color of the paragraph to green.

Internal Styling

To target a single page, internal styling is preferred. It is defined within the <style> tags in the <head> section of the HTML document. The following example demonstrates how to set the background color to blue and the text color to white for heading <h1> using internal styling:

External Styling

External styling is defined in a separate CSS file with a .css extension, and then linked to the HTML file using the <link> tag within the <head> section. This allows for the same styling rules to be applied across multiple webpages.

Let's create a style sheet, to style a few HTML elements.

style.css

Some common CSS styling properities:-

Let's create a common HTML webpage for all the styling properties and then we move one by one.

CSS Font Family: This CSS property is used to change the font-family of any of the content within the webpage.

The "style.css" file input is as follows:

Output of style.css

CSS Font Size: This CSS property is used to change the font size of any of the content within the webpage.

"style.css" file input is as following:

Output

CSS Border: This CSS property is used to set a border to any element.

"style.css" file input is as following:

Output

CSS Padding: This CSS property is used to set some defined space between the content and the border of the element.

The "style.css" file input is as follows:

Output

CSS Margin: This CSS property is used to set some defined space outside of an element, between the border and the surrounding content of the element.

The "style.css" file input is as follows:

Output

Go back to Previous Course