CSS stands for Cascading Style Sheets & in this Learn CSS For WordPress tutorial we will learn CSS from beginning.
In our previous Learn HTML For WordPress tutorial we have learned basic HTML & in this Learn CSS For WordPress tutorial we will use those to implement CSS. Using CSS we can design websites based on graphic design files like PSD (Photoshop Design), AI (Adobe Illustrator) etc. We can make website responsive using CSS as well that will work in different devices & screen sizes.
So at first we will write HTML code & then will use CSS to make it beautiful.
Here is a visualization:
Prerequisites
HTML For Beginners tutorial.
CSS Editor
Before starting CSS coding you can install one editor below:
- Notepad++ (I will use this software for editing)
- NetBeans
- Sublime Text
- Notepad (your computer default editor)
In our previous Learn HTML For WordPress tutorial we have learned some CSS beside HTML & here we will learn CSS more.
Creating our first CSS example
At first let’s create a HTML file named first_css_example.html & then add below code:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
h2 {
color: orange;
}
</style>
</head>
<body>
<h2>This is a Heading<h2>
</body>
</html>
In this code, inside <style></style> tag for h2 color is set to orange.
So output will be below:
Here h2 is selector, color is property & orange is value.
CSS Selectors
CSS selectors will be used to select & design HTML elements.
CSS element Selector
CSS element selector will select HTML elements.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is a paragraph<p>
</body>
</html>
In this example, p is a HTML element & inside <style></style> tag p is used to make it red color.
Below the output:
CSS ID Selector
CSS ID selector will be used to select ID attribute of a HTML element. Hash (#) sign will be used to select it.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
#paragraphOne {
color: black;
}
</style>
</head>
<body>
<p id="paragraphOne">This is a paragraph<p>
</body>
</html>
In this example, paragraphOne is an ID for p element & inside <style></style> tag #paragraphOne is used to make it black color.
Below the output:
We can include p before #paragraphOne like below example & it will show same result.
p#paragraphOne {
color: black;
}
As ID is unique within a page, so this method will be more useful in CSS class selector.
CSS class Selector
CSS class selector will be used to select class attribute of a HTML element. Dot (.) sign will be used to select it.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
.contentColor {
color: orange;
}
</style>
</head>
<body>
<h2 class="contentColor">This is heading</h2>
<p class="contentColor">This is paragraph</p>
</body>
</html>
In this example, contentColor is a class for both h2 & p element & inside <style></style> tag .contentColor is used to make it orange color.
class name is not unique like ID, so we can use same class name as many we want to sue.
Below the output:
If we want to use different color for h2 & p tag but with same class name contentColor then below an example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
h2.contentColor {
color: orange;
}
p.contentColor {
color: red;
}
</style>
</head>
<body>
<h2 class="contentColor">This is heading</h2>
<p class="contentColor">This is paragraph</p>
</body>
</html>
So here h2.contentColor is used to make h2 orange color & p.contentColor is used to make p red color.
Below the output:
If HTML element have more than one class then below another example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
.color {
color: orange;
}
.size {
font-size: 30px;
}
</style>
</head>
<body>
<h2 class="color size">This is heading</h2>
</body>
</html>
Here h2 element have two different class (color & size). So color class is used to make h2 orange & size class is used to make font-size 30px.
Below the output:
CSS Universal Selector
CSS Universal Selector will be used to select all the HTML elements within a page. Star (*) sign will be used to select it.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
So here * sign is used to select all HTML elements & color will be red for all.
Below the output:
CSS Grouping Selector
CSS Grouping Selector will be used to select all the HTML elements with the same style & in this method CSS code will be minimized.
Here is an example without CSS Grouping Selector:
h2 {
color: red;
}
p {
color: red;
}
Here h2, p have same style color: red & we can write this style using CSS Grouping Selector. Comma (,) will be used to group selector.
Below the example with CSS Grouping Selector:
h2, p {
color: red;
}
So here is the overall code:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
h2, p {
color: red;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
Below the output:
CSS Descendant Selector
CSS Descendant Selector will be used to select HTML elements anywhere nested within it. Can be a direct child or multi level child elements. It will be written using a white space between two selectors.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
ul a {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</body>
</html>
So here ul a means all a inside ul will be selected & as it’s color is set to red, so a color will be red.
Output will be like this:
CSS Child Selector
For CSS Descendant Selector it was to select direct or multi level child but for CSS Child Selector it will select direct child only. It will be written using a greater than (>) sign between two selectors.
For better understanding we will use same example as CSS Descendant Selector:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
ul > a {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">List item 1</a></li>
<li><a href="#">List item 2</a></li>
<li><a href="#">List item 3</a></li>
</ul>
</body>
</html>
For CSS Descendant Selector it was ul a but for CSS Child Selector it’s written as ul > a. This means all direct child a for ul will be selected & it’s color will be red.
Do you think a color will be red? Take some more time to think 🙂
Let me show you the output first:
It’s showing default a color but not red color. Hope you already pointed out the problem.
Here a is not direct child for ul but it’s direct child for li & li is direct child for ul.
So we should write like this:
ul > li > a {
color: red;
}
Or can write like this as well:
li > a {
color: red;
}
Both code will work & will give you actual output & below the output:
CSS Adjacent Sibling Selector
CSS Adjacent Sibling Selector will be used to select sibling elements, that means HTML elements at the same level & one element have to be immediately after another element. It will be written using a plus (+) sign between two selectors.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
h2 + p {
color: orange;
}
ul + p {
color: red;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph one</p>
<p>This is paragraph two</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<p>This is paragraph three</p>
<p>This is paragraph four</p>
</body>
</html>
In this example, h2 + p will select p element that is immediately after h2 & ul + p will select p element that is immediately after ul.
Below the output:
CSS General Sibling Selector
CSS General Sibling Selector is almost same as CSS Adjacent Sibling Selector & main difference is for CSS General Sibling Selector one element have not to be immediately after another element. Also it will be written using a tilde (~) sign between two selectors.
For better understanding we will use same example as we have used for CSS Adjacent Sibling Selector & only change is tilde (~) sign.
Below the example:
<!DOCTYPE html>
<html>
<head>
<title>This is page title</title>
<style>
h2 ~ p {
color: orange;
}
ul ~ p {
color: red;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph one</p>
<p>This is paragraph two</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
<p>This is paragraph three</p>
<p>This is paragraph four</p>
</body>
</html>
Below the output:
Hope you understand the difference between CSS Adjacent Sibling Selector & CSS General Sibling Selector.
CSS How to Add
Hope you already learned this in our HTML For Beginners tutorial HTML Styles (Inline, Embedded & External) section.
CSS Comments
CSS Comments will be used to explain the purpose of the code. So it will be easy to understand while you or others will edit the code. This will not be visible to browsers.
CSS Comments starts with /* & ends with */ & below an example:
/* This comment is for paragraph */
p {
color: red;
}
Here is another example:
p {
color: red; /* paragraph color is set to red */
}
So you can use comment wherever you want.
CSS Colors
You can follow HTML Colors section from our previous tutorial.
CSS Backgrounds
CSS Backgrounds will be used to set different background properties of HTML elements.
CSS Background Color
CSS background-color property will be used to define background color of HTML elements.
Here is an example:
<h2 style="background-color:orange;">This is heading</h2>
<p style="background-color:yellow;">This is paragraph</p>
Below the output:
CSS Background Image
CSS background-image property will be used to set an image as a background for HTML elements.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png");
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
For body element background-image is added.
Let’s see the below output after zooming out browser screen:
If your browser screen size is large than the background image size then you will see image is repeating. If you don’t see it then after zooming out screen you will see it.
Let’s learn it more in next section.
CSS Background Repeat
By default, background image will repeat both horizontally & vertically until it covers the entire element.
If we want to make horizontal repeat only then need to use repeat-x for background-repeat property.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
Below the output after zooming out browser screen:
To understand it more, if you zoom out browser screen then you will see background image is repeating horizontally but not vertically.
To make vertical repeat only, just change above code background-repeat property value to repeat-y.
Like this below:
background-repeat: repeat-y;
& you will get below output after browser zooming out:
To make no repeat, just change the same code background-repeat property value to no-repeat.
Like this below:
background-repeat: no-repeat;
& output will be like this without zooming:
CSS Background Position
CSS background-position property will be used to set the position of background image.
We can use keywords, percentage (%) & pixel (px) to set the background position.
Keywords can be: top, center, right, bottom, left & we can use combination of these keywords like: top left, top center, top right etc.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png");
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
For background-position we have added value center top. Here center will be for horizontally or X axis & top will be for vertically or Y axis.
So do you know in which position image will show? Take some time to think 🙂
Here you go:
So yeah it’s in center & top position of your browser.
You can try changing background-position values like right top, center center, center bottom etc.
We can set background-position value using percentage (%) as well.
Let me give an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
html, body {
height: 100%;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
So for background-position it’s values added 50% 50% so from left it will be 50% & from top will be 50%.
Also we have added height: 100% for html & body, so image will show center position based on body height.
After zooming out the output will be like this:
You can try changing percentage value to see different outputs.
Another way we can set background-position value is using pixel (px) like this below:
background-position: 200px 100px;
& output will be like this:
Default value for background-position is left top (using keyword) or 0% 0% (using percentage) or 0px 0px (using pixel)
CSS Background Attachment
CSS background-attachment property will be used to define if background image will scroll (default value) or fixed.
Here is an example for fixed:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
html, body {
height: 100%;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
Now if you scroll the browser then background image to not scroll & will be fixed.
CSS Background Size
CSS background-size property will specify the size of background image.
It’s default value is auto & have some other values like cover, contain, percentage (%), pixel (px) & some more.
Let’s we give an example using pixel.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png");
background-repeat: no-repeat;
background-position: center top;
background-size: 150px 200px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This is paragraph</p>
</body>
</html>
Output will be like this:
You can try changing other values to see different results.
CSS Background Shorthand
CSS Background Shorthand property will be used to add all the background properties in one single property.
We will show here most commonly used properties.
The order of the property values should be like this:
background: color image repeat position;
At first let’s give an example without background shorthand:
body {
background-color: orange;
background-image: url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png");
background-repeat: no-repeat;
background-position: center top;
}
Now with background shorthand code will be like this:
body {
background: orange url("https://wpupskills.com/wp-content/uploads/2020/06/CSS_background_image_sample.png") no-repeat center top;
}
& both will show same result.
Hope you understand this & let’s move to next section.
CSS Borders
CSS border properties will be used to add border in an element.
Here is the shorthand syntax with it’s order:
border: border-width border-style border-color;
Here is an example:
border: 5px solid #000;
Most commonly used border-style values: solid, dotted, dashed. Hope you understand other two properties (border-width & border-color).
We can break this border: 5px solid #000; code into three lines:
border-width: 5px;
border-style: solid;
border-color: #000;
Also we can individually change width, style & color.
For example, if we want to change width individually then can write like this below:
border-top-width: 3px;
border-right-width: 4px;
border-bottom-width: 5px;
border-left-width: 6px;
Same way we can write for style & color.
CSS Rounded Borders
To make rounded borders border-radius property will be used.
Here is an example:
border-radius: 10px;
In order to see the rounder border border property need to use as well.
So ultimately code will be for example:
border: 5px solid #000;
border-radius: 10px;
If we write a full code then it can be like:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border: 5px solid #000;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
</body>
</html>
Below the output:
If we want to show different rounded corners then we can write like this:
border-radius: 10px 15px 5px 20px; /* top left, top right, bottom right, bottom left */
In above comment mentioned the position of four different corners.
We will elaborate this bit more.
If we remove bottom left value & then code will be:
border-radius: 10px 15px 5px;
& this is valid code.
Do you know what will be the value for bottom left?
Just remember this tricks: if any value is missing then you will count it anticlockwise from the last one available & will continue counting until we get all values.
So here last available value is 5px, so if we count anticlockwise then first count will be 15px.
So fourth value that means bottom left value will be 15px. We don’t need to count it more as fourth value already got.
So border-radius: 10px 15px 5px; & border-radius: 10px 15px 5px 15px; will show same result.
Let’s explain this code:
border-radius: 10px 15px;
So here last two value missing. Last available value is 15px, so after counting anticlockwise first value will be 10px & this will be the bottom right, if we again count from 10px then we will get 15px. So bottom left will be 15px.
So border-radius: 10px 15px; & border-radius: 10px 15px 10px 15px; will show same result.
So for one value like this border-radius: 10px; if we use same tricks then we will get border-radius: 10px 10px 10px 10px; & both will show same output.
CSS Margin
CSS margin property will be used to add space around selected elements you want to add margin.
We can add margin in four different sides of an element like top (margin-top), right (margin-right), bottom (margin-bottom) & left (margin-left).
All margin properties can be used using values like length (px, em etc.), percentage (%), auto, inherit.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin-top: 50px;
margin-right: 70px;
margin-bottom: 80px;
margin-left: 40px;
}
</style>
</head>
<body>
<h2>This is heading for margin example</h2>
</body>
</html>
In this example, added margin of each side for h2 element using pixel (px).
Below the output:
Now let’s think one situation where you need to add border for h2 element.
Can you imagine how margin will work? It will add inside of that border or outside?
You can take some time to think.
Let’s we edit the code as below:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin-top: 50px;
margin-right: 70px;
margin-bottom: 80px;
margin-left: 40px;
border: 1px solid orange;
}
</style>
</head>
<body>
<h2>This is heading for margin example</h2>
</body>
</html>
Here is the output:
So yeah margin will be added outside of any defined border.
margin will be added outside of any defined border for an element
You can try changing different values for margin & it will show different results.
Also can use % instead of px something like 50%, 70%, 80%, 40%.
Now we can make four lines of margin into one line shorthand code.
Like this:
margin: 50px 70px 80px 40px;
From this code if we remove last value (margin-left) 40px then it will be:
margin: 50px 70px 80px;
So do you know what will be margin-left value in this code?
We have learned this tricks in CSS Rounded Borders section above. So yeah margin-left value will be 70px.
So we can write like this as well:
margin: 50px 70px 80px 70px;
If we remove 80px then code will be like this:
margin: 50px 70px;
It’s margin-bottom & margin-left is missing. So if we use same tricks then other two values will be 50px (margin-bottom) & 70px (margin-left).
So we can write like this as well:
margin: 50px 70px 50px 70px;
Now if we remove 70px & just keep 50px then code will be like:
margin: 50px;
After applying same tricks code will be like:
margin: 50px 50px 50px 50px;
Hope you understand this clearly 🙂
There is another value for margin is auto & this is commonly used to horizontally center the element within its container.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin: 0 auto;
width: 400px;
}
</style>
</head>
<body>
<h2>This is heading for margin auto</h2>
</body>
</html>
For h2 we have added it’s container width 400px & margin is: 0 auto, that means margin-right: auto & margin-left: auto.
So if you see the output you will get h2 is showing in center position of the browser.
Negative values are allowed for margin like -20px, -40px & you can use this to overlap with other elements based on your requirements.
CSS Padding
CSS padding is almost same as CSS margin & main difference is padding will be added inside of any defined border for an element.
Let’s use same example as we have used for CSS margin with border & will replace margin with padding & will use shorthand code.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
padding: 50px 70px 80px 40px;
border: 1px solid orange;
}
</style>
</head>
<body>
<h2>This is heading for padding example</h2>
</body>
</html>
Below the output:
One more thing need to include for padding.
Let’s say for h2 we need to set it’s width 450px & then if we add padding 25px then what will be the total width?
Yeah right you are.
It will be 450px + 25px (for right padding) + 25px (for left padding) = 500px
So in this case h2 width is increased but we wanted 450px.
This problem have a solution.
The solution is box-sizing: border-box; So if we add this then width will not be increased.
So CSS code will be like this:
h2 {
width: 450px;
padding: 25px;
border: 1px solid orange;
box-sizing: border-box;
}
You can try adding this code to get the output.
Also you should check without this line box-sizing: border-box; so will understand it more.
CSS Width and Height
CSS width and height properties will be used to set width & height of an element.
These properties can be used using values like length (px, em etc.), percentage (%), auto (by default) etc.
Here is a CSS code using pixel (px) for h2:
h2 {
width: 450px;
height: 300px;
border: 1px solid orange;
}
If we want to set min width & height then we can write like this:
h2 {
min-width: 450px;
min-height: 300px;
border: 1px solid orange;
}
We can set max width & height as well like:
h2 {
max-width: 450px;
max-height: 300px;
border: 1px solid orange;
}
CSS Box Model
CSS Box Model is a visual representation of HTML elements & all elements can be considered as boxes.
Each element consists of margin, border, padding & it’s content.
In this section we will show how this element is placed in a web page using box model.
Here it is:
Let’s we explain a bit.
- margin add space outside the border
- border will be added around the padding and content
- padding will be added inside border & around the content
- content is the area where text and images will be added
CSS Text
In this section we will learn how to design text using different CSS text properties.
CSS Text Color
CSS color property will be used to color text & we already know this 🙂
Here is a CSS code for h2 element:
h2 {
color: orange;
}
CSS Text Alignment
CSS text-align will be used to align text in different ways horizontally.
Here is some examples:
h2 {
text-align: left; /* this is default & will make text left aligned */
}
h2 {
text-align: right; /* this will make text right aligned */
}
h2 {
text-align: center; /* this will make text center aligned */
}
There is another alignment & that’s called justify. In this method each line will be stretched so that it will be equal width for every line except the last line.
Let’s see an example first for text-align: left; so will understand the difference.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-align: left;
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
</body>
</html>
In this example, for h2 used some dummy text & in CSS used width, margin. So will be easy to understand.
Here is the output:
So here text is showing left aligned.
Now let’s replace text-align: left; with text-align: justify;
Here is the output:
Hope you understand the difference.
CSS Text Decoration
CSS text-decoration will be used to add or remove lines from text.
Here is some examples:
h2 {
text-decoration: underline; /* this will add line under the text */
}
h2 {
text-decoration: line-through; /* this will add line through the text */
}
h2 {
text-decoration: overline; /* this will add line over the text */
}
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-decoration: underline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: overline;
}
</style>
</head>
<body>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
</body>
</html>
Below the output:
For HTML link by default text decoration will be underline.
So if we want to remove that need making text decoration none.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">This is a link</a>
</body>
</html>
After checking the output you will see that there is no underline for link.
CSS Text Transformation
CSS text-transform property will be used to make text uppercase, lowercase, capitalize etc.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2.upper {
text-transform: uppercase;
}
h2.lower {
text-transform: lowercase;
}
h2.capital {
text-transform: capitalize;
}
</style>
</head>
<body>
<h2 class="upper">This is heading</h2>
<h2 class="lower">This is heading</h2>
<h2 class="capital">This is heading</h2>
</body>
</html>
In this example, we have created three h2 element & each have different class name.
Using h2.upper first h2 is selected & it’s text will be uppercase.
For h2.lower second h2 will be selected & it’s text will be lowercase.
For h2.capital third h2 will be selected & it’s text will be capitalize.
Below the output:
CSS Text Indentation
CSS text-indent property will be used to add space before the first line of text.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-indent: 200px;
}
</style>
</head>
<body>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
</body>
</html>
Below the output:
Do you know how it will show for below code?
h2 {
text-indent: -99999px;
}
h2 text will move 99999px left that means out of the screen & you will not see any text.
CSS Letter Spacing
CSS letter-spacing property will be used to add space between the characters of text.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
letter-spacing: 5px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
</body>
</html>
Below the output:
letter-spacing value can be negative as well:
h2 {
letter-spacing: -5px;
}
CSS Word Spacing
CSS word-spacing property will be used to add space between the words of text.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
word-spacing: 10px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
</body>
</html>
Below the output:
word-spacing value can be negative as well:
h2 {
word-spacing: -10px;
}
CSS Line Height
CSS line-height property will be used to add space between text lines.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
line-height: 35px;
}
</style>
</head>
<body>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
</body>
</html>
For h2 line-height is added 35px & below the output:
line-height can be added using number as well.
Example below:
h2 {
line-height: 1.6;
}
You can try replacing this code in previous example to check the output.
CSS Text Shadow
CSS text-shadow property will be used to add shadow in text.
Here is the syntax:
text-shadow: h-shadow v-shadow blur-radius color;
- h-shadow is required & it’s the position of the horizontal shadow
- v-shadow is required & it’s the position of the vertical shadow
- blur-radius is optional & will show radius of the blur
- color is optional & will show shadow color
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 5px 3px 10px orange;
}
</style>
</head>
<body>
<h2>This is heading</h2>
</body>
</html>
Below the output:
CSS Fonts
CSS font consists of different kind of properties & let’s discuss some commonly used properties.
CSS Font Family
CSS font-family property will be used to define font family name.
Here is an example:
h2 {
font-family: Arial;
}
So here h2 font family will be Arial.
If font-family name is more than one word then need to use quotation marks.
Like this:
h2 {
font-family: "Times New Roman";
}
For one word we can use quotation as well.
We can use multiple font-family name at a time.
h2 {
font-family: Arial, Helvetica, sans-serif;
}
So if first font (Arial) not available in your system then browser will use second one (Helvetica) & so on.
CSS Font Style
CSS font-style will be used to change font style of text.
Here is an example:
h2 {
font-style: normal;
}
So using normal text will stay as it is & it’s the default value.
Most commonly used is italic & here is the example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-style: italic;
}
</style>
</head>
<body>
<h2>This is heading italic</h2>
</body>
</html>
So h2 text will be in italic format & below the output:
CSS Font Weight
CSS font-weight property will be used to add the weight of the font.
It has different values & commonly used values are: normal, bold, bolder, lighter, 300, 400 (same as normal), 500, 600, 700 (same as bold), 900 etc.
Here is an example:
h2 {
font-weight: normal;
}
p {
font-weight: bold;
}
So for h2 it will be normal & for p it will be bold.
CSS Font Size
CSS font-size will be used to set the size of the font.
We can use different units for font-size like px, em, % etc.
Here is an example:
h2 {
font-size: 30px;
}
CSS Google Fonts
We can use fonts from google as well & need to add that google font stylesheet link in HTML.
Here is the list of all google fonts: https://fonts.google.com
Here is an example for Roboto google font:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
h2 {
font-family: Roboto;
}
</style>
</head>
<body>
<h2>This is heading for Roboto google font</h2>
</body>
</html>
So you will see font family is changed to Roboto & inside <link> tag stylesheet is added.
Below the output:
CSS Web Fonts
CSS web fonts will be used when that font’s not available in user’s computer.
CSS @font-face rule will be used to define fonts.
Here is the syntax with best possible browser support:
@font-face {
font-family: 'WebFontName';
src: url('webfontname.eot');
src: url('webfontname.eot?#iefix') format('embedded-opentype'),
url('webfontname.woff2') format('woff2'),
url('webfontname.woff') format('woff'),
url('webfontname.ttf') format('truetype'),
url('webfontname.svg#svgFontName') format('svg');
}
So after initializing @font-face how can we use this for any element?
Here it is for h2 element:
h2 {
font-family: "WebFontName";
}
You see there are various font extension used like .eot, .woff2, .woff, .ttf, .svg.
So you are thinking where you will get those?
At first you need to find your required font with any of those extensions. After searching in google hope you will find it.
Then just use any online font converter to convert in other extensions.
Hope you can do this easily.
CSS Links
For CSS Links you can follow HTML Links section from our previous tutorial.
CSS Lists
For CSS Lists follow HTML Lists section.
CSS Tables
For CSS Tables follow HTML Tables section.
CSS display property will be used to specify how HTML element will be displayed.
Here is some commonly used display values.
a {
display: block;
}
h2 {
display: inline;
}
There is another commonly used value is display none.
h2 {
display: none;
}
To learn more you can follow HTML Block and Inline Elements section from our previous tutorial.
CSS Position
CSS position property will be used to position HTML elements different ways.
There are different kind of methods for positioning.
CSS Static Position
CSS static position is the default positioning method & for an element this positioning work as normal it is.
You can’t use top, right, bottom, left properties for static position.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.box_position {
position: static;
background: orange;
}
</style>
</head>
<body>
<div class="box_position">This is an example for position</div>
</body>
</html>
Created a div with class box_position & added position static with a background color. So will be easy to understand.
If you see the output then will get it’s working normally.
Let’s move to next positioning method & will understand it more.
CSS Relative Position
If CSS relative position is used then top, right, bottom, left properties will be activated.
So you can use any values for those properties.
In previous example at first remove position: static; & then add below code:
position: relative;
left: 20px;
top: 40px;
You will see content position is changed. You can try adding other properties like right & bottom.
CSS Absolute Position
CSS absolute position is a very important method to understand.
If position absolute is used for an element then it will be positioned relative to it’s nearest element that has a position other than static.
In most cases you will see, you need to make it’s parent element to relative.
Properties like top, right, bottom, left will be activated as well.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.box_container {
position: relative;
width: 500px;
height: 300px;
background: black;
}
.box_position {
position: absolute;
background: orange;
left: 50px;
top: 100px;
}
</style>
</head>
<body>
<div class="box_container">
<div class="box_position">This is an example for position absolute</div>
</div>
</body>
</html>
In this example, created another div with class name box_container before div class name box_position.
Added position absolute for box_position & for box_container added position relative.
So box_position div will be positioned based on box_container div.
Can you imagine how the output will be?
Here it is:
CSS Fixed Position
Hope you already guessed how this positioning will work from it’s name.
Yeah right you are. It will stay fixed based on browsers screen or viewport & will not move while scrolling.
Top, right, bottom, left properties can be used to position the element.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.box_position {
position: fixed;
background: orange;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="box_position">This is an example for position fixed</div>
</body>
</html>
Below the output:
You can try resizing your browser until browser has scrolling option.
Or you can try adding more “Lorem ipsum…” text so that browser scroll will be available.
Then will see that box_position div text is not moving while you scrolling.
CSS Overflow
Let’s imagine one element have some text & it has a fixed width, height.
So what will happen it text is too big to fix into that area?
To give you the solution CSS overflow property came.
It has four different values.
CSS Overflow Visible
CSS overflow visible is by default value. Content will show outside of the element’s box.
It may overlap with any other element’s content next to it.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.box_content {
width: 200px;
height: 100px;
background: orange;
overflow: visible;
}
</style>
</head>
<body>
<div class="box_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Below the output:
CSS Overflow Hidden
If CSS overflow hidden is added then content outside of the element’s box will be invisible.
In above code if we replace overflow: visible; with overflow: hidden; then output will be like:
So rest of the content not showing.
CSS Overflow Scroll
CSS overflow scroll will show scrollbars always & if content goes outside of the element’s box then it will scroll.
After adding overflow: scroll; we will get below output:
So it’s showing scrollbars.
CSS Overflow Auto
CSS overflow auto is similar to scroll but it adds scrollbars only when content goes outside of the box.
CSS overflow-x and overflow-y
CSS overflow-x and overflow-y properties will be used to make the content overflow horizontally (overflow-x) or vertically (overflow-y).
Here is an eample:
<!DOCTYPE html>
<html>
<head>
<style>
.box_content {
width: 200px;
height: 100px;
background: orange;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="box_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
Below the output:
As overflow-x is hidden that’s why horizontal scrollbar is not showing. Also overflow-y is scroll that’s why vertical scrollbar is showing.
Hope you understand CSS overflow clearly.
CSS Float
CSS float property will be used to specify how HTML element should float.
CSS Float Left
For CSS float left an element will be left floated of it’s container.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
width: 300px;
margin-right: 20px;
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_float_image.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
</html>
In this example, for img float left is used, so image will be floated left & text will show right side of the image.
Added width 300px with margin right 20px, so it will look good.
Below the output:
CSS Float Right
For CSS float right an element will be right floated of it’s container.
If we consider same example, so for CSS float right image will be floated right & text will show left side of the image.
So we are changing below code:
img {
float: right;
margin-left: 20px;
}
Output will be like this:
CSS Float None
CSS float none is by default. So image will not float & will stay where it is.
So from above code just change float to none & we can remove margin property here.
Like this:
img {
float: none;
}
So output will be as below:
CSS Clear
For float left or right, next element will show after that.
Like in our previous example, we have used float left & right for img.
So for float left text showed in right side of image & for float right text showed in left side.
We can use clear property to make other element not to show after that.
Hope you will understand more after giving an example.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
h2 {
clear: left;
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_float_image.jpg">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
</body>
</html>
In this code, for img float left is used. So h2 text should show right side of the image right?
Yeah right you are. But we have used clear left for h2. So h2 text will not show in right side.
Below the output:
So for clear left no floating elements will be allowed on the left side.
If img is set to float right then we can use clear right. So h2 text will not show in left side of image.
So for clear right no floating elements will be allowed on the right side.
For clear both no floating elements will be allowed on both sides.
clear none is the default value, so it will allow floating elements on both sides.
CSS Pseudo Class
CSS pseudo-class will be used to add special effects to some selectors.
Here is the syntax:
selector:pseudo-class {
property: value;
}
CSS Anchor Pseudo Class
CSS anchor pseudo-class will be used to style anchor (<a>) is different ways.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: orange;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:focus {
color: yellow;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="#">This is a link</a>
</body>
</html>
- a:link is for unvisited link
- a:visited is for visited link
- a:hover is for mouse over link
- a:focus is for focus (press the link for some time to understand it more)
- a:active is for activated or clicked link (while pressing the link ends then you will see this effect)
To make pseudo-class work perfectly you must follow this order :link, :visited, :hover, :focus, :active
CSS Pseudo Class and CSS Class
We can combine CSS pseudo-class with CSS class.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
a.linkOne:hover {
color: red;
}
</style>
</head>
<body>
<a href="#" class="linkOne">This is a link</a>
</body>
</html>
So in this example, for anchor (<a>), one class is defined & it’s linkOne.
In CSS we have added hover effect for a using class name like this a.linkOne:hover.
So if you hover on link it will show red color.
Thus we can combine CSS pseudo-class with CSS class.
CSS :first-child Pseudo Class
CSS :first-child pseudo-class will be used to select first child of an element.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:first-child {
color: orange;
}
</style>
</head>
<body>
<ul>
<li>This is list 1</li>
<li>This is list 2</li>
<li>This is list 3</li>
</ul>
</body>
</html>
In this example, first child for ul is first li & we have used ul li:first-child is style.
So first li should be orange color right?
Below the output:
CSS :last-child Pseudo Class
CSS :last-child pseudo-class will be used to select last child of an element.
If we use same example above & just change ul li:first-child to ul li:last-child then output will be:
CSS :nth-child Pseudo Class
CSS :nth-child pseudo-class will be used to select one or more child of an element.
It’s syntax will be:
:nth-child(n)
Here n can be a number, a keyword (even, odd), or a formula (mainly xn+y format & x,y will be integers e.g. 2n, 2n+1, 3n+2 etc.).
Here is an example using number:
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2) {
color: orange;
}
</style>
</head>
<body>
<ul>
<li>This is list 1</li>
<li>This is list 2</li>
<li>This is list 3</li>
<li>This is list 4</li>
<li>This is list 5</li>
</ul>
</body>
</html>
So in this example, we have used ul li:nth-child(2) that means second li will be selected.
Output like this:
Let’s use a keyword & in above code just replace ul li:nth-child(2) with ul li:nth-child(even).
Can you guess the output?
All even li under ul should be selected right?
Here you go:
If you use ul li:nth-child(odd) then odd li will be selected.
You can try this after changing the code.
Let’s now use a formula xn+y in this format.
For example, if we use 2n+1 then which element should be selected?
Let’s explain it more.
n=0 then 2n+1 value will be: 2 x 0 + 1 = 1
n=1 then 2n+1 value will be: 2 x 1 + 1 = 3
n=2 then 2n+1 value will be: 2 x 2 + 1 = 5
n=3 then 2n+1 value will be: 2 x 3 + 1 = 7
& so on…
That means 1, 3, 5, 7… number of elements will be selected.
Let’s include this formula in our previous example.
By the meantime you can think how output should look like 🙂
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2n+1) {
color: orange;
}
</style>
</head>
<body>
<ul>
<li>This is list 1</li>
<li>This is list 2</li>
<li>This is list 3</li>
<li>This is list 4</li>
<li>This is list 5</li>
</ul>
</body>
</html>
So output will be like this:
CSS Pseudo Element
CSS pseudo-element will be used to add special effects to some selectors.
Here is the syntax:
selector::pseudo-element {
property: value;
}
In CSS3 double-colon (::) syntax is introduced for pseudo-element to distinguish between pseudo-element and pseudo-class.
CSS ::first-line Pseudo Element
CSS ::first-line pseudo-element will be used to select first line of a text.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: orange;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
For p element ::first-line pseudo element is used & it’s color is set to orange.
So first line for p should be orange color right?
Below the output:
CSS ::first-letter Pseudo Element
CSS ::first-letter pseudo-element will be used to select first letter of a text.
We can use previous example & will do some update in style.
Like this:
p::first-letter {
color: orange;
font-size: 40px;
}
Added font-size as well, so first letter will be large.
Below the output:
CSS Pseudo Element and CSS Class
We can combine CSS pseudo-element with CSS class.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
p.textOne::first-letter {
color: orange;
font-size: 40px;
}
</style>
</head>
<body>
<p class="textOne">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
In this example, for p element one class is defined & it’s textOne class & first letter is selected using p.textOne::first-letter.
This will show same result as previous example, as all CSS properties are same.
CSS ::before Pseudo Element
This is important & will be used in some expert level work.
CSS ::before pseudo element will be used to add some content before the content of a selected element.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
content: url(https://wpupskills.com/wp-content/uploads/2020/06/CSS_flower_image.png);
}
</style>
</head>
<body>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
</body>
</html>
Below the output:
CSS ::after Pseudo Element
CSS ::after pseudo element is also important & it’s same as ::before & just content will be added after.
If we just change h2::before to h2::after from previous example then output will be like this:
CSS Opacity
CSS opacity property will be used to add transparency of an element.
It has value from 0.0 – 1.0.
Opacity 0 means 100% transparent & 1 means 0% transparent.
Opacity 1 is by default.
Let’s explain it more for some elements.
CSS Image Opacity
Using CSS opacity we can make an image transparent.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.1;
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_flower_image_opacity.png">
</body>
</html>
In this example opacity: 0.1 is used for image.
Below the output:
Let’s try increasing opacity value to 0.5 & below the output:
So how it will show for opacity value 1?
Here it is:
So yeah it’s showing the actual image without any transparency.
CSS Image Opacity on Hover
We can change image opacity on hover as well.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
}
img:hover {
opacity: 1;
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_flower_image_opacity.png">
</body>
</html>
For image at first opacity is set to 0.5 & on hover it’s set to opacity 1.
So if you hover on image it will show without any transparency.
You can try to check the output how it’s working for you.
CSS Background Opacity
Using CSS opacity we can make transparent background for an element.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
background-color: orange;
}
h2.headingOne {
opacity: 0.2;
}
h2.headingTwo {
opacity: 0.5;
}
h2.headingThree {
opacity: 1;
}
</style>
</head>
<body>
<h2 class="headingOne">This is heading</h2>
<h2 class="headingTwo">This is heading</h2>
<h2 class="headingThree">This is heading</h2>
</body>
</html>
At first for h2 added a background color & that will be common for all h2.
After that based on class name added different opacity values.
Below the output:
CSS Transparency Using RGBA
Beside opacity we can use RGBA to add transparency.
To learn more, you can follow HTML RGBA Colors section from our previous tutorial.
CSS Gradients
CSS gradients will be used to make smooth transitions between two or more colors.
CSS Linear Gradients
For CSS linear gradients at least two colors will be used.
Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, …);
Color stops are colors to make smooth transitions in between.
CSS Linear Gradient – Top to Bottom
This is the default. So it starts from top with color-stop1 & ends with bottom with color-stop2.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.gradOne {
height: 250px;
background: purple; /* for browsers that don't support gradients */
background: linear-gradient(purple, orange);
}
</style>
</head>
<body>
<div class="gradOne"></div>
</body>
</html>
In this example, have used two colors for linear-gradient & it will work from top to bottom.
If browsers don’t support gradients then background color will be purple.
Below the output:
CSS Linear Gradient – Left to Right
So this will start from left & will end in right.
We can use previous example & will just change background: linear-gradient(purple, orange); to background: linear-gradient(to right, purple, orange); & output will be like this:
CSS Linear Gradient – Diagonal
We can make diagonal direction gradients as well.
Here is the updated code:
background: linear-gradient(to bottom right, purple, orange);
So for the direction we have used to bottom right that means it will start from top left & will end in bottom right.
Output will be like this:
So it’s showing gradient diagonally.
Hope you understand the difference.
CSS Linear Gradients Using Angles
We can use angles for more control over directions.
Here is the syntax:
background: linear-gradient(angle, color-stop1, color-stop2, …);
angle will be specified between a horizontal line and the gradient line
So angle 0deg means bottom to top gradient.
Positive angles represent clockwise rotation that means angle 90deg will create left to right gradient.
So what will be the direction for -90deg?
Yeah it will be from right to left gradient.
Here is some examples using different angles:
<!DOCTYPE html>
<html>
<head>
<style>
.gradCommon {
height: 80px;
background: purple; /* for browsers that don't support gradients */
text-align: center;
margin-bottom: 10px;
padding-top: 60px;
}
.gradOne {
background: linear-gradient(0deg, purple, orange);
}
.gradTwo {
background: linear-gradient(90deg, purple, orange);
}
.gradThree {
background: linear-gradient(180deg, purple, orange);
}
.gradFour {
background: linear-gradient(-90deg, purple, orange);
}
</style>
</head>
<body>
<div class="gradCommon gradOne">0deg</div>
<div class="gradCommon gradTwo">90deg</div>
<div class="gradCommon gradThree">180deg</div>
<div class="gradCommon gradFour">-90deg</div>
</body>
</html>
Let’s explain this code a bit.
At first created a common class gradCommon for all div & used common styles under this class.
Added some more style like text-align, margin-bottom & padding-top so that output will look good.
Angle is added for each class differently like for gradOne angle is 0deg, for gradTwo angle 90deg, for gradThree angle 180deg & for gradFour angle -90deg.
So hope you understand the code now.
Let’s check the output.
Hope it’s more clear now.
CSS Linear Gradients Using Multiple Color Stops
We can use multiple color stops for CSS linear gradients.
Let’s use rainbow color format: ROYGBIV
R: red, O: orange, Y: yellow, G: green, B: blue, I: indigo, V: violet
Here is the example:
<!DOCTYPE html>
<html>
<head>
<style>
.gradOne {
height: 250px;
background: purple; /* for browsers that don't support gradients */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div class="gradOne"></div>
</body>
</html>
Can you guess the output?
Here it is:
CSS Linear Gradients Using Transparency
We can use transparency for gradient color using this function rgba().
Last parameter for rgba() will define transparency & it’s value can be 0 to 1.
0 means 100% transparent & 1 means 0% transparent.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.gradOne {
height: 250px;
background: purple; /* for browsers that don't support gradients */
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1));
}
</style>
</head>
<body>
<div class="gradOne"></div>
</body>
</html>
Below the output:
To learn more about rgba() function you can follow this section HTML RGBA Colors from our previous tutorial.
CSS Linear Gradients Repeating
To repeat CSS linear gradients repeating-linear-gradient() function will be used.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.gradOne {
height: 250px;
background: purple; /* for browsers that don't support gradients */
background: repeating-linear-gradient(purple, white 20%, orange 30%);
}
</style>
</head>
<body>
<div class="gradOne"></div>
</body>
</html>
Output will be like this:
CSS Radial Gradients
For CSS radial gradients at least two colors will be used same as linear gradients.
Syntax:
background: radial-gradient(shape size at position, color-stop1, color-stop2, …);
Here is the default values:
- shape: ellipse (shape will define the shape of gradient & it’s other value: circle)
- size: farthest-corner (size will define the size of gradient & it’s other values: closest-side, closest-corner, farthest-side)
- position: center (position will define the position of the gradient & it’s other values: top, right, left, bottom etc.)
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.gradOne {
height: 250px;
background: purple; /* for browsers that don't support gradients */
background: radial-gradient(purple, white, orange);
}
</style>
</head>
<body>
<div class="gradOne"></div>
</body>
</html>
For this code shape is ellipse, size is farthest-corner, position is center & these all by default.
Below the output:
CSS Radial Gradients Shape
Let’s we change shape to circle & update the code like this:
background: radial-gradient(circle, purple, white, orange);
So this is the output:
CSS Radial Gradients Size & Position
Let’s change size to farthest-side & position to right bottom & will keep shape as circle.
Here is the code update:
background: radial-gradient(circle farthest-side at right bottom, purple, white, orange);
Output below:
CSS Radial Gradients Repeating
As like linear gradients we can repeat for radial gradients as well.
Updated code:
background: repeating-radial-gradient(purple, white 20%, orange 30%);
Below the output:
CSS Gradients Cross Browser
To ensure best possible browser support we need to add cross browser code.
For linear gradient here is an example:
background: -webkit-linear-gradient(purple, orange); /* for Webkit browsers (chrome, Safari) */
background: -ms-linear-gradient(purple, orange); /* for IE */
background: -o-linear-gradient(purple, orange); /* for Opera */
background: -moz-linear-gradient(purple, orange); /* for FireFox */
background: linear-gradient(purple, orange);
So linear gradient will work for best possible browsers.
CSS 2D Transforms
For CSS 2D transforms transform property will be used & this will allow to move, rotate, scale, and skew elements.
Here is some functions for CSS 2D transforms:
- translate(x,y) will move element along X-axis and Y-axis by giving values for x & y (if y not added then it’s value will be zero)
- translateX(x) will move element along X-axis by giving value for x
- translateY(y) will move element along Y-axis by giving value for y
- rotate(angle) will rotate element based on angle
- scale(x,y) will change width and height of element by giving values for x & y (if y not added then it’s value will be equal to x)
- scaleX(x) will change width of element by giving value for x
- scaleY(y) will change height of element by giving value for y
- skew(x-angle,y-angle) will skew element along X-axis and Y-axis based on angle (if y-angle not added then it’s value will be zero)
- skewX(angle) will skew element along X-axis based on angle
- skewY(angle) will skew element along Y-axis based on angle
Let’s give some examples for commonly used functions.
CSS Transform translate() Function
CSS transform translate() will move element from it’s current position to a new position.
Here is an example with best possible browser support:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-transform: translate(100px, 150px);
-moz-transform: translate(100px, 150px);
-ms-transform: translate(100px, 150px);
-o-transform: translate(100px, 150px);
transform: translate(100px, 150px);
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_transforms_image.png">
</body>
</html>
You can try checking this code & will see image is moved 100px from left & 150px from top.
CSS Transform rotate() Function
CSS transform rotate() will rotate element clockwise (for positive angle) or anticlockwise (for negative angle).
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_transforms_image.png">
</body>
</html>
Below the output:
Let’s change 40deg to -40deg & guess the output?
Here it is:
CSS Transform scale() Function
CSS transform scale() will change (increase or decrease) width & height of an element.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_transforms_image.png">
</body>
</html>
As scale(2) is used so image width & height will be double of it’s original size.
If we change scale(2) to scale(0.5) then image width & height will be half.
You can try checking output.
CSS Transform skew() Function
CSS transform skew() will skew the element based on angle along X-axis and Y-axis.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-transform: skew(-20deg, 50deg);
-moz-transform: skew(-20deg, 50deg);
-ms-transform: skew(-20deg, 50deg);
-o-transform: skew(-20deg, 50deg);
transform: skew(-20deg, 50deg);
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_transforms_image.png">
</body>
</html>
Below the output:
CSS 3D Transforms
In CSS 3D Transforms, we can move, rotate, scale, and skew elements to X-axis, Y-axis & Z-axis.
Here is some functions for CSS 3D Transforms:
- translate3d(x,y,z) for 2D it was translate(x,y)
- translateX(x) for 2D it was same function
- translateY(y) for 2D it was same function
- translateZ(z) for 2D this was not available
- rotate3d(x,y,z,angle) for 2D it was rotate(angle)
- rotateX(angle) for 2D this was not available
- rotateY(angle) for 2D this was not available
- rotateZ(angle) for 2D this was not available
- scale3d(x,y,z) for 2D it was scale(x,y)
- scaleX(x) for 2D it was same function
- scaleY(y) for 2D it was same function
- scaleZ(z) for 2D this was not available
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-transform: rotateZ(90deg);
-moz-transform: rotateZ(90deg);
-ms-transform: rotateZ(90deg);
-o-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<img src="https://wpupskills.com/wp-content/uploads/2020/06/CSS_transforms_image.png">
</body>
</html>
This will rotate image along Z-axis for 90deg.
Below the output:
CSS Transitions
CSS Transitions will be used to change CSS property values smoothly, over a specified duration.
For example, when we change link color on hover then it changes instantly but we can add some effect using CSS transitions rather than instant change.
Here is the shorthand syntax:
transition: transition-property transition-duration transition-timing-function transition-delay;
Let’s elaborate it more.
- transition-property means CSS properties like background, color, width, height etc
- transition-duration means the duration of a transition animation should take to complete
- transition-timing-function will specify speed curve of the transition effect (some commonly used values: ease, linear, ease-in, ease-out, ease-in-out)
- transition-delay will specify when transition will start
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.code_trans_1 {
width: 200px;
height: 200px;
background-color: orange;
-webkit-transform: background-color 1s ease 0.5s;
-moz-transition: background-color 1s ease 0.5s;
-ms-transition: background-color 1s ease 0.5s;
-o-transition: background-color 1s ease 0.5s;
transition: background-color 1s ease 0.5s;
}
.code_trans_1:hover {
background-color: green;
}
</style>
</head>
<body>
<div class="code_trans_1"></div>
</body>
</html>
In this example, we have used background-color for transition-property, 1s for transition-duration, ease for transition-timing-function & 0.5s for transition-delay.
For hover background-color will change with transition effect.
You can try to check this output.
For transition-property if we use all then transition will work for all properties.
Like this:
transition: all 1s ease 0.5s;
CSS Animations
CSS Animations will be used to make animation for HTML elements.
Here is the shorthand syntax:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
Let’s elaborate it:
- animation-name will specify the name of the @keyframes animation
- animation-duration will specify the duration of an animation should take to complete for one cycle
- animation-timing-function will specify speed curve of the animation (some commonly used values: ease, linear, ease-in, ease-out, ease-in-out)
- animation-delay will specify when animation will start
- animation-iteration-count will specify the number of times an animation cycle should be played
- animation-direction means if an animation should be played forwards, backwards or in alternate cycles (some values: normal, reverse, alternate, alternate-reverse & normal is default)
- animation-fill-mode will specify what values are applied by the animation before it starts, after it ends, or in both situation
- animation-play-state will specify if the animation is running or paused
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
.code_animation_1 {
width: 200px;
height: 100px;
background-color: orange;
position: relative;
animation: animFrame 3s linear 0s infinite alternate;
}
@-webkit-keyframes animFrame {
from {left: 0;}
to {left: 50%;}
}
@keyframes animFrame {
from {left: 0;}
to {left: 50%;}
}
</style>
</head>
<body>
<div class="code_animation_1"></div>
</body>
</html>
You can try checking this output & hope you will like this.
CSS Media Queries
CSS media queries will be used to make website responsive.
Normally at first we will make design for desktop version & then will use CSS media queries to make responsive for other devices like mobiles, tablets etc.
Here is some sample media queries:
/* for width 980px & below */
@media only screen and (max-width: 980px) {
/* styles */
}
/* for width 767px & below */
@media only screen and (max-width: 767px) {
/* styles */
}
/* for width in between 480px & 767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles */
}
/* for width 479px & below */
@media only screen and (max-width: 479px) {
/* styles */
}
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-size: 40px;
}
@media only screen and (max-width: 767px) {
h2 {
font-size: 20px;
}
}
</style>
</head>
<body>
<h2>This is heading</h2>
</body>
</html>
So in this example, font-size for h2 is 40px & when screen size will be 767px or below then font-size will be 20px.
So based on your need you can change styles like this way.
