Tutorial by Examples: css

Using CSS transform

CSS transforms are based on the size of the elements so if you don't know how tall or wide your element is, you can position it absolutely 50% from the top and left of a relative container and translate it by 50% left and upwards to center it vertically and horizontally. Keep in mind that with this...

CSS • Centering

Selecting elements using CSS selectors

String html = "<!DOCTYPE html>" + "<html>" + "<head>" + "<title>Hello world!</title>" + "</head>" + "<body>" + ...

Jsoup • Selectors

External CSS Stylesheet

HTML • Linking Resources

Embedded Templates and CSS Styles

You can embed another template body into your template via {{template "mysharedtemplate" .}} to reuse shared components. Here is an example that creates a header template that can be reused at the top of all other template bodies. It also uses CSS to stylize the output so that it is easier...

Bosun • Templates: Overview

Embedding SVG using CSS

You can add external SVG files using the background-image property, just as you would do with any other image. HTML: <div class="attention"></div> CSS: .attention { background-image: url(attention.svg); background-size: 100% 100%; width: 50px; height: ...

HTML • SVG

Alternative CSS

HTML • Linking Resources

CSS @import rule (one of CSS at-rule)

The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules. @import. How to use @import You can use @import rule ...

CSS • Getting started with CSS

normalize.css

Browsers have a default set of CSS styles they use for rendering elements. Some of these styles can even be customised using the browser's settings to change default font face and size definitions, for example. The styles contain the definition of which elements are supposed to be block-level or inl...

CSS • Normalizing Browser Styles

Including internal css file with another css file as a dependency

function themeSlug_enqueue_scripts() { wp_enqueue_style( 'themeSlug-reset', get_template_directory_uri() .'/css/reset.css', '1.0.0' ); wp_enqueue_style( 'themeSlug-style', get_template_directory_uri() .'/style.css', 'themeSlug-reset', '1.0.0'); } add_action('wp_enqueue_scripts', 'themeSl...

WordPress • Enqueuing Styles

Including internal css file

In this case style.css is located in root of the theme's folder function themeSlug_enqueue_scripts() { wp_enqueue_style( 'themeSlug-style', get_template_directory_uri() .'/style.css', '1.0.0'); } add_action('wp_enqueue_scripts', 'themeSlug_enqueue_scripts');

WordPress • Enqueuing Styles

Including external css file

In this example we want to include font awesome icon font function themeSlug_enqueue_scripts() { wp_enqueue_style( 'font-awesome', '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css'); } add_action('wp_enqueue_scripts', 'themeSlug_enqueue_scripts');

WordPress • Enqueuing Styles

Using CSS selectors in BeautifulSoup

BeautifulSoup has a limited support for CSS selectors, but covers most commonly used ones. Use select() method to find multiple elements and select_one() to find a single element. Basic example: from bs4 import BeautifulSoup data = """ <ul> <li class="item&quo...

Python Language • HTML Parsing

$ and $$ CSS selector locator shortcuts

The Protractor API allows CSS element locators to use the jQuery-like shortcut notation $(). Normal CSS Element Locator: element(by.css('h1.documentation-text[ng-bind="title"]')); element(by.css('[ng-click="submit"])); Shortcut $() CSS Element Locator: $('h1.documentatio...

protractor • CSS Selectors

Using CSS for styling

CSS can be applied in multiple places: inline (Node.setStyle) in a stylesheet to a Scene as user agent stylesheet (not demonstrated here) as "normal" stylesheet for the Scene to a Node This allows to change styleable properties of Nodes. The following example demonst...

javafx • CSS

Additional CSS styles and JS scripts for admin page

Suppose you have a simple Customer model: class Customer(models.Model): first_name = models.CharField(max_length=255) last_name = models.CharField(max_length=255) is_premium = models.BooleanField(default=False) You register it in the Django admin and add search field by first_name...

Django • Administration

Using CSS selectors to locate elements in BeautifulSoup

BeautifulSoup has a limited support for CSS selectors, but covers most commonly used ones. Use select() method to find multiple elements and select_one() to find a single element. Basic example: from bs4 import BeautifulSoup data = """ <ul> <li class="item&quo...

beautifulsoup • Locating elements

Example of Javascript + CSS + Fonts + Images

Required modules npm install --save-dev webpack extract-text-webpack-plugin file-loader css-loader style-loader Folder structure . └── assets ├── css ├── images └── js webpack.config.js const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webp...

webpack • Getting started with webpack

SCSS

Just as in Sass, SCSS variables are used to store a value which will be used multiple times throughout a SCSS document. Variables are mostly used to store frequently-used property values (such as fonts and colors), but can be used for any value of any property. SCSS uses the $ symbol to declare a ...

sass • Variables

Automatic package installation on emacs start-up

;; package.el is available since emacs 24 (require 'package) ;; Add melpa package source when using package list (add-to-list 'package-archives '("melpa" . "http://melpa.org/packages/") t) ;; Load emacs packages and activate them ;; This must come before configurations o...

emacs • Package Management

Number each item using CSS Counter

CSS body { counter-reset: item-counter; /* create the counter */ } .item { counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */ } .item-header:before { content: counter(item-counter) ". "; /* print the v...

CSS • Counters