IT PRESENT
CSS Styling Layouts Elements - Examples Design Templates
Css Layouts
Using CSS attributes, HTML layouts can be directly stylized, without the need for ID and CLASS selectors.
Moreover, if there is a need to edit the details of the layout elements, it is possible to add new CSS attributes via the ID and CLASS selectors.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>CSS Layouts</title>
<style>
#wrap {
width:75%;
background-color: #56A5EC;
border:6px ridge gray;
}
header {
background-color: aqua;
border:2px ridge white;
padding:2px;
margin:5px;
}
nav {
background-color: white;
border:2px ridge white;
height:50px;
margin:5px;
}
main {
background-color: #BCC6CC;
border:2px ridge white;
display:inline-block;
width:77%;
margin:6px;
}
section {
background-color: green;
border:4px ridge white;
width:90%;
margin:5px;
}
article {
background-color: red;
border:3px ridge white;
width:90%;
height:50px;
margin:5px;
}
aside {
background-color: yellow;
border:5px ridge white;
width:16%;
float:right;
height: 530px;
margin:5px;
}
footer {
background-color: blue;
border:5px ridge white;
height:50px;
margin:5px;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h2>HEADER</h2>
</header>
<nav>
<h2>NAVIGATION BAR</h2>
</nav>
<main>
<h2>MAIN</h2>
<section>
<h2>SECTION 1</h2>
<article>
<h2>ARTICLE 1</h2>
</article>
<article>
<h2>ARTICLE 2</h2>
</article>
</section>
<section>
<h2>SECTION 2</h2>
<article>
<h2>ARTICLE 1</h2>
</article>
<article>
<h2>ARTICLE 2</h2>
</article>
<article>
<h2>ARTICLE 3</h2>
</article>
</section>
</main>
<aside>
<h2>ASIDE</h2>
</aside>
<footer>
<h2>FOOTER</h2>
</footer>
</div>
</body>
</html>
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>CSS Layouts</title>
<style>
#wrap {
width:75%;
background-color: #56A5EC;
border:6px ridge gray;
}
header {
border:2px ridge white;
padding:2px;
margin:5px;
}
nav {
border:2px ridge white;
height:50px;
margin:5px;
}
main {
border:2px ridge white;
display:inline-block;
width:77%;
margin:6px;
}
section {
border:4px ridge white;
width:90%;
margin:5px;
}
article {
border:3px ridge white;
width:90%;
height:50px;
margin:5px;
}
aside {
border:5px ridge white;
width:16%;
float:right;
height: 530px;
margin:5px;
}
footer {
border:5px ridge white;
height:50px;
margin:5px;
}
</style>
</head>
<body>
<div id="wrap">
<header>
<h2>HEADER</h2>
</header>
<nav>
<h2>NAVIGATION BAR</h2>
</nav>
<main>
<h2>MAIN</h2>
<section>
<h2>SECTION 1</h2>
<article>
<h2>ARTICLE 1</h2>
</article>
<article>
<h2>ARTICLE 2</h2>
</article>
</section>
<section>
<h2>SECTION 2</h2>
<article>
<h2>ARTICLE 1</h2>
</article>
<article>
<h2>ARTICLE 2</h2>
</article>
<article>
<h2>ARTICLE 3</h2>
</article>
</section>
</main>
<aside>
<h2>ASIDE</h2>
</aside>
<footer>
<h2>FOOTER</h2>
</footer>
</div>
</body>
</html>
result:
