Prakash's Here

Css Introduction

Css and its Types

Prakash N's photo
Prakash N
·

3 min read

Table of contents

Hi , Everyone !

Introduction to css

So CSS , stands for Cascading style sheet. Css saves a lot of work which can help to control the layout of multiple web pages all at once. It is used to format the layout of web pages. In simple words Css helps in controlling the color, the size of text, spacing b/w the elements. background images, background colors, screen size and many more.

The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Types of Css

  1. Inline Css

Inline css is written inside the body section. We simply use Style tag to apply the changes in our Html Page. There is an example of inline css mentioned below.

 <html>
<body>
<p style="color:Red; font-size:20px;"> Hello , welcome to the world of programming </p>
</body>
</html>

  1. Internal Css

In Internal Css we open the style attribute Inside the head section. An internal CSS is defined in the head section of an HTML page, within a style element.

<html>

<head>
<style>

p {

}

.class {

}
#id {

}


</style>
</head>
</html>

  1. External Css

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the head section of each HTML page:

<html>
<head>
 <link rel="stylesheet" href="styles.css">
</head>
</html>

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS SELECTORS>

CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. A CSS selector selects the HTML element(s) you want to style.

CSS selectors can be grouped into the following categories based on the type of elements they can select.

  1. Universal selector

It is usually mentioned by * Asterisk.

* body {

}
*p {

}

2.## Individual Selector

Here we can directly call the elements.

p 
    {

}

  1. Class and Id Selector

    The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

<head>
<style>
.row{
}

#col{

}
</style>
</head>
<body> <p class="row"> YOU SHOULD LEARN HOW TO USE SELECTORS </P>
<H1 id="col"> There are more fun to learn about Selectors </h1> 
</body>

  1. Combined selector

Here we basically use (,) to select the style.

<head>

1. 
<style> 

div p {

}
</style>
</head>
<body> <div>Hello programming 
        <p> I like programming </p>
</div>
</body>

  1. Sibling selector

We use (+) sign to apply the style. here we have an example below.

<head>
<style>
/* sibling  ~ or + */
      .sibling + p {
        background-color: pink;
      }
</style>
</head>
<body>
<section>
      <p class="sibling">Test 1</p>
      <p >Test 2</p>
      <p>Test 3</p>
      <p >Test 4</p>
      <p>Test 5</p>
    </section>
</body>
Web DevelopmentCSS