My Mix India

The New Way

CSS Tutorials

CSS – Introduction

  • What Is CSS?
  • Code Example
  • Output

CSS stands for “Cascading Style Sheet“. It is used to style any webpages or design any website. It is commonly used in web design as well as it is an essential tool for making a user-friendly interface like UI and UX designs for a website.

You can use CSS in 3 different ways, Inline, Internal, and External. The Inline CSS is used with the Html Code file and it is used inside Html tags. Internal is also used in the same Html Code File but it is used with style tags. All the CSS code is written inside these style tags and these style tags mainly placed inside the head section of the Html Document. And Last, the External CSS is written in a separate file with file extension .css and this file embeds with the Html Code file.

Learn More About The 3 ways to use CSS.

Type format – StyleSheet. File Extensions .css.

CSS code example for a Html code

body{    background-color: yellow;    text-align: center;}h1{    color:#000;}

CSS Code Output

css_tutorial_mmi_css_code_example

body background color – yellow, text alignment – center, and h1 tag color – black,

CSS – Basic Syntax

  • What is the Basic Syntax of CSS ?

CSS is very easy to learn and implement. You can design a single web page or can style the whole website with CSS. The basic syntax of CSS includes selectors and their properties. Selectors like classes and ids of different tags and elements which specify any media or content. And this content can be styled by using CSS.

Example – Styling a heading by using some CSS properties for headings like font-size, color, text spacing, text alignment, text-shadow, etc.

Basic Syntax of CSS contains tag name, selector, or an id the “{ }” brackets, inside these brackets, CSS properties with their values.

Comment in CSS

The CSS Comment starts with “/*” and ends with “*/”.

Example – /* This is a comment for a single line and for multiple lines. */

Learn more about – CSS Basic Syntax.

CSS – Selectors

  • CSS Selectors

The CSS Selectors are the classes and ids which are used to make any Html Element specific and unique. These selectors help in styling those unique Html elements.

Example : (Using Internal CSS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MMI HTML Tutorial</title>
    
</head>
<body>
    <style>
        h1{
            text-align:center;
        }
    </style>

        <h1>My Mix India</h1>
    
    
</body>
</html>

Output –

MMI CSS – Tutorials

We are using Internal CSS. For this example.

More about – CSS Selectors

 

CSS – Colors

  • CSS Colors

Colors play a major role in styling anything physical or virtual. The CSS color is a property that is used to color Html elements like text, border, background, etc.

The CSS color property is used with different naming formats like color codes RGB and rgba, color name, hex-color code. HSL, etc.

Example : (inline CSS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MMI - CSS Tutorials</title>
</head>
<body>  
      <p style="color: blue;">Color Name - blue as value</p>
    <br>
    <p style="color: #0f0;">
Color Hex-Code - #0f0 as value</p>
    <br>
    <p style="color: rgb(122,25,100);">
Color rgb code - rgb(122,25,100) as value</p>
    <br>
    <p style="color: rgba(255,50,50,0.5);">
Color rgba code - rgba(255,50,50,0.5) as value</p>
    <br>
    <p style="color: hsl(5,25%,20%);">
Color hsl code - hsl(5,25%,20%) as value</p>
    <br>
    <p style="color: hsl(5,25%,20%,0.8);">
Color hsla code - hsla(5,25%,20%,0.8) as value</p>
</body>
</html>

 

More about – CSS Colors

CSS – Margin

  • CSS Margin

CSS Margin is a styling property that is used to create space around any elements. The CSS margin can be used in all directions like the top bottom, left, and right.

The CSS margin sets an outer space around an object and increases space around its adjacent elements.

Margin can cover all four sides of an element and can be used for any selective side.

Property Example :

  • margin-right
  • margin-left
  • margin-top
  • margin-bottom

Code Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MMI - CSS Tutorials</title>
    <style>
</style>
</head><body>
        <h1>CSS Margin</h1>
    <hr>
    <div class="card" style="border:1px solid blue;">
        Outer Div = card.(using inline CSS)
            <div class="box" style="width:100px;height:100px;border:1px solid red;margin:10px;">
Inner Div = Box.(using inline CSS)            Margin for all sides = 10px.

</div>
</div>
</body>
</html>

 

More about CSS Margin

CSS – Padding

  • CSS Padding

CSS Padding is a styling property which is used to set inner space within an element.

Like the margin, the padding is also used for increasing space around all sides and it can be used for any side like the top, bottom, left, and right.

Property Example :

  • padding-top
  • padding-bottom
  • padding-left
  • padding-right

Code Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MMI - CSS Tutorials</title>
    <style>
</style>
</head>
<body>
        <h1>CSS Padding</h1>
    <hr>
    <div class="card" style="border:1px solid blue;padding-top: 40px;padding-left: 100px;">
        Outer Div = card.(using inline CSS)        Padding-Top = 40px;        Padding-Left = 100px;
            <div class="box" style="width:300px;height:300px;border:1px solid red;padding:30px;">
Inner Div = Box.(using inline CSS)            Padding for all sides = 30px.

</div>
</div>
</body>
</html>

 

More about – CSS Padding

CSS – Text

  • CSS Text

In CSS text is very easy to style and decorate. There are many properties to style text like color, size, font family, shadow, etc.

Code Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MMI - CSS Tutorials</title>
    <style>
        h2{  
color:red;
            text-align: center;
        }
        p{
            color:rgb(100,255,100);
            font-weight: bold;
            font-size: 50px;
}
        a{
            text-decoration: none;
            text-transform: lowercase;
            color:orange;
            font-size: 40px;
            font-weight: lighter;
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-variant: small-caps;
            text-shadow: black;
        }

</style>
</head><body>
        <h1>CSS Text</h1>
    <hr>
    <div class="card" style="border:none;">
        <h2>Heading text</h2>
        <hr>
        <p>This is a paragraph text</p>
        <hr>
        <a href="#">This is a link text</a>
    </div>
</body>
</html>

 

More about – CSS Text

CSS – Background

  • CSS Background

CSS Background Property is used to set a background for an element. The background property is also used with different nature like color, attachment, image, gradient, etc.

Code Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MMI - CSS Tutorials</title>
    <style>
        h2{
            color:black;
            text-align: center;
        }
       body{
           background-color: bisque;
       }
       .card{
           background-color: yellow;
           border:1px solid black;
           padding:10px;
}
</style>
</head>
<body>
        <h1>CSS Background</h1>
    <hr>
    <div class="card">
        <h2>Heading text</h2>
        <hr>
        <p>This is a paragraph text</p>
            </div>
</body>
</html>

 

More about CSS Background

CSS – Border

  • CSS Border

CSS Border property is used to make a border around the elements. The border is used to make a separation of a with other adjacent elements.

It is also used with different properties and styles like solid, dotted, inline, outline, etc.

Code Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MMI - CSS Tutorials</title>
    <style>
               .card{
           background-color: #212526;
           border:10px solid red;
           padding:10px;
           color:#fff;
}
</style>
</head>
<body>
        <h1>CSS Border</h1>
    <hr>
    <div class="card">
        Div = Card.        Border = 10px Solid Red;        This is an example of a CSS Border.            </div>
</body>
</html>

 

More about HTML – Classes and Ids

CSS – Images

  • CSS Image

You can style any image on the web document with CSS and make it better in look. The CSS Image properties are used to styling an image by changing its size, border, effects, applying shadow, etc.

Code Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MMI - CSS Tutorials</title>
    <style>
               .card{
           background-color: #fff;
           border:10px solid red;
           padding:10px;
           color:#fff;
}
       img{
           box-shadow: 1px 2px 2px 1px rgb(0,0,0,0.4);
}
</style>
</head>
<body>
        <h1>CSS Image</h1>
    <hr>
    <div class="card">
        <img src="../images/mmi-cover.png" width="auto" height="200px" alt="MMI COVER">
    </div>
</body>
</html>

 

More about – CSS Image

CSS Tutorial

More CSS Topics

  • CSS Tables

  • CSS Block

  • CSS Overflow

  • CSS List & Navigation bar

  • CSS Forms

  • CSS Opacity

  • CSS Pseudo

  • CSS Float

  • CSS Align

  • CSS Links

  • CSS Transition

  • CSS Animation

More Tutorials

Latest for You

computer Tutorials Scripting Languages Blog Post HTML Quiz Html Quiz Education

HTML QUIZ – 10

Quiz Html Quiz Education computer Tutorials Scripting Languages Blog Post HTML

HTML QUIZ – 9

Education Tutorials Scripting Languages Blog Post HTML Quiz Html Quiz

HTML QUIZ – 8

India News Blog Post Trending

Best Tourist Places in India in 2024