Sample reset css file for web project

For developers working on projects, it can be frustrating to find odd and unexpected behaviour on the part of various html elements.

The best way to ensure you as the developer has complete control over all elements is to apply a base set of rules from which you can build your own set of rules.

Here is one example of a reset.css file that handle such instructions.

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Example of working print.css file

Very often developers create the most elaborate websites and user interfaces (UI).  However, it the excitement of creating fantastic looking web pages, they neglect to think about the printed page.

Whilst print is not major factor for a lot of websites, for others it can be a major design consideration.

At the very least, what we’re trying to avoid is forcing people to print out heavy images, page breaks that don’t work on printed pages, links that appear on the page as urls, incorrect page widths, unnecessary headers, footers & navigation bars.

Here is  a working example that will help set the basic print rules and which can be used as a starting block for  rules that are relevant to individual websites.

/**
* Print Stylesheet fuer Deinewebsite.de
* @version 1.0
* @lastmodified 16.06.2016
*/

@media print {

/* Inhaltsbreite setzen, Floats und Margins aufheben */
/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
#content, #page {
width: 100%;
margin: 0;
float: none;
}

/** Seitenränder einstellen */
@page { margin: 2cm }

/* Font auf 16px/13pt setzen, Background auf Weiß und Schrift auf Schwarz setzen.*/
/* Das spart Tinte */
body {
font: 13pt Georgia, “Times New Roman”, Times, serif;
line-height: 1.3;
background: #fff !important;
color: #000;
}

h1 {
font-size: 24pt;
}

h2, h3, h4 {
font-size: 14pt;
margin-top: 25px;
}

/* Alle Seitenumbrüche definieren */
a {
page-break-inside:avoid
}
blockquote {
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
img { page-break-inside:avoid;
page-break-after:avoid; }
table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }

/* Linkfarbe und Linkverhalten darstellen */
a:link, a:visited, a {
background: transparent;
color: #520;
font-weight: bold;
text-decoration: underline;
text-align: left;
}

a {
page-break-inside:avoid
}

a[href^=http]:after {
content:” <” attr(href) “> “;
}

$a:after > img {
content: “”;
}

article a[href^=”#”]:after {
content: “”;
}

a:not(:local-link):after {
content:” <” attr(href) “> “;
}

/**
* Eingebundene Videos verschwinden lassen und den Whitespace der iframes auf null reduzieren.
*/
.entry iframe, ins {
display: none;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
line-height: 0pt !important;
white-space: nowrap;
}
.embed-youtube, .embed-responsive {
position: absolute;
height: 0;
overflow: hidden;
}

/* Unnötige Elemente ausblenden für den Druck */

#header-widgets, nav, aside.mashsb-container,
.sidebar, .mashshare-top, .mashshare-bottom,
.content-ads, .make-comment, .author-bio,
.heading, .related-posts, #decomments-form-add-comment,
#breadcrumbs, #footer, .post-byline, .meta-single,
.site-title img, .post-tags, .readability
{
display: none;
}

/* Benutzerdefinierte Nachrichten vor und nach dem Inhalt einfügen */
.entry:after {
content: “\ Alle Rechte vorbehalten. (c) 2014 – 2016 TechBrain – techbrain.de”;
color: #999 !important;
font-size: 1em;
padding-top: 30px;
}
#header:before {
content: “\ Vielen herzlichen Dank für das Ausdrucken unseres Artikels. Wir hoffen, dass auch andere Artikel von uns Ihr Interesse wecken können.”;
color: #777 !important;
font-size: 1em;
padding-top: 30px;
text-align: center !important;
}

/* Wichtige Elemente definieren */
p, address, li, dt, dd, blockquote {
font-size: 100%
}

/* Zeichensatz fuer Code Beispiele */
code, pre { font-family: “Courier New”, Courier, mono}

ul, ol {
list-style: square; margin-left: 18pt;
margin-bottom: 20pt;
}

