CSS Code Snippets

Useful CSS / CSS3 code snippets to style HTML elements, for page design, and Web Designers.

Animated Tooltip with HTML and CSS
- CSS code-snippet, example of an animated Tooltip made with HTML and CSS only.
Making Responsive IFRAMEs
- CSS code snippets for responsive iframe, both width and height. It works in desktop and mobile devices
Complex Shapes with a single DIV and CSS
- Complex Shapes with a single DIV and CSS properties, without image file
Heart shape with CSS
- Heart shape, created with a single DIV tag and CSS properties, without image
Yin-Yang with CSS
- Yin-Yang circle, created with a single DIV tag and CSS properties, without image
Egg shape with CSS
- Egg shape, created with a single DIV tag and CSS properties, without image
Clepsydra shape with CSS
- Clepsydra shape, created with a single DIV tag and a few CSS properties
TV-Screen shape with CSS
- TV-Screen shape, created only with a single DIV tag and a CSS properties
Diamond shape with CSS
- Two diamond shapes, simple created with a single DIV tag and CSS properties
Buttons with CSS
- Buttons created only with CSS, CSS3 properties, without using image file
Star shapes with CSS
- Star shapes, 5, 6, 8 and 12 points, created with a single DIV tag and CSS properties
Polygons with CSS
- Various Polygons shapes with CSS properties, Parallelogram, Pentagon, Hexagon, Octagon
Circle and Oval with CSS
- Circle and Oval shapes created with a single HTML DIV tag and CSS properties
Triangles with CSS
- Various Triangle shapes with CSS properties, triangle up, down, left, right
CSS Rhombus Shape
- CSS Rhombus Shape, create a rhombus with a DIV and CSS properties
CSS Trapezoid Shape
- CSS Trapezoid Shape, create a trapezoid with a DIV and CSS properties
Making DIV Contents Scroll Horizontally, with multiple Div`s inside
- Making DIV Contents Scroll Horizontally, with multiple Div`s inside. CSS code-snippets
Center Fixed and Absolute element
- How to center a fixed, or absolute HTML element, Div or other block element
Transparent Background, but not the text-content on it
- Transparent Background Color, and transparent image, with CSS, but not the text-content on it
Tabs effect with CSS
- Tabs effect with CSS. A single content divided into multiple sections, each associated with a header (or tab) in a list, that can be swapped to save s

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is used to include external CSS file in web page?

<link href="/templ/style.css" rel="stylesheet" type="text/css" />

Which CSS property sets the text size?

font-weight text-decoration font-size

h2 {
  font-size: 1em;
}

Indicate the JavaScript property that can add HTML code into an element.

text value innerHTML

document.getElementById("someID").innerHTML = "HTML content";

Click on the function that returns the number of characters of a string in PHP.

count() strlen() stristr()

$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22

Last accessed pages

For loops in ActionScript ⁽⁴⁴⁶²⁾
Days between two dates, or of a specified week, in PHP MySQL ⁽³⁶³³⁾
Change CSS file with jQuery ⁽⁵³⁷³⁾
Complex Shapes with a single DIV and CSS ⁽³⁶⁹²⁾
Brush and Eraser ⁽³²⁷⁴⁾

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽³³⁴⁾
Read Excel file data in PHP - PhpExcelReader ⁽¹²⁸⁾
The Four Agreements ⁽⁹⁸⁾
PHP Unzipper - Extract Zip, Rar Archives ⁽⁹⁶⁾
The Mastery of Love ⁽⁹⁰⁾