Drupal8 W3CSS Theme

Drupal8 W3CSS Theme is using the W3.CSS framework with built-in responsiveness: Smaller and faster than other CSS frameworks. - Easier to learn, and easier to use than other CSS frameworks. - Uses standard CSS only (No jQuery or JavaScript library). - Speeds up and simplifies web development. - Supports modern responsive design (mobile first) by default. - Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more. - Provides CSS equality for all devices. PC, laptop, tablet, and mobile. - Learn more about W3.CSS https://www.w3schools.com/w3css/

W3CSS References

Choose an organization scheme You should choose a consistent organization pattern and stick to it. I’m not going to tell you how to organize your style sheets—that depends on what works for you—but here are a few ideas to consider: Organize by selector type. Start with HTML selectors, then IDs, and then classes. Organize based on page structure. Group rules based on their parent tags. This works even better with HTML5 because page structure is stronger. The downside occurs when the same rules need to be applied at different places in the page. You don’t want redundant code, so it’s best to separate those rules out into their own section. Organize based on purpose. Group rules based on which element a style is being applied to. Instead of being grouped according to where the element is in the page, the styles are grouped based on their content, module, functionality, or other specific use (such as headings, typography, ads, article, asides, layout grid, and so on.) Organize alphabetically. Literally list the selectors in alphabetical order.  You can use one of these methods, a combination of these methods, or a method you make up yourself. The key is to be consistent.

Animation Classes
Class Defines
w3-animate-top Animates an element from the top -300px to 0px
w3-animate-left Animates an element from left -300px to 0px
w3-animate-bottom Animates an element from the bottom -300px to 0px
w3-animate-right Animates an element from right -300px to 0px
w3-animate-opacity Animates an element's opacity from 0 to 1
w3-animate-zoom Animates an element from 0 to 100% in size
w3-animate-fading Animates an element's opacity from 0 to 1 and 1 to 0 (fades in AND out)
w3-spin Spin an icon 360 degrees
  Spin any element 360 degrees
w3-animate-input Animates the width of an input field to 100%

The ability to set the background color on an HTML page has been around almost since the first Web browsers. However, with CSS you can define the background color, not only for the entire page, but also for individual elements using the background- color property. Unlike the color property, though, background colors are applied only to the element, and are not directly inherited by its children. That said, by the very fact they are within the parent, they will be set against that background. To define the background color of an element: 1. Add the background color property to your declaration list. Start your declaration by typing background-color, followed by a colon (:). background-color: 2. Specify the color value. Type a value for the background color. This value can be the name of the color or an RGB value. rgb(102,0,0); Alternatively, you could type transparent, which would allow the parent element’s background color to show through, or current color

Background Color Classes
Class Defines
w3-red Background color red
w3-pink Background color pink
w3-purple Background color purple
w3-deep-purple Background color deep purple
w3-indigo Background color indigo
w3-blue Background color blue
w3-light-blue Background color light blue
w3-cyan Background color cyan
w3-aqua Background color aqua
w3-teal Background color teal
w3-green Background color green
w3-light-green Background color light green
w3-lime Background color lime
w3-sand Background color sand
w3-khaki Background color khaki
w3-yellow Background color yellow
w3-amber Background color amber
w3-orange Background color orange
w3-deep-orange Background color deep orange
w3-blue-grey Background color blue grey
w3-brown Background color brown
w3-light-grey Background color light grey
w3-grey Background color grey
w3-dark-grey Background color dark grey
w3-black Background color black
w3-pale-red Background color pale red
w3-pale-yellow Background color pale yellow
w3-pale-green Background color pale green
w3-pale-blue Background color pale blue
w3-transparent Transparent background-color

You can describe color on the screen in a variety of ways, but most of these descriptions are just different ways of telling the computer how much red, green, and blue are in a particular color. Browser-safe Colors? Certain colors always display properly on any monitor. These colors are called browser-safe colors. You’ll find them fairly easy to remember because their values stay consistent. In hexadecimal values, you can use any combination of 00, 33, 66, 99, CC, and FF. In numeric values, use 0, 51, 102, 153, 204, or 255. In percentages, use 0, 20, 40, 60, 80, or 100. The behavior of each percentage value depends on the property in use. URLs A Uniform Resource Locator (URL) is the unique address of something on the Web. This resource could be an HTML document, a graphic, a CSS file, a JavaScript file, a sound or video file, a CGI script, or any of a variety of other file types. URLs can be local—describing the location of the resource relative to the current document— or global—describing the absolute location of the resource on the Web and beginning with http://.

