What is CSS?

CSS stands for Cascading Style Sheets.
CSS used to provide styles for your web pages.
It including the design, layout and display website's at different devices and screen sizes.

CSS Syntax

The selector points the HTML element you want to style.
h1 is a selector in CSS.
color is a property, and blue is the property value.

CSS Selectors

CSS selector selects the HTML element's you want to style.

Universal Selector

-The universal selector (*) selects all HTML elements on the page.

* {
  text-align: center;
  color: blue;
}

element Selector

The element selector selects HTML elements based on the element name.

p {
  text-align: center;
  color: red;
}

id Selector

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
Write a hash (#) character in style element to select specific id.
```
#para1 {
text-align: center;
color: red;
}
```
class Selector
The class selector selects HTML elements with a specific class attribute.
The class selector selects HTML elements with a specific class attribute.
```
.center {
text-align: center;
color: red;
}
```
Group Selectors
It will be better to group the selectors to minimize the code.
To group selectors, separate each selector with a comma.
```
h1, h2, p {
text-align: center;
color: red;
}
```
and selector
In these and selector, we select first a element and then select her class.
```
li.classname{
color:red;
}
```
Some other selectors are as follow:

1. Inside an element:

In the inside ana element selector ,we select any subchild of an element.
Like: we select a li that written in a ul and ul are written in a div.
For the selecting we writediv.ul.li .

div.ul.li{
color:pink;
background-color:purple;
}

2. Direct child selector:

We can select direct child of any element.
Like: first select a element and select her direct any child.
To select direct child we use less then sign>.

div>li{
background-color:red;
}

3. Sibling selector:

For select the sibling element we use some sign like @, +, /, * .
Like: we select next sibling of any p code as below-
```
sibling+p {
color:white;
}
```
How to insert CSS
Three ways of inserting CSS:-

Inline CSS:

In inline css, add style as a attribute direct in html element.
Inline styles are defined within the "style" attribute.

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Internal CSS:

An Internal css are write in a html page also.
The internal css is defined inside the <style> element, inside the head section of an HTML page.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

you can change the look of an entire website by changing just one file.
HTML page must include a reference to the external style sheet file inside the element, inside the head section.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Comments

CSS comments are not displayed in the browser.
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
Comment start as : starts with / and ends with /.

Single line comment

/* This is a single-line comment */
p {
  color: red;
}

Multi line comment

/* This is
a multi-line
comment */

p {
  color: red;
}

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Css colors divided in many categories like:
CSS Text Color
You can set the color of text.
Like:-Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

p{
 color:DodgerBlue;
}

CSS Border Color

You can set the color of borders

p{
border:2px solid Tomato;
}

CSS Color Values:-

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

https://codepen.io/Meghakhatri/pen/qBKoOyJ

CSS Backgrounds
The CSS background properties are used to add background effects for elements.

CSS background properties are :background-color, background-image, background-repeat, background .

background-color

body {
background-color: lightblue;
}

background-image

body {
background-image: url("paper.gif");
}

background-repeat or position:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.

p {
  border: 2px solid red;
}

CSS Border Style

- The border-style property specifies what kind of border to display:-

CSS Font

Choosing the right font has a huge impact.
The right font can create a strong identity.
Using a font that is easy to read is important.

Font-family

In CSS, we use the font-family property to specify the font of a text.
```
.p1 {
font-family: "Times New Roman", Times, serif;
}
```
Font Style
The font-style property is mostly used to specify italic text.

p.{
  font-style: italic;
}

The font-size property sets the size of the text.
Manage the text size is important in web design.
```
h1 {
font-size: 40px;
}
```
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
ogle Fonts are free to use, and have more than 1000 fonts to choose from.

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

Megha Khatri's Blog

Megha Khatri's Blog

Play with CSS

Basic part-1

Table of contents

What is CSS?

CSS Syntax

CSS Selectors

Universal Selector

element Selector

id Selector

class Selector

Group Selectors

and selector

Some other selectors are as follow:

How to insert CSS