1. Inline style sheet
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <!--inline style: Add style syntax to individual labels: <div style= "..." ></div> - </Head> <Body> <!--<div>div1</div> - <Divstyle= "Width:100px;height:100px;background-color:pink"></Div> <Divstyle= "Width:100px;height:100px;background-color:pink"></Div> <Divstyle= "Width:100px;height:100px;background-color:pink"></Div> <Divstyle= "Width:100px;height:100px;background-color:pink"></Div> <Divstyle= "Width:100px;height:100px;background-color:pink"></Div> <Divstyle= "Width:100px;height:100px;background-color:pink"></Div> </Body></HTML>
2. Internal style sheet
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <!--The internal style sheet is valid for the current HTML file - <style>Div{width:100px;Height:100px;Background-color:Pink; } </style> </Head> <Body> <Div></Div> <Div></Div> <Div></Div> <Div></Div> <Div></Div> <Div></Div> </Body></HTML>
3. Outreach Style Sheets
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <!--external style sheet <link href= "style.css" rel= "stylesheet"/> - <Linkrel= "stylesheet"href= "Index.css" /> </Head> <Body> <Div></Div> <Div></Div> <Div></Div> <Div></Div> <Div></Div> <Div></Div> </Body></HTML>
Here is the code for INDEX.CSS
Div { width: 100px; height: 100px; background-color:yellow;}
Web front-end development engineer learns the next day style sheet