Class Defines
w3-bar Horizontal bar
w3-bar-block Vertical bar
w3-bar-item Provides common style for bar items
w3-sidebar Side bar
  A side bar can contain all types of content
  A side bar overlaying main content
  A side bar overlaying all main content
  A side bar shifting main content to the right
  A side bar with an overlay background
  A Side bar on the right side
w3-collapse Used together with w3-sidebar to create a fully automatic responsive side navigation. For this class to work, the page content must be within a "w3-main" class
w3-main Container for page content when using the w3-collapse class for responsive side navigations
  Fully automatic right-sided responsive side navigation
w3-sidenav Deprecated (Use w3-sidebar instead)
w3-navbar Deprecated (Use w3-bar instead)
w3-navitem Deprecated (Use w3-bar-item instead)
w3-topnav Deprecated (Use w3-bar instead)
w3-navblock Deprecated (Use w3-bar-block instead)
w3-accordion Deprecated (Use w3-show and w3-hide instead)
w3-accordion-content Deprecated (Use w3-show and w3-hide instead)
w3-pagination Deprecated (Use w3-bar instead)
w3-dropnav Deprecated (Use w3-bar-block instead)

The border property allows you to set a rule (line) around all four sides of your box in any color and thickness using a variety of line styles. Also, using additional border properties, you can independently set the borders on any of the four sides, giving you amazing design versatility. To set the border: 1. To set the border on all four sides, type the border property name in the CSS declaration block, followed by a colon (:) border: 2. Type a border-width value, followed by a space. 6px This value can be one of the following A length value; a value of 0 prevents the border from appearing, even if the style and color are set. A relative-size keyword, such as thin, medium, or thick inherit will cause the element to use the same border styles as its parent element. 3. Type the name of the style you want to assign to your border. double shows a complete list of available border styles. Alternatively, you can type none, which prevents the border from appearing. 4. Type a color value, which is the color you want the border to be as defined in rgb(142, 137, 129); This can be the name of the color or an RGB value. 5. You aren’t stuck using the same border on all four sides. You can set each side (border-top, border-bottom, border left, and/or border-right). border-top: 2px solid ➝ rgb(142, 137, 129);

Border Classes
Class Defines
w3-border Borders (top, right, bottom, left)
w3-border-top Border top
w3-border-right Border right
w3-border-bottom Border bottom
w3-border-left Border left
w3-border-0 Removes all borders
w3-border-color Displays any defined borders in a specified color (like red, etc)
w3-bottombar Adds a thick bottom border (bar) to an element
w3-leftbar Adds a thick left border (bar) to an element
w3-rightbar Adds a thick right border (bar) to an element
w3-topbar Adds a thick top border (bar) to an element
w3-hover-border-color Hoverable border color

HTML is how Web pages are structured. CSS is how Web pages are designed. This book deals primarily with how to use CSS to add a visual layer to the HTML structure of your Web pages. CSS is a style sheet language; that is, it is not a programming language. Instead, it’s code that tells a device (usually a Web browser) how the content in a file should be displayed. CSS is meant to be easily understood by anyone, not just “computer people.” Its syntax is straightforward, basically consisting of rules that tell an element on the screen how it should appear. This book also includes the most recent additions to the CSS language, commonly referred to as CSS3 (or CSS Level 3). CSS3 builds on and extends the previous version of CSS. For the time being, it’s important to understand what is new in CSS3 because some browsers (most notably Internet Explorer) have incomplete support or no support for these new features.

Button Classes
Class Defines
w3-button Grey rectangular button
w3-btn Black rectangular button
w3-ripple Rectangular button with ripple effect
  Circular floating button with ripple effect
w3-bar Can be used to group elements (like buttons) in an horizontal bar
w3-btn-block Deprecated (Use w3-button w3-block instead)
w3-btn-floating Deprecated (Use w3-button w3-circle instead)
w3-btn-floating-large Deprecated (Use w3-circle instead)
w3-btn-group Deprecated (Use w3-bar instead)
w3-btn-bar Deprecated (Use w3-bar instead)
w3-opennav Deprecated (Use w3-button instead)
w3-closenav Deprecated (Use w3-button instead)
w3-closebtn Deprecated (Use w3-button instead)

