CSS INTRODUCTION
CSS stands for “Cascading Style Sheet” and it is used to style any web page or web document.
When we code something in Html language, it appears like a basic structure of a web page. This seems a non-attractive but a simple web document, but with CSS we can make it better in look so, anyone can easily interact with that web page/document. CSS makes it easy to style each and every part of the web document like styling header section, footer section, adding some transitions, animations, graphical backgrounds, flexible layouts, responsive designs, and much more.
Below is an example of CSS code in the Html Document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI CSS Tutorial</title>
</head>
<body>
<div class="container">
<style>
body{
background-color: #212526;
}
h1{
text-align: center;
color:antiquewhite;
}
p{
text-align: center;
font-weight: bold;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-style: italic;
font-size: large;
color:yellow;
}
a{
text-decoration: none;
color:darkblue;
font-weight: bolder;
}
#start, #end{
color:aliceblue;
font-size: 30px;
font-style: italic;
}
#link_to_mmi{
background-color: yellow;
color:#212526;
border-left:3px solid blue;
border-right:3px solid blue;
border-bottom:3px solid blue;
padding:5px;
}
</style>
<h1>CSS Intor</h1>
<p><span id="start">"</span>This is an example of CSS styling in a Html Document.</p>
<p>We are using internal css for this example.<span id="end">"</span></p>
<p id="link_to_mmi">For More Tutorials and Examples, Go to - <a href="mymixindia.com">MyMixIndia.com</a></p>
</div>
</body>
</html>
Output:
Explanation :
In this CSS code example, there is a basic Html document structure with CSS internal styling. You will study the 3 types of CSS practice later in this tutorial (internal, external, and inline CSS).
This basic Html structure contains a div element of the container class, h1 heading tag, p paragraph tags, span tags, and an anchor tag.
The style tag is used to describe the element’s styling properties. Like the background color of the whole document, the color of the anchor tag, and color of paragraph tags have changed as they have colored black by default.
Here in this example, we have used classes and ids to make a selector for applying different styles on each element. Like we have an h1 heading tag which is style as :
- text-align: center; – means the text will be displayed at the center of the container.
- color: antique white; – means the new color will be applied to the h1 tag.
The id name start and end of the span tag are used for styling the content inside the span tag also, we can put the same name here of the id/class for applying the same type of styling on a tag placed at different places. But providing a naming sequence to any tag or element will help us in determining the flow of the document. For example, the id name as start and end makes a scene that, there is a special content placed between these two.
- color: Alice blue;
- font-size: 30px; – means the size of the font text of span is set to 30 pixels.
- font-style: italic; – means the font text will appear as in an italic style.
One of the paragraph tags is used here with an id name called “link_to_mmi” and others are used without and id or class.
-
border-left: 3px solid blue; – means the border property like ( width, type, color ) will be applied on the left side of the paragraph block.
-
border-right: 3px solid blue; – means the border property like ( width, type, color ) will be applied on the right side of the paragraph block.
-
border-bottom: 3px solid blue; – means the border property like ( width, type, color ) will be applied on the bottom side of the paragraph block.
- padding: 5px; – means it will increase the internal space from all sides in the paragraph block.
Finally, the anchor tag having the basic style
- text-decoration: none; – means there is a simple text that appears without any underline.
3 types of practice of CSS
we can use the CSS in 3 ways in a web document.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
The inline CSS is implemented inside any tag, mainly inside opening tags. There are two types of tags basically paired and unpaired tags. The paired tags have an opening and a closing section (e.g head, body, div, h1 ), whereas unpaired tags are single element tags (e.g input, hr, br).
Like h1 is a (heading tag) paired tag because it has an opening and a closing tag, so the inline style will be implemented in its opening tag. Let’s see an example.
Below is an example of 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 Tutorial</title>
</head>
<body>
<div class="container">
<h1 style="text-align:center;color:red;">MMI CSS Tutorials</h1>
<br>
<h2 style="color:blue;">Inline CSS Example</h2>
<hr>
<div style="height:200px;width:200px;background-color: aquamarine;color:#000;border:none;padding:10px;">
<p style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;font-size: larger;">
<i><strong>This sentence is style with inline styling of the paragraph tag.</strong></i>
</p>
<hr>
<kbd style="font-size: large;font-weight: bold;color:blue;">
For more CSS Tutorials and Topics, Go To -
<a style="text-decoration: none;background-color:blueviolet;color:white;padding:2px;" href="mymixindia.com">
Mymixindia.com
</a>
</kbd>
</div>
</div>
</body>
</html>
Output
Internal CSS
The internal CSS is used inside the web document with the help of style tags.
A style tag is a paired tag which is used for internal styling.
You can place these tags anywhere in the document but commonly these styling tags are placed under the head section of a web document. Inside these styling tags, you can style up the whole document or you can just-style any section as much you required.
The Internal CSS, styles with tag names, and with tag selectors like classes and ids for the independent and individual styling of any section.
Below is an example of Internal Styling.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI CSS Tutorial</title>
<style>
body{
background-color: chartreuse;
}
h1{
text-align:center;
color:#000;
}
h2{
color:#000;
}
div{
height:200px;
width:200px;
background-color: #fff;
color:#000;
border:none;
padding:10px;
}
p{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: larger;
}
kbd{
font-size: large;
font-weight: bold;
color:blue;
}
a{
text-decoration: none;
background-color:blueviolet;
color:white;
padding:2px;
}
</style>
</head>
<body>
<h1>MMI CSS Tutorials</h1>
<br>
<h2>Internal CSS Example</h2>
<hr>
<div>
<p>
<i><strong>This sentence is style with internal styling placed under head section.</strong></i>
</p>
<hr>
<kbd>
For more CSS Tutorials and Topics, Go To -
<a href="mymixindia.com">
Mymixindia.com
</a>
</kbd>
</div>
</body>
</html>
Output
External CSS
The external CSS is the same as internal CSS but in this case, we make a separate file for our style sheet and link it with our main file. Like we have an Html document file and a style sheet file, so we can link our style sheet with our Html documents through Link tag. When the file link with the Document it will load all the style of that page. This method or practice make more the code cleaner and one can easily access to the style sheet, also it keeps all the Html code one side and CSS on the other side.
Below is an example of External CSS. Make a file with the Basic Html Content and name it as “index.html”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MMI CSS Tutorial</title>
<link rel="stylesheet" href="external_style.css">
</head>
<body>
<h1>MMI CSS Tutorials</h1>
<br>
<h2>External CSS Example</h2>
<hr>
<div>
<p>
<i><strong>This sentence is style with external styling linked with external_style.css file.</strong></i>
</p>
<hr>
<kbd>
For more CSS Tutorials and Topics, Go To -
<a href="mymixindia.com">
Mymixindia.com
</a>
</kbd>
</div>
</body>
</html>
Make another file for styling this document and name it as “external_style.css”.
Below is the code of external_style.css file.
body{
background-color: #044E84;
}
h1{
text-align:center;
color:#fff;
}
h2{
color:#fff;
}
div{
height:200px;
width:200px;
background-color: #fff;
color:#000;
border:none;
padding:10px;
}
p{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: larger;
}
kbd{
font-size: large;
font-weight: bold;
color:blue;
}
a{
text-decoration: none;
background-color:blueviolet;
color:white;
padding:2px;
}
Output
The link tag is used inside the head section is used to link the external_style.css with the index.html file.