CSS
-Cascading Style Sheet
-Styles cascade or flow down the web page
-CSS is used to style/color the html
-A CSS file is a text file saved with a .css file extension

CSS can be included in an HTML document in 3 ways:

Css syntax:

Image taken from https://www.w3schools.com/css/selector.gif

Example html doc with CSS

Copy and paste the following in a .html file

<!DOCTYPE html>
<html>
<head>

<style>
/*This is a Comment  in css*/

body { 
  background-color: lightblue;
}

h1, h2 { 
  color: white; 
  text-align: center;
}

p { 
  font-family: verdana; 
  font-size: 20px;
}

#para1 {
  text-align: center;  color: red;
}

.large {
  font-size: 200%;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

<p id="para1">This is a paragraph with an id para1</p>

<h1 class="large">h1 heading with class large</h1>

<h2>h2 heading</h2>

</body>
</html>

CSS COLORS

Colors can be specified by:

A Color picker is useful

Science of colors

A color can be set to "transparent"

Backgrounds

Property Description
background Sets all the background properties below in one declaration
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-size Specifies the size of the background image(s)
background-repeat Sets how a background image will be repeated
background-origin Specifies where the background image(s) is/are positioned
background-clip Specifies the painting area of the background
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page

Styling Links, Lists and Tables

CSS Icons

CSS Cursors

<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

Mouse over the words to change the cursor.

auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait

CSS Borders, Margins, Padding and Outline

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:

<style>
#div1 { 
  padding: 30px;
  border:30px solid blue;
  outline:30px solid lime;
}
</style>

<div id="div1">Content</div>

Content

Explanation of the different parts:

The box model allows us to add a border around elements, and to define space between elements. 

Display

Positioning html Elements

Overflow and Float

Styling Forms

CSS Gradients, Shadows and Text Effects

CSS 2D Transforms

CSS 2D Transform Methods
Function Description
rotate(angle) Rotate an element -360 to 360 degrees
translate(x,y) Moves the element along the X- and the Y-axis
translateX(n) Moves the element along the X-axis (horizontally)
translateY(n) Moves the element along the Y-axis (vertically)
scale(x,y) Scales (magnifies) the element width and height
scaleX(n) Scales (magnifies) the element's width
scaleY(n) Scales (magnifies) the element's height
skew(x-angle,y-angle) Skews (twists) the element along the X- and the Y-axis
skewX(angle) Skews (twists) the element along the X-axis
skewY(angle) Skews (twists) the element along the Y-axis
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
-Combines the translation methods into one

CSS 3D Transforms

CSS 3D Transform Methods
Function Description
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation along the X,Y and Z axis
translate3d(x,y,z) Moves the element along the X, Y and Z axis
translateZ(z) Moves the element along the Z-axis (forwards and backwards into the screen), perspective must be set for the parent element
scale3d(x,y,z) Defines a 3D scale transformation
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
-Defines a 3D transformation, using a 4x4 matrix of 16 values

CSS Transitions

Property Description
transition A shorthand property for setting the four transition properties below into a single property
transition-delay Specifies a delay (in seconds) for the transition effect
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect 

<style>
.simple { 
  /*transition: property duration timing-function delay*/ 
  transition: background-color 3s linear 0.5s;
}
.simple:hover { 
  background-color: lime;
}
</style>

<p class="simple" >Mouse over me!</p>

Mouse over me!


<style>
.transi { 
  /*CSS Property values before transistion*/
  width: 250px;
  height: 250px;
  padding:30px;
  text-align:center;
  line-height: 250px;
  border:0px solid black;
  overflow:hidden;

  /*CSS properties and time to transistion*/
  transition: background-color 2s,  
              color 3s,  
              font-size 4s,  
              border 3s,  
              width 2s,  
              font-weight 2s,
              height 2s,
              line-height 2s;			  
}

