Learn CSS For WordPress

CSS For WordPress Featured Image

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:

CSS For WordPress Visualization

Prerequisites

HTML For Beginners tutorial.

CSS Editor

Before starting CSS coding you can install one editor below:

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:

first css example

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 element Selector

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:

CSS ID Selector

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:

CSS class Selector

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:

CSS class Selector specific

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 class Selector multiple class

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 Universal Selector

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 Grouping Selector

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 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 Descendant Selector

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:

CSS Child Selector a default

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 Child Selector

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 Adjacent Sibling Selector

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:

CSS General Sibling Selector

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-color

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:

CSS background image

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:

CSS background repeat x

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:

CSS background repeat y

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 no repeat

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:

CSS_background position center top

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:

CSS background position 50% 50%

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:

CSS background position pixel

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:

CSS background size pixel

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:

CSS Rounded Borders

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:

CSS Margins Individual Sides

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:

CSS Margins Individual Sides with border

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:

CSS Padding Individual Sides with border

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:

CSS Box Model

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:

CSS Text Alignment Left

So here text is showing left aligned.

Now let’s replace text-align: left; with text-align: justify; 

Here is the output:

CSS Text Alignment Justify

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:

CSS Text Decoration

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 Transformation

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:

CSS Text Indentation

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:

CSS Letter Spacing

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:

CSS Word Spacing

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:

CSS Line Height

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 Text Shadow

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 Style italic

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 Google Fonts

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.

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 Absolute Position

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:

CSS Fixed Position

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 Visible

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:

CSS Overflow Hidden

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:

CSS Overflow Scroll

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:

CSS overflow-x and overflow-y

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 left

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 right

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 float none

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:

CSS clear left

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 first-child Pseudo-Class

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 last-child Pseudo-Class

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:

CSS nth-child Pseudo-Class number

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:

CSS nth-child Pseudo-Class keyword even

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 nth-child Pseudo-Class formula

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-line Pseudo Element

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 first-letter Pseudo Element

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 before Pseudo Element

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 after Pseudo Element

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:

CSS Image Opacity 0.1

Let’s try increasing opacity value to 0.5 & below the output:

CSS Image Opacity 0.5

So how it will show for opacity value 1?

Here it is:

CSS Image Opacity 1

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 Background Opacity

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 - Top to Bottom

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 - Left to Right

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:

CSS Linear Gradient - Diagonal

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.

CSS Linear Gradients Using Angles

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 Multiple Color Stops

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:

CSS Linear Gradients Using Transparency

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 Linear Gradients Repeating

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

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 Shape

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 Size & Position

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 Radial Gradients Repeating

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:

CSS Transform rotate() Function

Let’s change 40deg to -40deg & guess the output?

Here it is:

CSS Transform rotate() Function Negative Degree

 

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 Transform skew() Function

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 3D Transforms rotateZ()

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.