How to attach your style?1- The One For All method The One For All method includes all your styles in a single master style sheet. With this method, creating well-organized and readable style sheets with a TOC is critical because you may be poring through hundreds or even thousands of lines of code.
Pros—One download is faster than multiple downloads, and the file is then cached for use on other pages. In addition, with all of your code in one place, you don’t have to worry about whether a page has access to the right styles.
Cons—This method may lead to large file sizes that can slow down the page loading time and take longer to render. Additionally, these files are harder to manage and edit.
2- The Divide and Conquer method The Divide and Conquer method uses multiple links to multiple style sheets on an as-needed basis per page. Start with a link to a file with global styles used by all pages, and then add links to styles used for that page only.  For example, if you use a special carousel module only on the main page, it would not go into the global file, but would exist as a separate CSS file for the home page or as part of a CSS file of general components.
Pros—Mix and match style sheets from your library to load only the styles you need and reduce bloated file sizes. Plus, as long as you keep your files organized, these are generally easier to edit.
Cons—Multiple files mean multiple server calls, which slows downloads. Plus, multiple files can be hard to keep up with, and their cascade order can conflict in unpredictable ways.
3- The Aggregate method The Aggregate method uses @import to collect all the relevant CSS files from your library. The HTML document then has to link to only a single external file.
Pros—Similar to the Divide and Conquer method, but by using only a single link, it’s easier to add or remove styles as needed because they are in a single CSS file rather than spread out across multiple HTML files.
Cons—Similar to the Divide and Conquer method but worse. This used to be a very popular CSS strategy until someone discovered that using @import often prevents external style sheets from loading simultaneously. Instead, they must load one after another, which slows things down. Additionally, since the linked parent style sheet has to load before the imported style sheets are seen by the browser, this method can lead to the page rerendering as new styles become available.
4- The Dynamic method The Dynamic method relies not on your skills as a CSS coder, but on your skills writing server-side code. It is possible to write server scripts that take an aggregated CSS file full of @imports and combine them on the server into a single file for deployment.
Pros—Combines the ease of use and lean file size of the Aggregate method with the speed of the One For All method.
Cons—Requires knowledge of server-side coding that is beyond the scope of this book. Talk to your server admin or developer for more details.

Card Classes
Class Defines
w3-card Same as w3-card-2
w3-card-2 Container for any HTML content (2px bordered shadow)
w3-card-4 Container for any HTML content (4px bordered shadow)
w3-card-8 Deprecated (Use another card class instead)
w3-card-12 Deprecated (Use another card class instead)
w3-card-16 Deprecated (Use another card class instead)
w3-card-24 Deprecated (Use another card class instead)

Working with Pseudo-classes Many HTML elements have special states or uses associated with them that can be styled independently. One prime example of this is the link tag which has link (its normal state), a visited state (when the visitor has already been to the page represented by the link), hover (when the visitor has their mouse over the link), and active (when the visitor clicks the link). All four of these states can be styled separately. A pseudo-class is a predefined state or use of an element that can be styled independently of the default state of the element.  Pseudo-classes are used to style not only the initial appearance of the anchor tag, but also how it appears after it has been visited, while the visitor hovers their mouse over it, and when visitors are clicking it. Dynamic Pseudo-classes can be applied to any element to define how it is styled when the user hovers over it, clicks it, or selects it. Structural Pseudo-classes are similar to the sibling combinatory selectors but allow you to specifically style elements based on an exact or computed numeric position. Other Pseudo-classes are available to style elements based on language or based on what tag they are not.

Elements can be classified according to the way they’re displayed—inline or block. By default, every tag has a display style that defines how it will fit with the surrounding tags. You can use the display property to define whether an element includes line breaks above and below (block), is included with other elements without hard line breaks (inline), is treated as part of a list (list), or is displayed at all (none).  To set an element’s display type:
1. Start your declaration by typing the display property name in the CSS declaration block, followed by a colon (:) display:
2. Type one of the display types; Choose a type depending on the desired result: inline flows the element horizontally and its siblings from left to right until the edge of the parent element is encountered, at which point a soft break is added wrapping the content to the next line. Hard line breaks immediately before and after the box are always suppressed.  A block places a hard line break above and below the box, flowing the elements vertically. Setting this automatically forces the width of the box to the end.