/*CSS Property values to transistion to when mouse is hovered*/
.transi:hover {
  background-color: blue;
  color:lime;
  font-size: 2em;
  border: 30px solid lime;
  width: 450px;
  font-weight: bold;
  height:500px;
  line-height: 500px;
}
</style>
<p class="transi">Mouse over me!</p>

Mouse over me!


CSS Animations

Property Description
@keyframes Specifies the animation code and name
animation A shorthand property for setting all the animation properties below
animation-delay Specifies a delay before the start of an animation
animation-direction
Specifies whether an animation should be played forwards, backwards or in alternate cycles.
The animation-direction property can have the following values:
  • normal - The animation is played as normal (forwards). This is default
  • reverse - The animation is played in reverse direction (backwards)
  • alternate - The animation is played forwards first, then backwards
  • alternate-reverse - The animation is played backwards first, then forwards
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode
Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
The animation-fill-mode property can have the following values:
  • none - Default value. Animation will not apply any styles to the element before or after it is executing
  • forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
  • backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
  • both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
animation-iteration-count Specifies the number of times an animation should be played.To have the animation repeat forever set to infinite
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function
Specifies the speed curve of the animation
The animation-timing-function property can have the following values:
  • ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear - Specifies an animation with the same speed from start to end
  • ease-in - Specifies an animation with a slow start
  • ease-out - Specifies an animation with a slow end
  • ease-in-out - Specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function
 

<style>
#simple1 {
/*
  animation-name: anyname  
  animation-duration: 1s 
  animation-timing-function: optional - default ease 
  animation-delay: optional - default 0s 
  animation-iteration-count: infinite; 
  animation-direction: optional default normal;
*/  
  animation: anyname 0.4s infinite;
}
/*Define your animation in @keyframe*/
@keyframes anyname { 
  from {background-color:white;} /*start*/ 
  to {background-color:blue;} /*end*/
}
</style>

<p id="simple1">ANIMATION 1</p>

ANIMATION 1


<style>
#simple2 {
  animation: simple2 1s linear infinite;
}
@keyframes simple2 { 
  0% {background-color:red; } 
  25% {background-color:yellow;} 
  50% {background-color:blue;} 
  75% {background-color:green;} 
  100% {background-color:red;}
}
</style>

<p id="simple2">ANIMATION 2</p>

ANIMATION 2


<style>
#simple3 { 
  width: 300px; 
  text-align:center; 
  animation: simple3 4s linear infinite;
}
@keyframes simple3 { 
  0% {background-color:red;    
      transform:rotate(0deg);}
  25% {background-color:yellow;} 
  50% {background-color:blue;}
  75% {background-color:green;}
  100% {background-color:red;   
        transform:rotate(360deg);}
}
</style>
 
<p id="simple3">ANIMATION 3</p>

ANIMATION 3


<style>
#simple4 { 
  width: 650px; 
  padding: 50px; 
  text-align:center; 
  animation: simple4 1s linear infinite; 
}

#simple4:hover {
  animation: simplehover4 0.3s linear 3;
}

@keyframes simple4 { 
  0% {background-color:red;    
  font-size:16px;} 
  25% {background-color:yellow;} 
  50% {background-color:blue;} 
  75% {background-color:green;} 
  100% {background-color:red;    
        font-size:50px;}
}

@keyframes simplehover4 { 
  0% {background-color:red;    
      transform:rotate(0deg);} 
  25% {background-color:yellow;} 
  50% {background-color:blue;} 
  75% {background-color:green;} 
  100% {background-color:red;    
  transform:rotate(360deg);}
}
</style>

<p id="simple4" onmouseover="document.getElementById('ID').play();"
onmouseleave="document.getElementById('ID').pause();">ANIMATION 4- hover over me!</p>

<audio id="ID" style="display:none;"> 
  <source src="http://sanjay.is-best.net/LandRover.mp3" type="audio/mp3">
</audio>

ANIMATION 4- hover over me!


Website layout , Flexbox

CSS Media Queries