CSS - Cascading Style Sheets

White Spaces

• It specifies how white spaces inside an element is handled.
• Values: normal, inherit, nowrap, pre, pre-line, pre-wrap
• The nowrap value makes the text continue on the same line until a <br/> tag is encountered and also collapses all sequences of whitespace into a single whitespace.
• pre: text will only wrap on line breaks and whitespace.
• pre-line: text will wrap when there is a break in code, but extra white space is still ignored.
• pre-wrap: text will wrap when necessary, and on line breaks.

E.g.

{white-space: inherit;}

{white-space: inherit;}

Word wrap

• Allows long words to be broken into the next line.
• Values:
  • normal
  • break-word

E.g.

{
    word-wrap: normal;
    word-wrap: break-word;
}

{
    word-wrap: normal;
    word-wrap: break-word;
}

• It allows you to position an element.
• It can place an element before another and specify what should happen when the element's content is too big.
• Positions can be set with top, left, bottom and right properties. They work differently dependng on the positioning method.
• Static positioning
  • Elements are positioned static by default. It is positioned according to the normal flow of the page.
• Fixed positioning
  • Elements are positioned relative to the browser's window and will not move even if the window is scrolled.

Samples:

{
    position: relative;
    top: 150px;
    left: 50px;

    position: fixed;

    position: static;
}

{
    position: relative;
    top: 150px;
    left: 50px;

    position: fixed;

    position: static;
}

• Float
  • It allows the elements to be pushed/shifted allowing other elements to wrap around it. It is normally used for images.

  {
      float: left;
      width: 120px;
      margin-right: 10px;
  }

  {
      float: left;
      width: 120px;
      margin-right: 10px;
  }

• Clearing
  • The both value is used to clear floats coming from either direction.
  • E.g. clear: both

Overflow Property

• Overflow specifies the behavior that occurs when an element's content overflows the element's box.
• Values: visible (default), scroll, hidden, auto.
  • scroll: In a clipped overflow, a scroll bar is added.
  • hidden: In a clipped overflow, the rest of the content is hidden.

E.g.

{overflow: auto;}

{overflow: auto;}

Z-index Property

• It specifies the stack order of an element (which element should be placed in front of, or behind the others.)
• It works only on positioned elements.
• Assigning a higher value of z-index to an element places in front of the other elements with lower z-index value.

E.g.

{
    z-index: 3;
    position: relative;
}

{
    z-index: 3;
    position: relative;
}

Border Style Examples

none {border-style: none;}
dotted {border-style: dotted;}
double {border-style: double;}
groove {border-style: groove;}
ridge {border-style: ridge;}
inset {border-style: inset;}
hidden {border-style: hidden;}

none {border-style: none;}
dotted {border-style: dotted;}
double {border-style: double;}
groove {border-style: groove;}
ridge {border-style: ridge;}
inset {border-style: inset;}
hidden {border-style: hidden;}

You can specify different borders for different sides using:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Border-collapse Property

• Specifies whether the table borders are collapsed into a single border or separated as default.
• Values:
  • separate
  • collapse
• If the borders are separate, the border-spacing property can be used to change the spacing.

E.g.

table{
    border-collapse: separate;
    border-spacing: 20px 40px;
}

{border-collapse: collapse;}

table{
    border-collapse: separate;
    border-spacing: 20px 40px;
}

{border-collapse: collapse;}

Caption-side Property

• Specifies the position of a table caption.
• Values:
  • top
  • bottom

Sample:

{caption-side: top;}

{caption-side: top;}

Empty-cells Property

• Specifies whether or not to display borders and background on an empty cell in a table.
• Values:
  • show: borders of empty cells are rendered.
  • hide: borders of empty cells are not drawn.

Sample:

{
    border-collapse: separate;
    empty-cells: hide;
}

{
    border-collapse: separate;
    empty-cells: hide;
}

Table-layout Property

• Specifies how the width of table columns are calculated.
• Values
  • auto: When columns or cell width are not explictly set, the column width will be in proportion to the amount of content in the cells that make up the column. (default)
  • fixed: Cell width will not be affected by the amount of content in the cells.

Sample"

{
    table-layout: auto;
    table-layout: fixed;
}

{
    table-layout: auto;
    table-layout: fixed;
}

Border-radius Property

• Used for creating rounded corners.

E.g.

{
    border-radius: 20px;
    background-color: #00ff00;
    color: #ffffff;
}

{
    border-radius: 20px;
    background-color: #00ff00;
    color: #ffffff;
}

• Specified border-radius can be added in the following order: top-left, top-right, bottom-right, bottom-left.

E.g.

{
    border-radius: 0 0 20px 20px;
}

{
    border-radius: 0 0 20px 20px;
}

Background-repeat Property

