What is CSS- A CSS stands for Cascading Style Sheets, It uses to design a website. This means how the website or web page will look and give a better user interface. In this tutorial you will learn about a basic CSS stylesheet and how to use it with HTML code.
Types of CSS
There is three type (ways to use) of Cascading Style Sheets
- Inline CSS
- Internal or Embedded CSS
- External CSS
CSS Syntax
You must shining about how does CSS look like and its syntax?
Its different look for a different way of use like inline different with other. But for standard way define is used a External CSS.
If you have any tag and you
See example trying to change the color of <p> tag, that write color then colon “ : ” then value then end with a semicolon ” ; “. If You want more property then just in the next line with property name and value within a closing curly bracket.
p {
Property: value
}It will change the color for all of <p> tag of the web pages. Here are commonly used property in CSS – border, color, margin, padding, text-align, width, float, visibility, etc. There are so many properties in CSS.
Example
A below code is based on external css file example.
H1{
color:blue;
}
p {
font-size: 18px;
}How to use CSS in HTML?
As we know there is 3 type or ways to use CSS in HTML – inline, internal and external. Let’s See one by one how
Inline CSS
With inline CSS you have to dine a css in the HTML tag, for example, you are using <p> tag than inside open this tag have to write style = “property: value;”>. See the below example a using CSS (color, font-size, font-style, test-align) with HTML.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#049CA2;
font-size:50px;
font-style:bold;
text-align:center;">
EyeHunts</p>
</body>
</html> Output and source code screenshot, a screenshot took with inception view, so you can see left side is output and right side is code.
Internal or Embedded CSS
It’s also a single HTML document CSS same as inline CSS. What is Single HTML documented – When a CSS and HTML code inside the same file. Internal CSS (Embedded CSS) and inline CSS both are examples of it.
To define a Internal CSS you need to use <head> tag and inside it use <style>…</style>. here is One concept come a “class”, you have to use the class attribute to give a particular identity of the tag. So it will change only the single tag. This example using a <div> tag, which is stands for division or a section in an HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.name {
color:#049CA2;
font-size:40px;
font-weight:bold;
}
.learn {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="name">EyeHunts</div>
<div class ="learn">A Tutorial portal for Learner's</div>
</div>
</body>
</html> Output and source code screenshot – You can also use <p> tag for this example.
External CSS
The last and most important External CSS, it uses a separate class and link to the HTML page. The separate CSS class only contains a style property with the help of tag attributes of HTML (For Example class, id, etc).
The CSS file extension is dot CSS and you can give any name of it, for
Cascading Style Sheets –style.css
body {
background-color: lightgray;
}
.main {
text-align: center;
}
.name {
color: dimgray;
font-size: 50px;
font-weight: bold;
}
#learn {
color: #898989;
font-style: italic;
font-size: 20px;
}
HTML file – MySite.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="main">
<div class="name">EyeHunts</div>
<div id="learn">
A Portlal for learner's </p>
</div>
</body>
</html>Output and source code screenshot: Left Side is output and rise is resources then code.
Save a CSS File
Just like the html save the file, you have to save the CSS file name with the dot css extension. For example can file – “style.css”. You can put any name for cascading style sheets.
Advantages of css
- Easy maintenance
- Fast webpage loading
- Search engine friendly
- Absolute positioning
- Printer Friendly
Disadvantages of css
- Cross-Browser Issues
- Comes in Different levels – CS, CS1 to CS3
- Fragmentation – what works with one browser may not always work with another.
- Lack of security – Because it is an open text-based system, CSS doesn’t have the built-in security that will protect it from being overridden. Anyone who has read/write access to a website can change the CSS file, alter the links or disrupt the formatting, whether by accident or design.
What does CSS stand for or CSS meaning?
CSS meaning is Cascading Style Sheets and its use for the style a webpage in Web Applications.
Why CSS used in HTML?
A CSS is used with HTML code to make your website more attractive. Without using CSS code in the HTML webpage look very ugly, everything will be messed. CSS is controlling a tag (property) of HTML.
How to use a CSS or How to use a CSS file in HTML?
There are 3 ways, You can use a CSS with HTML first one is inline within a tag (e.g. <p>, <a>, <h1> etc). The second ways it used Internal CSS which required to give identity to tag and define is the style in <head> section. And last way is to create a separate CSS file and link to it by using a <Link…> tag. Don’t forget to add the rel attribute as rel=”StyleSheet”.
Do comment if you have any doubt and suggestion on this tutorial.
Note: The HTML and CSS code is tested on Safari browser.
OS : macOS 10.14 Mojave