A detailed guide on the basics of CSS with examples.

Intro

Before getting into the basics let's get to know what CSS is, CSS is a stylesheet language the design that we are seeing on the webpages is due to the CSS only which allows us to design as per the project requirements.

Ways of adding CSS

There are 3 ways of adding CSS and each way has its priority let's talk about those ways one by one.

1. External

2. Inline

3. Internal

External: Here we have to create an external CSS file for example style.css inside the project or we can make a folder with name called css and we can create a file called style.css

for linking the html page with css we have to write <link rel="stylesheet" type="text/css" href="style.css">

Note: The link tag must be used inside the head section of html

in the above example, priority will be given to the file which is created inside the folder here, Here both ways I can create it but the good way is to create a CSS folder and inside that folder, we can create a CSS file.

Internal: To create an internal CSS we can create it after the head tag inside the style tag for example.

Inline: We can apply CSS in a single element by inline CSS technique. If you want to use inline CSS, you should use the style attribute to the relevant tag. Inline is given more priority, than external but it's recommended to always go for external CSS.

Priority will be given to the inline CSS, if inline is not there then the priority will be given to the internal, and so on

Note: we can write the internal css at the bottom of the file and the browser can understand, but it is not recommended to write after the HTML tag and always use hex-code as the value, as a developer we should give importance to external instead of writing inline and internal because if we are using a lot css line inside a project then writing it inside the external will be the ideal way.

Note: Ignore the spelling of the head tag

What are Selectors.?

Selectors are used for selecting particular content, HTML elements, id, classes, etc we want to style, for example.

p{
    color: #FF0000
}
h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.container{
    border: 2px solid green;
    font-size: 1rem;
}
#box{
   color: #FFFFFF;
}

Types Of Selectors:

1. Class Selector

   The class selector can be used for a particular class if we have multiple classes in the file, but still we can select one particular class to which we want to apply our styles.

   %[codepen.io/DeepakKumarDKN/pen/mdjzbrW]

   Note: If we want to access the class and add some styles to it then we have to use

   .classname{ write your styles here }

2. ID Selector

   In the ID selector, the id is always unique we can write multiple classes but the id is always unique and it can be applied to one element, with the help of an ID selector also we can select that particular element and apply styles to it.

#selector_name {
    color: #f0eded;
    font-size: 1rem;
}

NOTE: id and classes these two are the most important selectors, for id we have to use [#selector_name] and for classes we have to use [.selector_name] when we want to identify something uniquely then we should use id. We can create multiple classes and apply them on the elements but in the case of id if we are doing the same thing then it's not a good coding practice.

1. Universal Selector

Universal Selector means everything, applying styles to the entire webpage and every element present in the webpage. To apply a universal selector we have to use the (*) asterisk and it is mandatory.

*{
  background-color: #808080;
  color: #f0eded;
  font-size: 15px;
}

1. Grouping Selector/Combined Selector:

The (, ) is a grouping method that selects all the elements/tags at a time and applies styles to them, it allow us to select multiple things for example

.container, p, button{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}

Combinators

There are 4 different types of Combinators:

1. Descendant Combinators(" ")

2. Child Combinator(>)

3. Adjacent Sibling Combinator(+)

4. General Sibling Combinator(~)

Descendant Selector ( " " ):

The Descendant Selector is represented using [ " " ]. It combines two selectors in which the first selector represents an ancestor and the second selector represents descendants

selector1 selector2 {
    background-color: brown;
    padding:5px; 
    margin-bottom: 2px;
}

Child Selector (>)

It uses the greater than sign (>) as the separator between the elements, This combinator selects those elements which are direct children of the parent element . The parent element will be placed at the left of the ">". if we remove the greater than sign then it will not behave as a child combinator, it will behave as a descendant Selector.

.container > p{
    background-color: brown;
    padding:5px;
}
here .container is the parent, and the elements which are inside the container are its child elements.

Adjacent Sibling Selector (+)

The Adjacent Sibling Selector is represented by (+), It matches the second element only if it immediately follows the first element. For Example

div + p {
  background-color: brown;
}

Note: It always selects the element next to the parent element. Here in this example parent element is [div] and the elements which are next to the div are only getting selected whether you have one or more child elements after the parent but it will select only one.

General Sibling Selector(~)

It uses the tilde (~) sign as the separator between the elements. It selects the elements that follow the elements of first selector, and both of them are the children of the same parent. It can be used for selecting the group of elements that share the common parent element.

Pseudo Classes

pseudo-classes are used to define the special state of an element which is combined with the selector to add some effect to the targeted elements. for example, we can change the background colour of the button when the user hovers over the button not only just background we can do a lot of things with the help of pseudo-classes.

selector:pseudo-class{
    property:value;
}

let's discuss some of the common pseudo-classes which are mostly used by the developers.

: hover Pseudo Classes:

This pseudo-classes allows us to add some effect to the targeted element and we can see those effects whenever we move our cursor over it. for example, lets create a box and we can see the box color is changing whenever we will kep our curson on the box

:active Pseudo Classes

This pseudo-class allows us to add style to the targetted element when the element is in an active state, as soon as you click in the element we can see the styles we have applied

selector:pesudo-class{
   property:value;
}

: focus Pseudo Class

This pseudo-class works in input elements as soon as the user clicks on the element the style will get applied for example I have created a simple input element and I am changing its background color as soon I am clicking on it.

:first, :last, :nth-child Pseudo Classes

The first-child pseudo classes select/ target the elements if it is the first child of the some respective element

The last-child pseudo-classes select/target the elements if it is the last child of some respective element.

The nth-child(2) selects the element that is the second child of the parent element. it will select elements according to the value of n, here I have given the value of n as 2.

#first-child
 element:first-child{
    property:value;
 }
#last-child
element:last-child{
    property:value;
}
#nth-child(n)
nth-child(n){
    property:value
}

Pseudo Elements:

::before and ::after

::before pseudo-elements allow us to add some content before the element and ::after usually also helps us to add some content but after the element

Note: context is something that is used in ::before, ::after pseudo-elements for writing some text/content inside it. Just have a look at the above example we can see something I have written in black color in every pseudo-elements like***(-First Child, -Last Child)*** these are the things I have written inside the context, For more clarity please check my codepen

selector::after{
    content:'';
}
selector::before{
    content:'';
}

::first-letter and ::first-line

:: first-letter pseudo-element helps us to add styling to the first letter of the element and ::first-line help us to add styling to the entire line

Note : first-letter pseudo selector allows us to add margin padding but the first-line pseudo selector does not allow us to add margin and padding

...

Hi, Friend's please correct me in the comments if I am going wrong so that next time I won't do that same mistake again and again.