• Specifies how background images are repeated.
• Values:
  • repeat-x: repeats a background image only horizontally.
  • repeat-y: repeats a background image only vertically.
  • no-repeat: shows image only once. (50% 50% --> from center)

Samples:

{
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
}

{
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-repeat: no-repeat;
}

Background-attachment Property

Values:

• inherit: It will inherit the value from its parent element.
• scroll: It will scroll with the rest of the content.

Sample:

{
    background-attachment: scroll;
    background-attachment: inherit;
}

{
    background-attachment: scroll;
    background-attachment: inherit;
}

Background-size Property

Samples:

{
    background-size: 100px 100px;
    background-size: contain;
    background-size: cover;
}

{
    background-size: 100px 100px;
    background-size: contain;
    background-size: cover;
}

Background-clip Property

• Specifies the painting area of the background.
• Values:
  • border-box
  • padding-box
  • content-box
• Transparency effect is achieved when background-clip: padding-box

Background-position Property

• Used when defining multiple background images.
• The position is separated by comma.
  Sample:

  {
      background-position: left, right;
  }
  
  /*Defining multiple backgrounds*/
  {
      background: url("") left no-repeat, url("") right no-repeat;
  }

  {
      background-position: left, right;
  }
  
  /*Defining multiple backgrounds*/
  {
      background: url("") left no-repeat, url("") right no-repeat;
  }

List-style-type Property

Some values include:

• square
• cicrle
• decimal
• lower alpha
• disc

List-style-image Property

Specifies an image to be used as the list item marker.

List-style-position Property

• Specifies the position of the marker box.
• Values:
  • inside
  • outside

Sample:

{
    list-style-image: url("img.jpg");
    list-style-position: inside;
}

{
    list-style-image: url("img.jpg");
    list-style-position: inside;
}

List-style Property

It is a short hand property for setting list-style-type, list-style-image and list-style-position
E.g.

ul {
    list-style: square outside none;
}

ul {
    list-style: square outside none;
}

• Specifies shadows to elements.
• The order is:
  1. horizontal offset
  2. vertical offset
  3. blur
  4. spread
  5. color

Sample:

{
    box-shadow: 10px 10px #0000ff;
    box-shadow: 10px 10px 5px 5px #f0f0f0;
}

{
    box-shadow: 10px 10px #0000ff;
    box-shadow: 10px 10px 5px 5px #f0f0f0;
}

ra

The two values before the color is blur and spread.
Negative values are allowed for oopsite direction.

• The inset keyword will draw an inner shadow into the box.
  E.g.

{
    box-shadow: inset 10px 10px #000000;
}

{
    box-shadow: inset 10px 10px #000000;
}

Multiple shodows are added by separating them by comma.

• Transparency Effect (opacity) have values between 0 and 1. E.g. opacity: 0;

0 is fully transparent, 1 is fully opaque.

• Supported file types: ".ttf" and ".otf"

Internet Explorer only supports ".eot" files.

• It allows the addition of fonts outside the computer's memory.

Sample:

@font-face {
    font-family: Delicious;
    src: url("Delicious-Roman.otf");
}

/*To fix internet explorer bugs*/
@font-face {
    font-family: Delicious;
    src: url("Delicious-Roman.otf");
    src: url("Delicious-Roman.eot?iefix");
}

@font-face {
    font-family: Delicious;
    src: url("Delicious-Roman.otf");
}

/*To fix internet explorer bugs*/
@font-face {
    font-family: Delicious;
    src: url("Delicious-Roman.otf");
    src: url("Delicious-Roman.eot?iefix");
}

• A pseudo class starts with a colon (:).
• The common ones are :first-child and :last-child.
• The :first-child matches an element that is the first child element.
  E.g.

  <div id='parent'>
      <p>Das</p>
      <p>Orange</p>
  </div>

  <div id='parent'>
      <p>Das</p>
      <p>Orange</p>
  </div>

  /*Affects only the first <p> tag*/
  #parent p:first-child {
      color: #00ff00;
      text-decoration: underline;
  }

  /*Affects only the first <p> tag*/
  #parent p:first-child {
      color: #00ff00;
      text-decoration: underline;
  }

Other Types Of Classes

• ::first-line: The first line of text in the selector.
• ::first-letter: The first letter of the text in a selector.
• ::selection: Selects a portion of an element that is selected by the user.
• ::before: Inserts some content before an element.
• ::after: Inserts some content after an element.

Linear Gradients

• Creates a smooth transition between more than one color.
  E.g.

  {
      background: linear-gradient(deepSkyBlue, black);
  }

  {
      background: linear-gradient(deepSkyBlue, black);
  }

Defining Color Stops

• Done using px, % or em values.
  E.g.

  {
      background: linear-gradient(blue 20%, yellow 30%);
  }

  {
      background: linear-gradient(blue 20%, yellow 30%);
  }