Class Defines
w3-center Centered content
w3-left Floats an element to the left (float: left)
w3-right Floats an element to the right (float: right)
w3-left-align Left aligned text
w3-right-align Right aligned text
w3-justify Right and left aligned text
w3-circle Circled content
w3-hide Hidden content (display:none)
w3-show Show content (display:block)
w3-show-block Alias of w3-show (display:block)
w3-show-inline-block Show content as inline-block (display:inline-block)
w3-top Fixed content at the top of a page
w3-bottom Fixed content at the bottom of a page
w3-display-container Container for w3-display-classes (position: relative)
w3-display-topleft Displays content at the top left corner of the w3-display-container
w3-display-topright Displays content at the top right corner of the w3-display-container
w3-display-bottomleft Displays content at the bottom left corner of the w3-display-container
w3-display-bottomright Displays content at the bottom right corner of the w3-display-container
w3-display-left Displays content to the left (middle left) of the w3-display-container
w3-display-right Displays content to the right (middle right) of the w3-display-container
w3-display-middle Displays content in the middle (center) of the w3-display-container
w3-display-topmiddle Displays content at the top middle of the w3-display-container
w3-display-bottommiddle Displays content at the bottom middle of the w3-display-container
w3-display-position Displays content at a specified position in the w3-display-container
w3-display-hover Displays content on hover inside the w3-display-container

The idea of a standard way to communicate over the Internet was the principle behind the creation of the World Wide Web: You should be able to transmit information to any computer anywhere in the world and display it in the way the author intended. In the beginning, only one form of HTML existed, and everyone on the Web used it. This situation didn’t present any real problem because almost everyone used Mosaic, the first popular graphics-based browser, and Mosaic was the standard. That, as they say, was then. Along came Netscape Navigator and the first HTML extensions were born.

Class Defines
w3-dropdown-hover Hoverable dropdown element
  Hoverable dropdown element (used in w3-bar)
  Hoverable dropdown element (used in w3-bar-block)
  Hoverable dropdown element (used in w3-sidebar)

Most HTML tags have browser inherited styles associated with them. These default styles are actually defined by the Web browser developer. Because the browser developer has added them, you need to remember that they are there and will affect your design. For example, the tag will italicize text on most browsers. No cosmic constant dictates that emphasized text is italicized; it’s just that the guys and gals programming the browser software decided to do it that way. The good news is that you can use CSS to override the browser styles. For the most part, default styles are consistent from browser to browser, although some noticeable differences exist, especially with margins and font size. Many designers will start “from scratch” by resetting as many of the defaults as possible using a CSS reset.

Class Defines
w3-opacity Adds opacity/transparency to an element (opacity: 0.6)
  Add opacity/transparency to text
w3-opacity-off Turns off opacity/transparency (opacity: 1)
w3-opacity-min Adds opacity/transparency to an element (opacity: 0.75)
w3-opacity-max Adds opacity/transparency to an element (opacity: 0.25)
w3-grayscale-min Adds a grayscale effect to an element (grayscale: 50%)
w3-grayscale Adds a grayscale effect to an element (grayscale: 75%)
w3-grayscale-max Adds a grayscale effect to an element (grayscale: 100%)
w3-sepia-min Adds a sepia effect to an element (sepia: 50%)
w3-sepia Adds a sepia effect to an element (sepia: 75%)
w3-sepia-max Adds a sepia effect to an element (sepia: 100%)
w3-overlay Creates an overlay effect

It’s sometimes difficult to keep track of all the values that you are using in your design. It’s unlikely that CSS will ever include constants, so it will help to keep notes in an easy-to-reference location in your document. Creating a glossary of colors and types leads to more consistent and attractive designs  Although section headers and dividers really aren’t anything more than CSS comments, they do help organize your CSS and allow you to quickly scan your code to locate particular CSS rule groups. If you have established a TOC, I recommend reflecting that organization here. I uses asterisks to indicate a section level. All of the CSS rules starting with @ (@media, @font-face, @import) need to be placed above any other CSS in the external style or embedded style sheet. In addition to making these rules easier to find, many of them won’t work unless they’re placed at the top.

