CSS Important properties Notes.md

CSS Important Properties

CSS Colors

• Color Names
• RGB
• HEX
• HSL
• RGBA
• HSLA values

1. Color Names

HTML supports 140 standard color names. eg. Tomato,red,black

2. RGB Value

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

3. HEX Value

In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

4. HSL Value

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

5. RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

6. HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

CSS Backgrounds

CSS background properties:

• background-color
• background-image
  • background-image: url("paper.gif");
• background-repeat
  • repeat-x
  • repeat-y
  • no-repeat
• background-attachment
  • To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:
• background-position
  • background-position: right top;

CSS Box Model

Explanation of the different parts:

• 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

All CSS Text Properties

• color: Sets the color of text
• direction Specifies the text direction/writing direction
• letter-spacing Increases or decreases the space between characters in a text
• line-height Sets the line height
• text-align Specifies the horizontal alignment of text
• text-decoration Specifies the decoration added to text
• text-indent Specifies the indentation of the first line in a text-block
• text-shadow Specifies the shadow effect added to text
• text-transform Controls the capitalization of text
• text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
• vertical-align Sets the vertical alignment of an element
• white-space Specifies how white-space inside an element is handled
• word-spacing Increases or decreases the space between words in a text

CSS position

The position property specifies the type of positioning method used for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

CSS Overflow

The overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.

The overflow property has the following values:

• visible - Default. The overflow is not clipped. It renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
• auto - If overflow is clipped, a scrollbar should be added to see the rest of the content

The float Property

The float property is used for positioning and layout on web pages.

The float property can have one of the following values:

• left - The element floats to the left of its container
• right- The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text). This is default
• inherit - The element inherits the float value of its parent

The clear Property

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

The clear property can have one of the following values:

• none - Allows floating elements on both sides. This is default
• left - No floating elements allowed on the left side
• right- No floating elements allowed on the right side
• both - No floating elements allowed on either the left or the right side
• inherit - The element inherits the clear value of its parent

The most common way to use the clear property is after you have used a float property on an element.

The clearfix Hack

If an element is taller than the element containing it, and it is floated, it will "overflow" outside of its container: Solution 1:

.clearfix {
    overflow: auto;
}

Solution 2:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

box-sizing

You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break.

* {
    box-sizing: border-box;
}

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

Few Pseudo classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked element
:disabled	input:disabled	Selects every disabled element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:focus	input:focus	Selects the element that has focus
:hover	a:hover	Selects links on mouse over
:link	a:link	Selects all unvisited links
:nth-child(n)	p:nth-child(2)	Selects every element that is the second child of its parent
:visited	a:visited	Selects all visited links

All CSS Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Selector	Example	Example description
::after	p::after	Insert content after every element
::before	p::before	Insert content before every element
::first-letter	p::first-letter	Selects the first letter of every element
::first-line	p::first-line	Selects the first line of every element
::selection	p::selection	Selects the portion of an element that is selected by a user

CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

CSS Attribute Selectors

• CSS [attribute] Selector : selector is used to select elements with a specified attribute.
• CSS [attribute="value"] Selector : selector is used to select elements with a specified attribute and value.
• CSS [attribute~="value"] Selector : selector is used to select elements with an attribute value containing a specified word.
• CSS [attribute|="value"] Selector : selector is used to select elements with the specified attribute starting with the specified value.
• CSS [attribute^="value"] Selector : selector is used to select elements whose attribute value begins with a specified value.
• CSS [attribute$="value"] Selector : selector is used to select elements whose attribute value ends with a specified value.
• CSS [attribute*="value"] Selector : selector is used to select elements whose attribute value contains a specified value.

Advance CSS

CSS border

border-radius

The CSS border-radius property defines the radius of an element's corners.

border-image

With the CSS border-image property, you can set an image to be used as the border around an element.

Multiple Backgrounds

  #example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

#example2 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines two types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

Linear Gradients

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

//top to bottom
#grad {
    background: linear-gradient(red, yellow);
}

//Left to Right
#grad {
  background: linear-gradient(to right, red , yellow);
}

//diagonally from top left to bottom right
#grad {
  background: linear-gradient(to bottom right, red, yellow);
}

//using angle background: linear-gradient(angle, color-stop1, color-stop2);
#grad {
  background: linear-gradient(-90deg, red, yellow);
}

Radial Gradients - Diagonal

#grad {
  background: radial-gradient(circle, red, yellow, green);
}

CSS Shadow

With CSS you can add shadow to text and to elements.

In this chapter you will learn about the following properties:

• text-shadow
• box-shadow

Example Text Shadow

h1 {
    text-shadow: 2px 2px;
}
//with color
h1 {
    text-shadow: 2px 2px red;
}
// multiple shadow
h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Example box-shadow

div {
    box-shadow: 10px 10px grey;
}

CSS Text Effects

CSS Text Overflow, Word Wrap, and Line Breaking Rules

• text-overflow
• word-wrap
• word-break

text-overflow

• text-overflow: clip; // to clip
• text-overflow: ellipsis; // to show .....

word-wrap

• word-wrap: break-word; // to break the word in next line

Web Fonts

Web fonts allow Web designers to use fonts that are not installed on the user's computer. Your "own" fonts are defined within the CSS @font-face rule.

How to use

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

CSS 2D Transforms

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

translate

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

rotate

div {
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg);
}

scale

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

skewX

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}

CSS Transitions

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

div {
    -webkit-transition: width 2s, height 4s; /* Safari */
    transition: width 2s, height 4s;
}

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

div {
    transition: width 2s linear 1s;
}

CSS Animations

CSS animations allows animation of most HTML elements without using JavaScript or Flash!

What are CSS Animations? An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

Example 2 :

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

CSS Flexbox

CSS Media Queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Media queries can be used to check many things, such as:

• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {
    CSS-Code;
}

Example

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}