CSS

SYNTAX OF CSS

NOTE: .para is selector, {} declaration block, background: ; is property and red is value.

Adding CSS in to Your Page

There are 3 types of ways to add CSS to the mark up.
1) INLINE CSS : It is added to the elements directly using style attributes.
2) INTERNAL CSS : It is kept inside the head tag in style tag.
3) EXTERNAL CSS : It is kept separately inside a CSS stylesheet.

NOTE: In External CSS you have to made a external file with extantion .css , and write css code there.

Selectors In CSS

*CSS selectors are used to find the elements whose property will be set.
*Selectors are used to target the HTML elements.
*Selectors make it easy for us to easily target single/multiple HTML elements in the markup.

NOTE: Here Class is multiple but Id is unique.

Fonts In CSS

*font-family to set different font .
*font-size to set font size.
*line-height it separate a line from its previous line.
*font-weight it use to set font weight like bold.
*font-style it use to set a style of a font like italic.

NOTE: Apply it after making a 'p' tag.

Colors In CSS

*blue You can set it by Name.
*rgb(0,0,255) You can set it by RGB Value.
*#0000ff You can set it by Hexadecimal Value.

NOTE: Apply this in our Code Editor.

Borders And Backgrounds In CSS

* You can set border width, style, color and radius
* You can set background-color, background- image, background-position , etc.

NOTE: Apply this in our Code Editor.

CSS Box Model, Margin and Padding

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

NOTE: Apply this in our Code Editor.

Float And Clear

The CSS float property specifies how an element should float. The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float property can have one of the following values: left, right, none, inherit
The clear property can have one of the following values: left, right, none, inherit
overflow is also a css property you can use : visible, hidden, auto, scroll

NOTE: Apply this in our Code Editor.

Style Link and Button

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

NOTE: Apply this in our Code Editor.

Style Link and Button

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

NOTE: Apply this in our Code Editor.

CSS Display Property

The display property is the most important CSS property for controlling layout.
The default display value for most elements is block or inline.

NOTE: Apply this in our Code Editor.

CSS Position

It specifies the position of your element.
Absolute:- position the elements relative to the position of its first parent.
Relative:- position the elements to its normal position and will leave a gap at its normal positon.
Fixed:- position the elements relative to the browser window.
Sticky:- position the elements to its normal position but when we scroll than it moves towards top & fixed .

NOTE: Apply this in our Code Editor.

CSS Visibility

When we wants to hide the element but that will show its empty space than we use visibility:hidden;
If you wants to also remove the empty space than you can use display:none;

NOTE: Apply this in our Code Editor.

Z-INDEX IN CSS

The z-index property specifies the stack order of an element.

NOTE: Z-index only work for position: relative, absolute, fixed, sticky ;
Apply this in our Code Editor.

CSS FLEX-BOX

* Flexbox is a one-dimensional layout methode for laying out items in rows or columns.
* CSS flexbox is a better way to align items into a container.
* We can say Flexbox = Flexible + Box .

NOTE: Apply this in our Code Editor.
For more information you can go to Click Me and follow the code.

Responsive Design ( Media Queries )

* Endless new resolutions & devices are difficult to support separately for a Web Developer.
* Responsive design is a way for a web developer to make his wesite adapt to all the devices & resolution.
* Various way to get a responsive design.
1. Setting up the viewport.
2. Use max-width / max-height.
3. Using rem/vh/vw like units over px.

NOTE: Apply this in our Code Editor.

Pseudo Selectors In CSS

When we wants t target a specific tag than we use pseudo selectors . There is various methodes avilable, go to bellow example.

NOTE: Apply this in our Code Editor.

Box And Text Shadow

To give shadow in a block we use box-shadow.
To give shadow in any text we use text-shadow.

NOTE: Apply this in our Code Editor.

CSS Variables

When we wants to use a property many times than we create a specific variable for that and use that again and again.
This is more useful during aplication of media queries.

NOTE: Apply this in our Code Editor.

Animation With CSS

CSS allows animation of HTML elements without using JavaScript or Flash!
To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

NOTE: Apply this in our Code Editor.

Transition With CSS

CSS transitions allows you to change property values smoothly, over a given duration.

NOTE: Apply this in our Code Editor.

Transform With CSS

CSS transforms allow you to move, rotate, scale, and skew elements.

NOTE: Apply this in our Code Editor.

CSS Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

NOTE: Apply this in our Code Editor.
For more information about CSS GRID you can go Click Me and follow the code.


CODE OUTPUT