DEV Community: SwarupaKulkarni

Introduction to CSS and CSS Selectors

SwarupaKulkarni — Mon, 10 Apr 2023 12:59:57 +0000

CSS (Cascading style sheets) is used to style and lay out web pages. CSS is used to describe how HTML elements can be displayed
on the web page. For example if you want to alter the font, color, size and other decorative features.

CSS Selectors:
CSS selectors select the HTML elements we want to customize.
In CSS, selectors are used to target the HTML elements which we want to style. There are following types of selectors:

1. Universal Selector:-
As the name suggests, Universal Selector in CSS is used to select all the HTML elements such as <p>,<h1>,<img>,<li> etc. Therefore,
the Universal selector can affect to the entire HTML elements on a web page.
(*) asteric symbol donates the universal selector in CSS.

What is the use of UNiversal Selector:

It is used to miantain the consistent styles on the browsers.Because each browser has its own style.
You will never have to select each element and apply the style.By using Universal selector you can style the entire web page
& avoid too much work.

Syntax:
The syntax of Universal Selector is as follows:

* { property: value; }

2.Individual Selector:
You can address any element like <div>,<span>,<li>,<p> etc. As the name suggests, the Individual selector in CSS selects a particular or individual element on the web page.

What is the use of Individual selector:
If you want to target or style a particular element, you can use Individual selector.So that only that element will get affected.

Syntax:-
The syntax of Individual selector is as follows:

element { property:value; }

3. Class and ID selector:
A class selector in CSS is used to select HTML elements based on their class names which are specified as an attribute within an HTML tag.
The class name is preceded by a dot(.) like .test. Multiple elements may have the same class attribute so by using class slector, it will
affect all the HTML elements of that particular class. A class name can be any string value having uppercase or lowercase letters, digits, hyphen, and underscore.
A CSS class name cannot have a space within it
_
What is the use of class selector?_
We can select the multiple elements with same classname & apply same style to them.
Class selectors are used to add specific styles to elements based on their specified class name.

Syntax:
we can declare classname in HTML elements by using class attribute is as follows:

<element class="classname"></element>

We can add CSS styles by using above example of class attribute:

.classname{ property:value; }

