HTML CSS Basics


HTML elements can be individually customized by adding various style properties like font size, color, background color, etc

eg :

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #563435;}
h2   {color: #fbcfbc;}
</style>
</head>
<body>

<h2>Your heading</h2>
<p>Learn HTML CSS</p>

</body>
</html>

Output :


You can define the style components in the same file or use the style components from other files

eg:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="myCSS.css">
</head>
<body>

<h1>Your heading</h1>
<p>Learn HTML CSS from ourcoaching.com</p>
<p id="OC_1">This text has a border around it, as defined in css file</p>

</body>
</html>


CSS file for above HTML code

myCSS.css file:

body {
    background-color: #562438;
}
h1 {
    color: #089704;
}
p {
    color: #ff9802;
}

#OC_1 {
    color: #ff9802;    
border: 3px solid black;
}


output of above file:




All the style parameters can be defined in the CSS sheet and used any number of times in main HTML code. CSS styles cannot be changed in HTML code. You will either have to define a new style parameter or a new CSS element for any changes



Related Tutorials