Intro to CSS...

·

2 min read

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

Html is such a structure of a web page and css is used to give style to a web page.

There are three types of CSS:

  • Inline CSS.

  • Internal or Embedded CSS.

  • External CSS.

Inline CSS

Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag without using the selectors. Managing a website may difficult if we use only inline CSS. However, Inline CSS in HTML is useful in some situations. We have not access the CSS files or to apply styles to element.

Internal CSS

The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an effective way to style single pages.

Using the CSS style for multiple web pages is time-consuming because we require placing the style on each web page.

External CSS

In external CSS, we link the web pages to the external .CSS file. It is created by text editor. The CSS is more efficient method for styling a website.

By editing the .css file, we can change the whole site at once.

Output of all three

Selectors

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

  • Simple selectors (select elements based on name, id, class)

  • Combinator selectors (select elements based on a specific relationship between them)

  • Pseudo-class selectors (select elements based on a certain state)

  • Pseudo-elements selectors (select and style a part of an element)

  • Attribute selectors (select elements based on an attribute or attribute value)

DAY_13 30_Jan(Mon)_2023

Did you find this article valuable?

Support B1 by becoming a sponsor. Any amount is appreciated!