CSS

 CSS stands for Cascading Style Sheet.

 CSS is used to design HTML tags.
 HTML, CSS and JavaScript are used for web designing. It helps the web
designers to apply style on HTML tags.

CSS Example with CSS Editor

style for editing

O/P:

CSS 3 properties
  design box model
 apply opacity
 radius etc.

All CSS Properties

 Background
 Border
 Font
 Float
 Display
 Margin
 Opacity
 Padding
 text-align
 vertical-align
 position
 color etc.

What is CSS
 It is a style sheet language which is used to describe the look and formatting
of a document written in markup language.
 It provides an additional feature to HTML. It is generally used with HTML to
change the style of web pages and user interfaces.
 It can also be used with any kind of XML documents including plain XML, SVG
and XUL.
 CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applications and user interfaces for many mobile
applications.

What does CSS do

o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in
CSS code.

Why use CSS

These are the three major benefits of CSS:

1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and
size had to be repeated on every web page. This was a very long process. For
example: If you are developing a large website where fonts and color information are
added on every single page, it will be become a long and expensive process. CSS was
created to solve this problem. It was a W3C recommendation.

2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the
entire website by changing just one file.

3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of
the website.

CSS Syntax

A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag.

Declaration Block: The declaration block can contain one or more declarations
separated by a semicolon. For the above example, there are two declarations:

1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border

etc.

Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

CSS Selector

 used to select the content you want to style.

 Selectors are the part of CSS rule set.
  CSS selectors select HTML elements according to its id, class, type, attribute
etc.

types of selectors in CSS.

1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector

5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific
element. An id is always unique within the page so it is chosen to select a single,
unique element.

It is written with the hash character (#), followed by the id of the element.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute
(full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected then
you should use the element name with class selector.

Let's see an example.

4) CSS Universal Selector

The universal selector is used as a wildcard character.

It selects all the elements on the pages.

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style
definitions.
Grouping selector is used to minimize the code. Commas are used to separate each
selector in grouping.

Let's see the CSS code without group selector.

As you can see, you need to define CSS properties for all the elements. It can be grouped in
following ways:

Let's see the full example of CSS group selector.

How to add CSS

There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS

3. External CSS

1) Inline CSS

Inline CSS is used to apply CSS on a single line or element.

For example:

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the
elements of the page. It is written inside the style tag within head section of html.

For example:

3) External CSS

External CSS is used to apply CSS on multiple pages or all pages. Here, we write all
the CSS code in a css file. Its extension must be .css for example style.css.

For example:

Inline CSS

single element by inline CSS technique.

Syntax:

Example:

Disadvantages of Inline CSS

 o These styles cannot be reused anywhere else.
o These styles are tough to be edited because they are not stored at a single
place.
o It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
o Inline CSS does not provide browser cache advantages.

Internal CSS

The internal style sheet is used to add a unique style for a single document. It is
defined in <head> section of the HTML page inside the <style> tag.
External CSS

The external style sheet is generally used when you want to make changes on
multiple pages. It is ideal for this condition because it facilitates you to change the
look of the entire web site by changing just one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the
head section.

Example:

The external style sheet may be written in any text editor but must be saved with
a .css extension. This file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

Note: You should not use a space between the property value and the unit. For example: It
should be margin-left:20px not margin-left:20 px.

CSS Comments

CSS comments are generally written to explain your code. It is very helpful for the
users who reads your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*............*/ .
Padding and border

Flex box , flex direction

align-items

justify-content

height: 100vh;

overflow : hidden;