CSS
Jump to navigation
Jump to search
Contents
About
I use CSS (Cascading Styles Sheets) quite regularly, but I'm only just starting to learn how to do flyout menus... below are some links which have helped me.
Child Pages
Related/Child Pages:
- CSS - Center Crop Image - how to center crop an image so that it fits a specified size (height x width) and fills full height and width with necessary cropping.
- CSS - Centered Thumbnail Display - how to get an image of unknown dimensions to fit centered inside a div.
- CSS - Colored Navigation Tabs - how to display some pretty navigation tabs.
- CSS - Multilevel Navigation Bar - a nice 4 level navigation bar.
- CSS - Image Grid with Labels - a bunch of image thumbnail squares with a semi-transparent label over the top.
- CSS - Instant Tooltip - A tooltip that appears instantly.
- CSS - Zoom Image on Rollover - image enlarges when you hold the mouse over it.
- CSS - Dropdowns on Hover - Create dropdown menu or info window when you rollover an element, entirely in CSS/HTML (no JavaScript required).
- CSS - Collapsible Zippy - A simply zippy solution that needs only very minimal JavaScript.
- CSS - Checked Zippy - A zippy solution that uses checkboxes and thus is useful for forms.
- CSS and JavaScript - Progress Bar - example of the progress bar tab.
Internal Style Sheet
To declare CSS inside the HTML:
<!doctype html>
<html lang="en">
<head>
<title>Internal/Inline Stylesheet Example</title>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>Title</h1>
Normal text
</body>
</html>External Style Sheet
Usually near though, is to put the CSS into an external file, and then link in:
example.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>External Style Sheet Example</title>
<link rel="stylesheet" href="example_styles.css?v=1.0">
</head>
<body>
<h1>Title</h1>
Normal text
</body>
</html>example_styles.css:
/* Only forwardslash star comments are allowed */
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
Related Pages