ID selector:
By using ID selector, we can assign a unique identifier to an HTML element & we can style it by referencing the unique identifier. The ID selector uses the ID attribute
of an HTML element to select a unique element. Use (#) sign followed by the ID of the HTML element. This ID should be unique within the page.ID selector and ID name must be same.

Syntax:
The syntax of ID selector is as follows:
.ID name{ property:value; }

4. And selector(chained):-

Dot(.) works as AND. We can target a particular element by using the AND selector.It is useful when you have multiple elements with same properties.
example:
li.bg-black.text-white{ background-color: #000000; color: #efg3232 }

5. Combined Selector:
By using Combined selector you can target multiple elements at the same time by using (,) comma.
syntax:

We can use Combined selectors by using comma as follows:

element1,element2{ property:value; }

Example:

span,li{ background-color: burlywood; }

6. Inside an element:
By using Inside an element selector we can target the elements with the order we want by using just space. Don't need comma or anything use just space.

Syntax:
element1 element2 element3{ property:value; }

example:-
div ul li{ background-color:#4b35f1; }

7. Direct child:-
The direct child selector is used to select the direct child of the specified element. The direct child selector is represented by the greater than(>) sign. You can use (>) sign
between two elements.

**Syntax:-**
  `element1 > element2 {
  property:value;
  }`

example:-
div > li { background-color: #7667e4; }

8.Sibling ~ or + :-

The sibling selector is used to select the adjacent element of the specified element. The sibling is represented by (~) tilde sign or (+) plus sign.

Syntax:-
elemnet1 + element2 { proprty:value; }

Example:-
.sibling + p{ background-color: #pink; }

9. Psuedo elements:
A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

1.Style the first letter, or line, of an element
2.Insert content before, or after, the content of an element.

1. ::before pseudo element:-

The ::before pseudo-element can be used to insert some content before the content of an element.

example:-

h1 :: before{ content: ''; }

2. ::after pseudo element:-

The ::after pseudo-element can be used to insert some content after the content of an element.

example:-

h1 :: after{ content: ''; }

Introduction to Web server and HTML

SwarupaKulkarni — Tue, 28 Feb 2023 13:41:29 +0000

In this article we are going to learn about what is web server and few basic tags of the HTML.
As a beginner the first thought which comes to our mind after hearing the server is " Server means the racks of machines". But server does not mean the racks of machine but the
server is a software that serves. Most famous web server is Apache2 .The Apache2 Server is a free and open-source cross-platform web server software.

About cPanel:

cPanel is the simplify server management. It acts like an Interface between the server. People used to write their HTML CSS code and used to dump on the folder. These folders were given
by the companies like bluehost etc. Behind the scene there was the server installed like Apache2 & on top of that an interface was given to us which was cPanel

cPanel has default serving .There was a folder & name of the folder was:
/var/html/www

whenever you place any file inside these folders these files being served to you.

Live web servers

One of the most popular & useful live web server extension is Ritwick Dey's live server.
It makes your existing server live. You can easily reload the dynamic pages by using this extension.

How to install the live server extension?

First go to your editor. There will be a extension named tool. Open it & search "live web server". You can easily get it. There are lot more options of live web server. You can install any of them by taking a look at it.
If you have already installed the live web server extension you just need to enable it & disable it as per your requirement.

HTML

HTML stands for Hyper Text Markup Language. HTML is the code which is used structure a web page and its content. HTML consist of the series of elements and contents.
By using elements we can structure a web page.

<!DOCTYPE html>
when internet was getting designed ,there were lot of types of files which came around like pdf file, image file, text file etc. Everybody was having issue like what kind of file is this?
So at that time the standard came up like whatever the file it is, you have to write the type of the document first so that browser will know the type of the document.
Above we are clearly writing our type of document as html.

Browser needs to know in what language this page is being served. Whatever the first tag you are writing in that mention which language you are using. In above example we are using English language. en means English.

HTML is divided into the TWO parts:

head 2.body

1. head:-

The head part you can not see but still the info is there but majority is something we don't see. head is something that loads before body. Anything you write in head is not
visible to end user. It is meant for extra information.

2. Body :-
The information that you see on the web page.

Note :- The entire html page loads from the top to bottom.

HTML elements:
HTML elements has some parts mentioned below:
1. Opening tag:-
This consist the name of the tag wrapped by the opening and closing angle brackets. This means the element begins or starts.

2.Closing tag:-
This is same as opening tag only the difference is it includes forward slash(/). This means the elements ends here.

3. The content:-
Content is the part between opening tag and closing tag. Content is nothing but text.

4. The element:-
The opening tag, closing tag and content together forms the element.

What are the attributes?

The elements/tags can have the attributes. Attributes is nothing but the properties.

List of some basic HTML elements:

1.h1:-

It defines the most important heading in the HTML document.
Example:-

Headings can range from h1 to h6. The most important heading is h1 and the least important heading is h6.
Example:-

2.p :-
p tag represents the paragraph.
Example:-

How to write so many words without actually writing it?

If you don't want to write paragraph manually you can use lorem and the number of words in between the opening and closing tag.
It will give you required amount of words in the paragraph. Make sure there is some space around p & /p then write lorem & the amount of words you required & then hit the tab it will give you 30 words.

3.br:-
If you want the content on the new line you can use br tag.
Example:-

4.Image:-
Whenever you want to add an Image you can use img tag. In this tag src will be your local file or something from internet.
alt means if by mistake your image is not visible then you can write the description of the image
It is not mandatory to write alt.

example:

Never ever download any image from google & use it. Because the owner of the image may charge you for the copyright.

Here are some websites form where you can download any image for free.
1.Unsplash
2.pexels

5. The anchor element :-
The a HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
href is hyperlink reference.

example:-