Font & Text Classes
Class Defines
w3-tiny Specifies a font size of 10 pixels
w3-small Specifies a font size of 12 pixels
w3-large Specifies a font size of 20 pixels
w3-xlarge Specifies a font size of 24 pixels
w3-xxlarge Specifies a font size of 32 pixels
w3-xxxlarge Specifies a font size of 48 pixels
w3-jumbo Specifies a font size of 64 pixels
w3-wide Specifies a wider text
w3-serif Changes the font to serif
w3-text-shadow Deprecated (Use CSS3 instead)
w3-slim Deprecated (Use letter-spacing instead)
w3-vertical Deprecated (Use w3-container or w3-panel instead)

Here are six simple things you can do to improve the appearance of your Web page when it is printed.  Use page breaks before page headers to keep them with their text. Separate content from navigation. Try to keep the main content—the part your audience is interested in reading—in a separate area of the design from the site navigation. You can then use CSS to hide navigation in the printed version with a nav included in the print style sheet. Avoid using transparent colors in graphics. This is especially true if the graphic is on a background color or a graphic other than white. The transparent area of a GIF image usually prints as white regardless of the color behind it in the window. This situation is not a problem if the graphic is on a white background to begin with, but the result is messy if the graphic is supposed to be on a dark background. Avoid using text in graphics. The irony of printing content from the Web is that text in graphics, which may look smooth in the window can look blocky when printed; but regular HTML text, which may look blocky on some PC screens, can print smoothly on any decent printer. Try to stick with HTML text as much as possible. . Avoid dark-colored backgrounds and light-colored text. Generally you want to keep white as your background color for most of the printed page, and black or dark gray for the text. Do not rely on color to convey your message when printed. Although color printers are quite common these days, many people are still printing with black-and-white printers or printing in black and white on color printers to save money.

Hover Classes
Class Defines
w3-hover-white Hover color white
w3-hover-black Hover color black
w3-hover-red Hover color red
w3-hover-blue Hover color blue
w3-hover-green Hover color green
w3-hover-aqua Hover color aqua
w3-hover-orange Hover color orange
w3-hover-grey Hover color grey
w3-hover-pale-green Hover color pale green
w3-hover-text-red Hover text color red
w3-hover-text-blue Hover text color blue
w3-hover-text-green Hover text color green
w3-hover-text-purple Hover text color purple
w3-hover-border-color Hover border color
w3-hover-opacity Adds transparency to an element on hover (opacity: 0.6)
w3-hover-opacity-off Removes transparency from an element on hover (100% opacity)
w3-hover-shadow Adds shadow to an element on hover
w3-hover-grayscale Adds a black and white (100% grayscale) effect to an element
w3-hover-sepia Adds a sepia effect to an element on hover
w3-hover-none Removes hover effects from an element

These days, everyone is a Web designer. Whether you are adding a comment to a Facebook page, creating your own blog, or building a Fortune 50 Web site, you are involved in Web design. As the Web expands, everyone from PTA presidents to presidents of multinational corporations is using this medium to get messages out to the world because the Web is the most effective way to communicate your message to the people around you and around the world. Knowing how to design for the Web isn’t always about designing complete Web sites. Many people are creating simple Web pages for auction sites, their own photo albums, or their blogs. So, whether you are planning to redesign your corporate Web site or place your kid’s graduation pictures online, learning Cascading Style Sheets (CSS) is your next step into the larger world of Web design.

Class Defines
  Input form as a card
w3-input Input elements
  Input elements (top labels)
  Input elements (bottom labels)
w3-check Checkbox input type
w3-radio Radio input type
w3-select Input select element
w3-animate-input Animates the width of an input to 100%
w3-form Deprecated (Use w3-container or w3-panel instead)
w3-group Deprecated (use w3-section instead)
w3-label Deprecated (Use <label> instead)
w3-validate Deprecated (Use programmed validation instead)

1. Add content to your HTML file. Using the HTML file you created in chapter 2, add text and image content. I tend to use Alice’s Adventures in Wonderland, but anything will do. A great source for text is Project Guttenberg (www.gutenberg. org). 2. Markup your content. All styles require markup in the Web page to give them something to be applied to. Make sure to tag headers and paragraphs. 3. Add classes and IDs to your markup. Classes give you a “hook” to apply specific styles to specific elements. Don’t go overboard, though. Only add classes where it useful to differentiate kinds of elements and IDs to differentiate a specific element in the design. 4. Add your HTML, class, and ID declarations to the head of your document in a

