Web Styling .2

We've covered the basics of CSS, and now it's time to level up. In this second part, we're going beyond the basics and exploring some more CSS properties.

Properties >

background-color	Specifies the background color to be used
background-image	Specifies ONE or MORE background images to be used
background-position	Specifies the position of the background images
background-size	Specifies the size of the background images
background-repeat	Specifies how to repeat the background images
background-origin	Specifies the positioning area of the background images
background-clip	Specifies the painting area of the background images
background-attachment	Specifies whether the background images are fixed or scrolls with the rest of the page
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Background color:

selector{
      background-color: color;
}

Background repeat:

selector{
   background-repeat: repeat;
}

Background image:

selector{
        background-image: url('image-url');
}

Background Position:

selector{
     background-position: property-value;
}

Background size:

selector{
    background-size: propery-value;
}

Text Decoration:

selector {
    text-decoration: value;
}

Text Alignment:

There are four values for text alignment:

left: align the text to the left.
centre: align the text to the centre.
right: align the text to the right.
justify: spread the text evenly between the left and right margins.

selector{
    text-align: value;
}

Text Transformation:

There are four values for text-transform:

uppercase: Transform text to uppercase (all capital letters).
lowercase: transform text to lowercase (all small letters).
capitalise: capitalise the first character from each word.
none: To remove text transformation.

selector {
    text-transform: value;
}

Text Shadow:

selector{
    text-shadow:  Horizontal offset, vertical offset, blur radius, color;
}

CSS Video Embedding:

<body>
    <video controls>
        <source src="./Sigma Web Development Course.mp4" type="video/mp4"> Your browser does not support the video tag.
    </video>
</body>

# style.css
video {
            width: 500px;
            height: 200px;
}

CSS Buttons:

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

CSS Buttons | Web design, Web design quotes, Web app design

CSS Z-index:

When there are multiple overlapping elements, the z-index helps in deciding the order of their visibility.

The element having the highest value of z-index is shown first, followed by the other elements.

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

nanou • on X: "z-index is a magic property you can use in CSS! https://t.co/eBcD1ZRtoA" / X

CSS Cursor:

It is used to define the type of mouse cursor when the mouse pointer is on the element. It allows us to specify the cursor type, which will be displayed to the user.

Values	Usage
alias	It is used to display the indication of the cursor of something that is to be created.
auto	It is the default property in which the browser sets the cursor.
all-scroll	It indicates the scrolling.
col-resize	Using it, the cursor will represent that the column can be horizontally resized.
cell	The cursor will represent that a cell or the collection of cells is selected.
context-menu	It indicates the availability of the context menu.
default	It indicates an arrow, which is the default cursor.
copy	It is used to indicate that something is copied.
crosshair	In it, the cursor changes to the crosshair or the plus sign.
e-resize	It represents the east direction and indicates that the edge of the box is to be shifted towards right.
ew-resize	It represents the east/west direction and indicates a bidirectional resize cursor.
n-resize	It represents the north direction that indicates that the edge of the box is to be shifted to up.
ne-resize	It represents the north/east direction and indicates that the edge of the box is to be shifted towards up and right.
move	It indicates that something is to be shifted.
help	It is in the form of a question mark or ballon, which represents that help is available.
None	It is used to indicate that no cursor is rendered for the element.
No-drop	It is used to represent that the dragged item cannot be dropped here.
s-resize	It indicates an edge box is to be moved down. It indicates the south direction.
Row-resize	It is used to indicate that the row can be vertically resized.
Se-resize	It represents the south/east direction, which indicates that an edge box is to be moved down and right.
Sw-resize	It represents south/west direction and indicates that an edge of the box is to be shifted towards down and left.
Wait	It represents an hourglass.
<url>	It indicates the source of the cursor image file.
w-resize	It indicates the west direction and represents that the edge of the box is to be shifted left.
Zoom-in	It is used to indicate that something can be zoomed in.
Zoom-out	It is used to indicate that something can be zoomed out.

<html>  
   <head>  
   </head>  
   <style>  
      body{  
         background-color: lightblue;  
         color:green;  
         text-align: center;  
         font-size: 20px;  
      }
   </style>  
   <body>  
      <p>See your cursor change when </p>  
      <div style = "cursor:alias">alias Value</div>        
      <div style = "cursor:auto">auto Value</div>  
      <div style = "cursor:all-scroll">all-scroll value</div>  
      <div style = "cursor:col-resize">col-resize value</div>  
      <div style = "cursor:crosshair">Crosshair</div>  
      <div style = "cursor:default">Default value</div>  
      <div style = "cursor:copy">copy value</div>  
      <div style = "cursor:pointer">Pointer</div>  
      <div style = "cursor:move">Move</div>  
      <div style = "cursor:e-resize">e-resize</div>  
      <div style = "cursor:ew-resize">ew-resize</div>  
      <div style = "cursor:ne-resize">ne-resize</div>  
      <div style = "cursor:nw-resize">nw-resize</div>  
      <div style = "cursor:n-resize">n-resize</div>  
      <div style = "cursor:se-resize">se-resize</div>  
      <div style = "cursor:sw-resize">sw-resize</div>  
      <div style = "cursor:s-resize">s-resize</div>  
      <div style = "cursor:w-resize">w-resize</div>  
      <div style = "cursor:text">text</div> 
      <div style = "cursor:wait">wait</div>  
      <div style = "cursor:help">help</div>  
      <div style = "cursor:progress">Progress</div>  
      <div style = "cursor:no-drop">no-drop</div>  
      <div style = "cursor:not-allowed">not-allowed</div>  
      <div style = "cursor:vertical-text">vertical-text</div>  
      <div style = "cursor:zoom-in">Zoom-in</div>  
      <div style = "cursor:zoom-out">Zoom-out</div>  
   </body>  
</html>

CSS icons:

These are the images or symbols used in any computer interface refer to an element. It is a graphical representation of a file or program that helps the user to identify about the type of file quickly.

Using the icon library is the easiest way to add icons to our HTML page.

Some of the icon libraries such as Bootstrap icons, Font Awesome icons, and Google icons that can be used in CSS easily.

Bootstrap icons: We can add the bootstrap icons in our HTML page using the link given below in the <head></head> section.

<link rel="stylesheet"

<!DOCTYPE html>   
<html> 
<head>   

<title>CSS Icons</title>  

<link rel="stylesheet"   

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  

<style>  
body{  
text-align:center;  
background-color:lightblue;  
}  

.glyphicon{  
color:red;  
font-size:50px;  
margin:10px;  
}  
</style>  

</head>   
<body style="text-align:center">   
<h1>Bootstrap icons</h1>  
      <i class="glyphicon glyphicon-cloud"></i>   
      <i class="glyphicon glyphicon-file"></i>   
      <i class="glyphicon glyphicon-heart"></i>   
      <i class="glyphicon glyphicon-user"></i>   
      <i class="glyphicon glyphicon-thumbs-up"></i>   
      <i class="glyphicon glyphicon-remove"></i>  
      <i class="glyphicon glyphicon-envelope"></i>      
</body>   
</html>