Defining Directions

{
    background: linear-gradient(left, blue, green);
}

{
    background: linear-gradient(left, blue, green);
}

• Other direction values include:
  • bottom
  • right
  • top
  • bottom-right
  • bottom-left
  • top-left
  • top-right

Repeating A Linear Gradient

{
    background: repeating-linear-gradient(blue, green 20px);
}

{
    background: repeating-linear-gradient(blue, green 20px);
}

Radial Gradients

Syntax:

{
    background: radial-gradient(position, shape or size, color-stops);
}

{
    background: radial-gradient(position, shape or size, color-stops);
}

• Positions: left, right, ...
• Shape: ellipse, circle.
• Color-stops: color combinations.

Transition Property

• Specifies the property to be transitioned.
  E.g.

  {
      transition: transform 5s ease-in;
  }

  {
      transition: transform 5s ease-in;
  }

Transition-duration Property

• Specifies the duration over which transitions should occur.

Transition-timing-function Property

• Specifies how the pace of the transition changes over it's duraation.
• Values:
  • ease: It starts slowly, then accelerates quickly.
  • ease-in: Starts slowly, then accelerates, and stops abruptly.
  • ease-out: Starts quickly, but decelerates to a stop.
  • ease-in-out: Similar to ease, but more subtle acceleration and deceleration.
  • linear: constant speed throughout the animation; often best for color or opacity changes.

Transition-delay Property

• Specifies a delay (in seconds) for the transition effect.

Transform Property

Allows elements to change shape, size and position.

{
    transform: rotate(360deg);
}

{
    transform: rotate(360deg);
}

Transform-origin Property

• Allows you to change the position of trnasformed elements.
• The default value is 50% 50% which is the center of the element.

It must be used with transform.

Sample:

{
    transform-origin: 25% 75%;
}

{
    transform-origin: 25% 75%;
}

Translate Method

• Moves an element from its current position.
  Syntax:

  /*Syntax*/
  {
      transform: translate(x, y);
  }
  
  /*example*/
  {
      transform: translate(100px, 50px);
  }

  /*Syntax*/
  {
      transform: translate(x, y);
  }
  
  /*example*/
  {
      transform: translate(100px, 50px);
  }

Skew Method

• Turns an element along the x-axis and y-axis by given angles.
  E.g.

  {
      transform: skew(39deg);
      /*note: If the second angle is not given, it uses a default value of 0*/
  }

  {
      transform: skew(39deg);
      /*note: If the second angle is not given, it uses a default value of 0*/
  }

Scale Method

• It increases or decreases the size of an element, according to the parameters given for width and height.
  E.g.

  {
      width: 200px;
      height: 110px;
      transform: scale(0.7, 0.7);
      /*If only one parameter is given, it applies to both wodth and height*/
  }

  {
      width: 200px;
      height: 110px;
      transform: scale(0.7, 0.7);
      /*If only one parameter is given, it applies to both wodth and height*/
  }

Multiple transforms can be added by separating them with spaces.

3D-transforms

• It allows you to move the element horizontally (translateX), vertically (translateY) and into or out of the screen (translateZ), using any css length (px, em, %, ...).
• Positive values moves the elements toward the viewer and negative values away.

E.g.

{
    transform: translateX(20px);
    transform: translateY(100px);
    transform: translateZ(45px);
}

{
    transform: translateX(20px);
    transform: translateY(100px);
    transform: translateZ(45px);
}

Translate-3d

It allows you to pass the x, y and z offsets at once.

{
    transform: translate3d(10px, 20px, 5em);
}

{
    transform: translate3d(10px, 20px, 5em);
}

Scale-3d & Rotate-3d

{
    /*For scaling elements in 3D.*/
    transform: scale3d(0.2, 0.1, 1);
    
    /*For rotating elements in 3D*/
    transform: rotate3d(30deg);
}

{
    /*For scaling elements in 3D.*/
    transform: scale3d(0.2, 0.1, 1);
    
    /*For rotating elements in 3D*/
    transform: rotate3d(30deg);
}

Perspective Property

• It affects only 3D-transformed elements.
• It defines how the depth of the 3D scene is rendered. (It is the distance of the viewer from the object.).
• It is the child elements that get the perspective view not the element itself.

Sample:

div.emptydiv {
    perspective: 100px;
}
div.greendiv {
    transform: rotateX(45deg);
}

div.emptydiv {
    perspective: 100px;
}
div.greendiv {
    transform: rotateX(45deg);
}

@keyframes Rule