The margin of an element allows you to set the space between that element and other elements in the window by specifying one to four values that correspond to all four sides together, the top/ bottom and left/right sides as pairs, or all four sides independently. To define the margins of an element: 1. Start your declaration by typing the margin shortcut property name in the declaration block, followed by a colon (:) margin: 2. Type a value for the margin. 0 10px; Use one of the following values: A length value A percentage, which creates a margin proportional to the parent element’s width auto, which returns control of the margins to the browser’s discretion You can enter one to four values, separated by spaces, to define the margins as follows: One value sets the margin for all four sides equally. Two values set the top/bottom margins and left/right margins. Three values set the top margin, the left/right margins (the same), and the bottom margin. Four values set each margin clockwise, starting from top: top, right, bottom, and left. 3. You can also set the margin for just one side of the box independently without setting the other three margins. margin-right: 10px; This is useful when used with an inline style to override margins set elsewhere. To do this, specify the margin side you want to define (margin-top, marginbottom, margin-left, or margin-right) and enter a legitimate margin value from Setting Negative Margins Although you can use negative margins (for example, margin:-5em;) to create interesting effects for overlapping pieces of text, this method is frowned upon because various browsers present different results. Overlapping text is better achieved using CSS positioning. Be careful when setting negative margins around a hypertext link. If one element has margins that cause it to cover the link, the link will not work as expected.

Margin Classes
Class Defines
w3-margin Adds an 16px margin to an element
w3-margin-top Adds an 16px top margin to an element
w3-margin-right Adds an 16px right margin to an element
w3-margin-bottom Adds an 16px bottom margin to an element
w3-margin-left Adds an 16px left margin to an element
w3-section Adds an 16px top and bottom margin to an element
w3-margin-0 Deprecated (Use CSS margin:0 instead)

Once your libraries, frameworks, and sitewide CSS are ready to go live, you need to pick the best strategy for deployment. It is always recommended that you place all your styles in one or more external style sheets, and then use either the @import code to apply them to a Web document. You have two competing priorities: 
Keep the file size as small as possible. The larger the file size, the longer it takes to download. Of course, because it’s text, your files have to be pretty large for this to be a problem, but it happens. n Keep the number of links and imports as low as possible. The more links and imports you have to external CSS files, the more server calls you make, and the slower the page will load. You can reduce file size by splitting style sheets into multiple external files and then linking only to the ones you need, but this means more links. You can have a single, all-inclusive CSS file, but such a file can grow quite large. Your job will be to balance these two issues.

Class Defines
w3-modal Modal container
w3-modal-content Modal pop-up element
w3-tooltip Tooltip element
w3-text Tooltip text

At first glance, padding seems to have an effect identical to margins: It adds space around the element’s content. The difference is that padding sets the space between the border of the element and its content rather than between the element and the other elements in the window. Padding is useful when you’re using borders and background colors and don’t want the content butting right up to the edges. To set padding: 1. Start your declaration by typing the padding property name, followed by a colon (:) padding: 2. Type a value for the element’s padding. 10px; Use one of the following values:  Length values, which create padding of the exact size you specify A percentage, which creates padding proportional to the parent element’s width inherit to use the parent’s padding value To set each side’s padding value separately, you can type from one to four values. One value sets the padding for all four sides. Two values set the padding for the top/bottom and left/right sides.  Three values set the top padding, the padding for the left/right sides (the same), and the bottom padding. Four values set the padding for each side in this order: top, right, bottom, and left. 3. As with margins, padding can also be set independently on all four sides of the box (top, right, bottom, and left).

