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 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;
}
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>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Not just a meme..but a true thing.
CSS has a ton of cool stuff, from animations to 3D transforms, waiting for us.
Stick around for more simple breakdowns and practical tips. Keep coding, keep experimenting, and watch your CSS skills grow.
Here's a website to practice CSS 👇🏻
That was all for the 2nd part..Stay tuned for the rest 3 parts.
I hope this post has been helpful. If you have any questions, please feel free to leave a comment below.
Happy Coding !
Thank You