li {
line-height: 1.6em;
}

}

Difference between fluid, reponsive & adaptive design

The main difference between Responsive and Fluid/Liquid Design is that Fluid designs are based laying out your website proportionally so elements take up the same percent of space on different screen sizes.

Responsive Designs on the otherhand uses CSS Media Queries to present different layouts based on screen sizes/type of screen. 

Whilst Adaptive designs see the developer creating completely distinct webpages to be served up to the user based on the screen/device they are using at the time they view it.

Fluid Design
The aim of Fluid or Liquid design is to maintain the same spatial weighting of all elements.  This approach works well on different sizes of screens of the same sort. They look the same on a 24″, high resolution monitor as the would on a  12″ lower resolution laptop. 
When it comes to mobile phones however, the user experience can be compromised due to the screen size of the devices.

Responsive
Responsive design’s begin with scalability in mind.  The designs will present different devices layouts tailored specifically for the type of screen.   
If you’re working on mobile the entire layout may be reconfigured in a single column to suit the phone screen

Adaptive
Adaptive designs require the designers and developers to consider the purpose and experience they envisage customers might require.  They may limit design elements on phones to make it faster to load or focus on particular features of the website that they believe meets the overwhelming requests for users on that device.

 

 

 

Bootstrap & Less – compile online

If you’re using Bootstrap for projects, including but not exclusive to WordPress, you may come across issues such as pages not responding correctly on devices such as iPad mini.

In my instance I couldn’t get the navbar to collapse correctly in either landscape or portrait mode.   Nothing I tried worked for my “twentyseventeen” based themed project, despite the fact that all other settings I worked with did obey my directives.

I found the solution was to modify the bootstrap file using LESS to apply settings such as “@grid-float-breakpoint”.

Rather than going into a lot of depth regarding LESS and compiling a compiler to set it up, I went to the Bootstrap official website and used their online compiler which generates the customised version of bootstrap.css & bootstrap.min.css

From here you can apply your modificatios and allow it to generate the new file which you download and transfer to your website.

https://getbootstrap.com/docs/3.3/customize/

What is the order of priority for my stylesheet elements

The specificity or order of css rules is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.  We are starting from the lowest ranking to the highest.

CSS universal selectors select any type of elements in an HTML page. It matches a single element. An asterisk (*) is used to denote a CSS universal selector and is used to style all the elements of an HTML page. An asterisk can also be followed by an selector when you are wanting to set a style for all of the elements within an element of an HTML page.

At its most basic, the Universal Selector looks like this: 
* {
  margin: 0;
  padding: 0;

This code sets the padding and margins on all elements to zero.

Universal selector with another selector: 
body * {
  margin: 0;
  padding: 0;

This code sets the padding and margins of all elements within body to zero.

Type selectors will select any HTML element on a page that matches the selector:

Example: 
em{
  color: purple;

This rule will select any <em> element on the page and color it blue.

 

For example, it can be used to:

A pseudo-class is used to define a special state of an element.

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently

/* unvisited link */
a:link {
    color: blue;
}

Example of ID selector in HTML code:
<span id="important">Here's a span with some text.</span>
<span>Here's another.</span>

Class selectors are used to select any HTML element that has a id attribute matching the the id selector.

If you want to target a specific section of text in your document you would place it within in the inline element<span> and add an ID so it can be styled in your CSS.

The CSS example could be:
{
#important {
  font-size: 110%;
  font-weight: bold;
  font-color:Red
}

Example of inline style applied to the paragraph: 
<p style=”text-align: center;”>
    <span>target</span>
</p>

Inline style are styles applied directly into the HTML code by adding the style attribute along with any CSS properties.

!important

When an !important rule is used on a style declaration, it overrides any other declaration made in the CSS including inline styles from the mark up. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise.

How to ensure my CSS styles are not inheriting

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, etc.

The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example.  This is a wonderful starting point for any project.

By declaring these items first, you have full control from the ground up, no surprises.

/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}