Padding Classes
Class Defines
w3-padding-small Padding 4px top and bottom, and 8px left and right.
w3-padding Padding 8px top and bottom, and 16px left and right.
w3-padding-large Padding 12px top and bottom, and 24px left and right.
w3-padding-16 Padding 16px top and bottom
w3-padding-24 Padding 24px top and bottom
w3-padding-32 Padding 32px top and bottom
w3-padding-48 Padding 48px top and bottom
w3-padding-64 Padding 64px top and bottom
w3-padding-tiny Deprecated (Use CSS padding instead)
w3-padding-medium Deprecated (Use w3-padding instead).
w3-padding-xlarge Deprecated (Use CSS padding instead)
w3-padding-xxlarge Deprecated (Use CSS padding instead)
w3-padding-jumbo Deprecated (Use CSS padding instead)
w3-padding-4 Deprecated (Use CSS padding instead)
w3-padding-8 Deprecated (Use CSS padding instead)
w3-padding-12 Deprecated (Use CSS padding instead)
w3-padding-128 Deprecated (Use CSS padding instead)
w3-padding-0 Deprecated (Use CSS padding:0 instead)
w3-padding-left Deprecated (Use CSS padding-left instead)
w3-padding-right Deprecated (Use CSS padding-right instead)
w3-padding-top Deprecated (Use CSS padding-top instead)
w3-padding-bottom Deprecated (Use CSS padding-bottom instead)

Cascading Style Sheets, or CSS, is a language used to specify the visual appearance of a Web page—in contrast to HTML (HyperText Markup Language), which is a markup language that defines the structure of a document for distribution on the Web. HTML tells a Web browser how the content is organized on the page, whereas CSS tells the browser how it should look. CSS3, an abbreviation for CSS Level 3, is the next generation of this style language that adds several new capabilities. It may still be under development by the W3C (World Wide Web Consortium), but CSS3 has already taken its place alongside HTML5 at the forefront of all cutting-edge Web design.

Class Defines
w3-row Container for one row of fluid responsive content
w3-row-padding Row where all columns have a default padding
w3-content Container for fixed size centered content
w3-half Half (1/2) screen column container
w3-third Third (1/3) screen column container
w3-twothird Two third (2/3) screen column container
w3-quarter Quarter (1/4) screen column container
w3-threequarter Three quarters (3/4) screen column container
w3-col Column container for any HTML content
w3-rest Occupies the rest of the column width
l1 - l12 Responsive sizes for large screens
m1 - m12 Responsive sizes for medium screens
s1 - s12 Responsive sizes for small screens
w3-hide-small Hide content on small screens (less than 601px)
w3-hide-medium Hide content on medium screens
w3-hide-large Hide content on large screens (larger than 992px)
w3-image Responsive image
w3-mobile Adds mobile-first responsiveness to any element.
Displays elements as block elements on mobile devices.

Rounded corners can help soften an otherwise sharp design, but they have been difficult to achieve using images. CSS3 includes a simple method for rounding off one or all of the corners of an element’s box: border-radius. Both Mozilla and Webkit have implemented their own versions of border-radius in advance of the final W3C pronouncement, and you need to take these browser extensions into account for the widest interoperability. To set rounded corners:
1. Add the Webkit, Mozilla, and standard CSS3 border-radius properties. -webkit-border-radius: -moz-border-radius: border-radius: Although the order doesn’t matter, it’s generally preferred to have the CSS3 version last because it’s the version that should be used.
2. Type a border-radius value, followed by a semicolon, using the same value for all three instances. 5px; This value can be one of the following depending on browser compatibility. A length value, which sets the radius of an imaginary circle at the corner, which is used to round it off. The larger the value, the rounder the edge. A percentage (0% to 50%), which uses the size of the element to set the corner radius. Higher values produce rounder corners, with 50% joining corners into a semicircle. Percentage is not supported in Webkit.
3. Each corner’s border radius can be set independently without specifying the other corner radii. -webkit-border-top-right-radius: ➝ 20px; -moz-border-radius-topright: ➝ 20px; border-top-right-radius: 20px; Mozilla has a slightly different syntax from Webkit and W3C (used by Opera), but the equivalents.
4. For -moz and standard CSS3 instances (but not -webkit), you can include up to four values. -webkit-border-top-left-radius: ➝ 20px; -webkit-border-bottom-left- ➝ radius: 20px; -moz-border-radius: 20px ➝ 0 0 20px; border-radius: 20px 0 0 20px; Separate each value by a space as a shortcut for setting the border radius: One value sets all four-corner radii the same.
Two values set the radius for the topleft/ bottom-right and bottom-left/topright corners. Three values set the corner radius for the top left, bottom left/top right (the same), and the bottom right corners. Four values set the radius for each corner in this order: top left, top right, bottom right, and bottom left. With Webkit you must set corners separately because it treats a second value as the second point in the radius to create elliptical (rather than circular) corners.

