CSS Beginner
Contents |
What is CSS?
Cascading Style Sheets (CSS) us a style sheet language used to describe the presentation semantics of a document written in a HTML script. The main advantage of the CSS is that it allow designer to modify and change the content of a document without modify the document structure.
How to use the CSS in HTML script?
CSS In-line declaration
An inline declaration has many disadvantage and it is not recommended. You only use an inline declaration when you want to define the css in a specific section on your page. As it is defined within your HTML lag, it doesn't provide the center point of modification. Using the inline declaration, your css will be everywhere, and it is hard for you to make change.
<p style="color:blue;font-size:20px">This is my first paragraph</p>
CSS Embed Declaration
An Embed declaration, you declare your css in the header section of an HTML page. The Embed declaration is more centralized and it makes your life easier if you want to change your css. You only need to modify in a single place.
<html>
<head>
<title>Css declaration</title>
<style type="text/css">
h1 { color:blue;
font-size:16px;
}
div {
background-color:blue;
color:white;
margin-left:20px;
font-color:12px;
}
</style>
</head>
<body>
<h1>Embed style</h1>
<div>
You are learning css on how to embed your style sheet within html page
</div>
</body>
</html>
CSS Declare in External File
An External file is flexible because you can define your css rule in an external file. You just need to call the file within your head section of an HTML page. When you want to make change to your css file, you only need to modify the file. The external css file has the extension of .css, and you can use any text editor to create the external css file.
mystyle.css
h1 {color:blue;font-size:16px;}
div {
background-color:blue;
color:white;
margin-left:20px;
font-color:12px;
}
mypage.html
- Add External CSS: <link rel="stylesheet" type="text/css" href="mystyle.css" />
<html>
<head>
<title>Css declaration</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<h1>External File style</h1>
<div>
You are learning css on how to declare css file in the external file
</div>
</body>
</html>
