CSS stands for Cascading Style Sheets , it defines how HTML elements are to be displayed.
It can be added to HTML elements in 3 ways:
1.Inline - using a style attribute in HTML elements
2.Internal - using a <style> element in the HTML <head> section
3.External - using one or more external CSS files
The syntax for CSS Styling is :
element { property:value ; property:value }
INLINE STYLING :
Inline styling is useful for applying a unique style to a single HTML element .
Example for Inline Styling :
<!DOCTYPE html>
<html>
<body>
<h1 style="color:steelblue"> This is inline styling example</h1>
</body>
</html>
INTERNAL STYLING :
An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styling is defined in the <head> section of an HTML page, using a <style> tag
Example for Internal styling :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: Medium Turquoise }
h1 { color:steelblue; font-family:verdana; font-size:300%; }
p { color:DarkOrchid; font-family:verdana; font-size:200%; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
EXTERNAL STYLING :
In External styling the same styles can be used across multiple pages of the site .
External styles are defined in the <head> section of an HTML page, in the <link> tag .
Example for External Styling :
<!DOCTYPE html>
<html>
<head>
<link rel="External" href="style1.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS BOX :
This creates a box a around an HTML element , CSS border property defines a visible border around an element and padding property defines a padding space inside the border , margin property defines a margin space outside the border .
Example for CSS Box :
<!DOCTYPE html>
<html>
<head>
<style>
p { border:5px solid steelblue; padding:10px; margin:30px; }
div { width: 320px; padding: 10px; border: 5px solid Turquoise; margin: 30px; }
</style>
</head>
<body>
<p>CSS BOX EXAMPLE</p>
<div>
<p> This a Box </p>
</div>
</body>
</html>
NAVIGATION BAR :
A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites
Vertival Navigation Bar
In the vertical navigation bar all the content will be in vertical format.
Example For Vertical Navigation Bar
<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; }
li a { display: block; color: #000; padding: 8px 0 8px 16px; text-decoration: none; }
li a.active { background-color: steelblue; color: white; }
li a:hover:not(.active) { background-color: turquoise; color: white; }
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, Active class is in a Steelblue background color and a white text.</p>
<ul>
<li>
<a class="active" href="#home"> Home</a>
</li>
<li>
<a href="#Content">Content</a>
</li>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
</body>
</html>
Fixed Vertical Navigation Bar
In fixed Vertical Nave Bar, the nav bar will be fixed in the same position even if the content of the page is scrolled down.
Example for Fixed Vertical Nav Bar
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; }
ul { list-style-type: none; margin: 0; padding: 0; width: 26%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; }
li a { display: block; color: #000; padding: 8px 0 8px 16px; text-decoration: none; } li a.active { background-color: steelblue; color: white; }
li a:hover:not(.active)
{ background-color: turquoise; color: white; }
</style>
</head>
<body>
<ul>
<li>
<a class="active" href="#home"> Home</a>
</li>
<li>
<a href="#news">News</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#about">About</a>
</li>
</ul>
<div style="margin-left:26%; padding:2px 16px;height:1000px;">
<h2>Fixed Side Nav Bar</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3> <p>Notice that this div element has a left margin of 26%. This is because the side navigation is set to 26% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).
</p>
<p>Text 1</p>
<p>Text 2</p>
<p>Text 3</p>
<p>Text 4</p>
<p>Text 5</p>
<p>Text 6</p>
<p>Text 7</p>
<p>Text 8</p>
<p>Text 9</p>
</div>
</body>
</html>
Horizontal Navigation Bar
In the horizontal navigation bar all the content will be in horizontal format.
<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }
li { float: left; }
li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
li a:hover:not(.active) { background-color: turquoise; }
.active { background-color: steelblue; } </style>
</head>
<body>
<h3> Horizontal Navigation Bar </h3> <p>In this example, Active class is in a Steelblue background color and a white text.</p>
<ul>
<li>
<a class="active" href="#home"> Home</a>
</li>
<li>
<a href="#news">Content</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li><a href="#about">About</a>
</li>
</ul>
</body>
</html>
Fixed Horizontal Nav Bar
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; }
li { float: left; }
li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
li a:hover:not(.active) { background-color: turquoise; }
.active { background-color: steelblue; } </style>
</head>
<body>
<ul>
<li>
<a class="active" href="#home"> Home</a>
</li>
<li>
<a href="#news">News</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li>
<a href="#about">About</a>
</li>
</ul>
<div style="padding:20px;margin-top: 30px;background-color:lightgrey; height:1500px;">
<h1>Fixed Top Navigation Bar</h1> <h2>Scroll this page to see the effect</h2>
<h2> Nav bar will stay at the top of the page while scrolling</h2>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
<p>Some text </p>
</div>
</body>
</html>
DROPDOWN
A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one.
Example For Dropdown
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown1 { position: relative; display: inline-block; }
.dropdown1-content { display: none; position: absolute; background-color: lightgrey; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; }
.dropdown1:hover .dropdown1-content { display: block; }
.dropbtn { background-color: steelblue; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover
.dropbtn { background-color: turquoise; }
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown </button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<h2>Hoverable Dropdown</h2> <p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown1"> <span>Mouse over me</span>
<div class="dropdown1-content"> <p>Hoverable Dropdown</p>
</div>
</div>
</body>
</html>
IMAGE GALLERY
Example for Image Gallery
<!DOCTYPE html>
<html>
<head>
<style>
div.img { margin: 10px; border: 1px solid #ccc; float: left; width: 120px; height : 200px; }
div.img:hover { border: 3px solid steelblue; }
div.img img { width: 100%; height: 100px; }
div.desc { padding: 15px; text-align: center; }
</style>
</head>
<body>
<div class="img">
<a target="_blank" href= "img_tiger.jpg"> <img src="img_tiger.jpg" alt="tiger" width="300" height="200">
</a>
<div class="desc">This is a Tiger </div> </div> <div class="img">
<a target="_blank" href= "img_olm.jpg"> <img src="img_olm.jpg" alt="olm" width="300" height="200">
</a>
<div class="desc">This is a Olm </div> </div>
<div class="img">
<a target="_blank" href= "img_pygmy.jpg"> <img src="img_pygmy.jpg" alt="pygmy" width="300" height="200">
</a>
<div class="desc">This is a Pygmy Marmoset </div>
<div class="img"> <a target="_blank" href= "img_tarsier.jpg">
<img src="img_tarsier.jpg" alt= "tarsier" width="300" height="200">
</a>
<div class="desc">This is Tarsier </div> </div>
</body>
</html>
Animated Text Field
STYLING TEXT AREA & SELECT MENU
<!DOCTYPE html>
<html>
<head>
<style>
select { width: 60%; padding: 16px 20px; border: 3px solid steelblue; background-color: turquoise; }
textarea { width: 60%; height: 150px; padding: 12px 20px; box-sizing: border-box; border: 3px solid steelblue; border-radius: 10px; background-color: #f8f8f8; font-size: 16px; resize: none; }
</style>
</head>
<body>
<h3>Styled Select Menu</h3>
<form>
<select id="country" name="country"> <option value="ind">Nigeria</option> <option value="ind">China</option> <option value="ind">Brazil</option>
</select>
</form>
<h3> Styling Text Area </h3>
<form>
<textarea>
some text .. some text .. some text .. some text .. some text .. some text .. some text .. some text .. some text .. some text .. some text .. some text ..
</textarea>
</form>
</body>
</html>
ANIMATION&TRANSITION
Animation
An animation lets an element gradually change from one style to another, we can change as many CSS properties and many times as we want.
To use CSS3 animation, we must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times.
When we specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To get an animation to work, we must bind the animation to an element.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 200px; height: 150px; background-color: steelblue; position: relative; -webkit-animation-name: example; -webkit-animation-duration: 4s; -webkit-animation-iteration-count:3; animation-name: example; animation-duration: 4s; animation-iteration-count: 3; }
@-webkit-keyframes example { 0% {background-color:steelblue; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:orange; left:0px; top:0px;} }
</style>
</head>
<body>
<p>
<h3>ANIMATION</h3>
</p>
<div>
</div>
</body>
</html>
Transition
Transitions allows you to change property values smoothly from one value to another, over a given duration. To create a transition effect, you must specify two things, the CSS property you want to add an effect to and the duration of the effect.If the duration part is not specified, the transition will have no effect, because the default value is 0.
<!DOCTYPE html>
<html>
<head>
<style>
#a { width: 100px; height: 100px; background: steelblue; -webkit-transition: width 2s; transition: width 2s; }
#a:hover { width: 400px; }
#b { width: 100px; height: 100px; background: turquoise; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; transition: width 2s, height 2s, transform 2s; }
#b:hover { width: 300px; height: 300px; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
</style>
</head>
<body>
<h3> Transition </h3>
<div id ="a">
</div>
<p>Hover over the div element above, to see the transition effect.</p>
<div id ="b">
</div>
</body>
</html>
To be continue NEXT POST...
Thanks for reading.
Comments