Round Classes
Class Defines
w3-round Element rounded (border-radius) 4px
w3-round-small Element rounded (border-radius) 2px
w3-round-medium Element rounded (border-radius) 4px
w3-round-large Element rounded (border-radius) 8px
w3-round-xlarge Element rounded (border-radius) 16px
w3-round-xxlarge Element rounded (border-radius) 32px
w3-round-jumbo Deprecated (Use w3-round-xxlarge instead)

Setting the Table layout Different browsers use different methods to calculate how a particular table should be displayed. Two primary table-layout. Fixed method bases its layout on the width of the table and the width of columns in the first row. This method is generally faster than automatic.  Automatic uses the table column width along with the amount of content in the table data cell to calculate the table data cell width. This will generally render more slowly than the fixed method, but it also produces more accurate results for widths throughout the table. To set the table layout method:
1. Add the table layout property to a CSS rule for a table element. Type table-layout, followed by a colon (:) on table elements
2. Specify the layout method. auto; Type one of the following values to specify which method you want to use when displaying your table: > fixed will use the first row to calculate the overall width of table data cells in that column of the table. > auto will allow the browser to calculate the widths of table data cells based on their content

Class Defines
w3-table Container for an HTML table
w3-striped Striped table
w3-border Bordered table
w3-bordered Bordered lines
w3-centered Centered table
w3-hoverable Hoverable table
w3-table-all All properties set
  With w3-striped, w3-border, and w3-bordered
  With colored head
  With w3-responsible
  With w3-tiny
  With w3-small
  With w3-large
  With w3-xlarge
  With w3-xxlarge
  With w3-xxxlarge
  With color
  With w3-jumbo
w3-responsive Creates a responsive table

Text it is the best system that humans have ever devised for recording complex thoughts. Many people think of text as simply a way to record words, but typography adds a voice to the meaning of the words. Typography affects how text appears by controlling not only the shapes and sizes of the letters used (the font), but also the spaces between letters, words, lines, and paragraphs. Unfortunately, many of the challenges of typography on the Web have come about as a result of a need to circumvent the limitations of the medium. The challenge of Web typography is to improve screen text legibility, as well as to guide the viewer’s attention to important content. It’s a difficult balancing act.

Text Color Classes
Class Defines
w3-text-red Text color red
w3-text-pink Text color pink
w3-text-purple Text color purple
w3-text-deep-purple Text color deep purple
w3-text-indigo Text color indigo
w3-text-blue Text color blue
w3-text-light-blue Text color light blue
w3-text-cyan Text color cyan
w3-text-aqua Text color aqua
w3-text-teal Text color teal
w3-text-green Text color green
w3-text-light-green Text color light green
w3-text-lime Text color lime
w3-text-sand Text color sand
w3-text-khaki Text color khaki
w3-text-yellow Text color yellow
w3-text-amber Text color amber
w3-text-orange Text color orange
w3-text-deep-orange Text color deep orange
w3-text-blue-grey Text color blue grey
w3-text-brown Text color brown
w3-text-light-grey Text color light grey
w3-text-grey Text color grey
w3-text-dark-grey Text color dark grey
w3-text-black Text color black
w3-text-white Text color white

Drupal8 W3CSS Theme - Modal Classes

Once your libraries, frameworks, and sitewide CSS are ready to go live, you need to pick the best strategy for deployment. It is always recommended that you place all your styles in one or more external style sheets, and then use either the @import code to apply them to a Web document.

Drupal8 W3CSS Theme - Container Classes

Working with Pseudo-classes Many HTML elements have special states or uses associated with them that can be styled independently.

Drupal8 W3CSS Theme - Font-Size Classes

What Is a Markup Language? HTML is used to mark up the structure of Web pages, but other markup languages are used by computers on the Web and beyond. The Standard Generalized Markup Language (SGML) is the grandfather of most markup languages used for print and the Internet.

Drupal8 W3CSS Theme - Padding Classes

At first glance, padding seems to have an effect identical to margins: It adds space around the element’s content. The difference is that padding sets the space between the border of the element and its content rather than between the element and the other elements in the window.

Drupal8 W3CSS Theme - Effect Classes

Most HTML tags have browser inherited styles associated with them. These default styles are actually defined by the Web browser developer. Because the browser developer has added them, you need to remember that they are there and will affect your design.