• The animation will gradually change from the current style to the new style at certain times.
• To get the animation to work, you must bind the animation to an element.
  Syntax:

  @keyframes name {
      %{Styles}
  }
  
  /*Example*/
  div {
      width: 10px;
      animation-name: color;
      animation-duration: 1s;
  }
  @keyframes color {
      0% {background-color: red;}
      50% {background-color: green;}
      100% {background-color: yellow;}
  }

  @keyframes name {
      %{Styles}
  }
  
  /*Example*/
  div {
      width: 10px;
      animation-name: color;
      animation-duration: 1s;
  }
  @keyframes color {
      0% {background-color: red;}
      50% {background-color: green;}
      100% {background-color: yellow;}
  }

If the animation-duration is not specified, the animation will have no effect.

Animation-timing-function Property

• Specifies the speed curve of an animation.
• Values:
  • ease: Slow start, then fast, then end slowly.
  • linear: Same speed from start to end.
  • ease-in: With slow start.
  • ease-out: With slow end.
  • ease-in-out: With a slow start and end.

E.g.

{
    animation-timing-function: ease;
}

{
    animation-timing-function: ease;
}

Animation-name

• Defines animation name.

{
    animation-name: name_of_animation;
}

{
    animation-name: name_of_animation;
}

Animation-delay

• Defines a delay before the animation starts.

{
    animation-delay: 5s;
}

{
    animation-delay: 5s;
}

Animation-iteration-count

• Determines the number of times an animation repeats.
• To repeat forever, use infinite.

{
    animation-iteration-count: 5;
    animation-iteration-count: infinite;
}

{
    animation-iteration-count: 5;
    animation-iteration-count: infinite;
}

Animation-direction

• Indicates how the keyframes rule should be applied
• Values:
  • normal: Plays from 0% to 100%.
  • reverse: Plays from 100% to 0%.
  • alternate: Runs forward, backward and forward.
  • alternate-reverse: Runs backward, forward and backward again.

Order Of Writing Animations

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction

• It allows you to apply graphical effects on images, background and borders.
• filter functions include: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), inver(), opacity(), saturate() and sepia().

Drop-shadow function

drop-shadow(w h b c) creates a shadow effect that extends beyond an image for the width(w), height(h), blur(b) and color(c).

{filter: drop-shadow(5px 6px 2px blue);}

{filter: drop-shadow(5px 6px 2px blue);}

Negative values are allowed for w and h.

Alpha

Syntax:

{
    filter: alpha(opacity=x);
    /*where 0 <= x >= 100*/
}

/*example*/
{
    filter: alpha(opacity=50);
}

{
    filter: alpha(opacity=x);
    /*where 0 <= x >= 100*/
}

/*example*/
{
    filter: alpha(opacity=50);
}

Grayscale Function

Converts an image to grayscale with values from 0% to 100%.

{filter: grayscale(50%);}

{filter: grayscale(50%);}

Sepia Function

Converts an image to sepia with values 0% to 100%.

{filter: sepia(70%);}

{filter: sepia(70%);}

Saturate Function

Controls color saturation for an image. 100% is the original image.

{filter: saturate(50%);}

{filter: saturate(50%);}

Hue-rotate Function

• Applies a hue rotation (based on the color circle) to an image.
• It takes an angle as a value.
• 0deg and 360deg leaves the image unchanged.

{filter: hue-rotation(180deg);}

{filter: hue-rotation(180deg);}

Invert Function

• Inverts the color of an image to make dark places bright and bright places dark.
• Values are 0% to 100%. 100% is completely converted to a photographic negative.

{filter: invert(70%);}

{filter: invert(70%);}

Opacity Function

Allows you to create a completely transparent image. From 0% to 100%. 100% is the original image.

{filter: opacity(70%);}

{filter: opacity(70%);}

Brightness Function

• Adjusts the brightness of an image from 0% to 100%.
• 0% results in a completely black image.
• 100% results in the original images.
• Over 100% results in a brighter images.

{filter: brightness(150%);}

{filter: brightness(150%);}

Contrast Function

• Adjusts the contrast of an image.
• A value under 100% decreases the contrast while over 100% increases it.
• 0% will make the image completely gray.

{filter: contrast(104%);}

{filter: contrast(104%);}

Blur Function

• Applies a blur effect to an image.
• It defines how many pixels on the screen blend into each other.
• 0 leaves the image completely unchanged.

{filter: blur(2px);}

{filter: blur(2px);}

Multiple filters can be added by separating with spaces.

Circle with CSS

.circle {
    border: 1px solid blue;
    height: 100px;
    width: 100px;
    border-radius: 50px;
}
/* Note that border-radius is half of width and height size */

.circle {
    border: 1px solid blue;
    height: 100px;
    width: 100px;
    border-radius: 50px;
}
/* Note that border-radius is half of width and height size */

• Add (border: 0;) in the style to remove borders around images as a link.

Browser Prefixes