Spider
Cascading Style Sheet

Cascading Style Sheet

#100DaysOfCode #Day5

Vishnu's photo
Vishnu
·

4 min read

Hey Guys,

Today we will go through the fundamentals of CSS(Cascade Style Sheets).

What is CSS?

It is used to style the HTML elements into our desired form. It makes the page beautiful readable and attractive

How can we add CSS?

There are techniques to add CSS to a html file.

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS

In this we will add the styling in to the HTML tags itself.

<p style="color:red;"> Hello World </p>

Internal CSS We can add styling in the same HTML file by using style tags

<style>
  p{
    color: red;
  }
</style>

<p > Hello World </p>

External CSS ( Recommended)

We will add CSS through an external file which will be access through a <link> tag.

HTML file

<link rel="stylesheet" href="style.css" />
<p > Hello World </p>

CSS file ( style.css)
p{
    color:red;
  }

Stucture of CSS

image.png

P-> CSS selector color-> property red-> value This is the basic structure of CSS

We can do many thing with these selectors like manipulating the texts

Some of the most used CSS properties

font-size
font-family
text-transform
font-style
line-height
text-align

Combining Selectors

We can use multiple selectors at a same time by using coma as shown below

<h1>Hello</h1>

<p > Hello World </p>

 p,h1{
    color:red;
  }

We can also have descendent selectors to access the specific child element

<h1>Hello</h1>
<p>Hey</p>
<div>
<p > Hello World </p>
</div>

 div p{
    color:red;
  }

In the above example the <p> is the child element of <div>. Thereby we can access the specific <p>.

Class & ID

We will use classes and ID as selectors.

  • Classes can be used for multiple elements
  • ID are used for only one element.
<h1 class="Hello">Hello</h1>
<p class="Hello">Hey</p>
<div>
<p id="world"> Hello World </p>
</div>

 .Hello{
    color:red;
  }
#world{
  color:blue
}

. is used to access the class and # is used to access id

/* */ is used for commenting.

Pseudo Class

The pseudo-classes are a set of classes which are predefined and used to perform a certain action or access elements in a certain way

<a href="#"> link</a>

a:hover{
  color: green;
}

In the above example, we can see by hovering on the link the color changes to green.

Conflicting selectors

We have precedence of selectors of priority with which the styles are applied.

image.png

We can multiple classes to a single element by adding a space.

The Important keyword makes the style to force to element irrespective of the precedence.

Most text-related properties are inherited from the parent element

Box Model

image.png

The above figure shows how the content is presented on the page. We can see the content padding, border, and margin by using dev tools. In chrome, we can click ctrl+ shift+ I.

Collapsing Margins

If we have two contents a and b. a has a margin of 15px and b has a margin of 20px. The space between a and b will be 20px only. It is called collapsing margins. Larger content margin will be the space between.

Centre a page

Put everything in a container and add margin auto for left and right and add a certain width.

Types of boxes

There are two types of boxes

  • Inline:This takes the space it needed. Achieved by display: Inline. Heights and width do not apply padding and margin are applied only left and right. <a>,<strong>,<em>
  • Block level: It occupies an entire block. They cannot be side by side. Achieved by display: block.<div>,<h1>.
  • Inline Block: Acts both as inline and block. <img>.

Absolute positioning

There is relative and absolute positioning. In absolute positioning, it stays relative to its parent element. The parent element should be relative in order to make the child element absolute.

Pseudo Element

:: is used for pseudo-elements. We can add element with this 

h1::after{
}
h1::before{
}

Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The following example selects the first

element that are placed immediately after

elements.

$$ To be continued $$

100DaysOfCode