CSS

Including CSS

Inline

Including css inline allows for tag by tag manipulation of styling. If external stylesheets or internal styling applies to the same tags then the inline will overide the aforementioned includes. Inline CSS is not normally best practise for any kind of styling, it has mostly been kept in for legacy reasons. The one situation it can come in useful is when overiding specific elements which internal or external sylesheets may be styling already.

<p style=""background-color: #000000;
    color: #ffffff;
    padding: 5px;"">This is a Paragraph</p>

Internal

Styling can be manipulated on a file by file basis using internal css. This overides global external stylesheets so if parts of a webpage need to be seperate from others you can use internal. It is defined using style tags similar to any other HTML tag. Internal css inclusion is better practice then inline as all styles are centeralised to one area of your code base. However if your site becomes higly stylized then it will take some time to scroll past all the head styling to get to the pages actual content when editing HTML.

<style>
    p {
        background-color: #000000;
        color: #ffffff;
        padding: 5px;
    }
</style>

External

Including your stylesheet externally is the best practice when styling a web page becuase on multi paged sites you are not duplicating the same styles for elements such as navigation bars and footers. This is because you can use one set of styles over multiple web pages as well as keeping your styles seperate from your semantics and functions. Including a stylesheet externally requires a .css file to be created then using a link tag with the href set to the path of the file. Now all the styles which are specified within the .css file then all files which have the .css file included will have those styles applied.

<link rel=""stylesheet"" href=""assets/css/styles.css"">
p {
    background-color: #000000;
    color: #ffffff;
    padding: 5px;
}

The Box Model

Margin

In the box model the margin is the most outer portion. The margin is similar to padding except for the position in the model and the colour as margin is invisiable as its for position more then visual appeal. Many elements have their margins set by default, an example of this is the body element.

div {
    margin: 1.5em;
}

Border

The border is the secound outer part of the box model, it can have multiple visual styles such as dotted, dashed and solid and can also have a colour set. The border is set to 0 by default on most elements. Borders have gotten less used recently because they are not very minimal. However, can sill be used in a useful way wether its adding depth to buttons or to emphasis content.

div {
    border: #000000 solid 1px;
}

Padding

Padding is the space between elements withing the parent, so if there was two paragraphs inside a div and the div had 10px of padding then betweeen the paragraphs there would be 10px of padding around each and the outer limit. Padding is normally used to make space arround items to make them for readable and accessably to modern tables and phones as fingers are far less acurate then the convensional mouse pointer. Padding shouldn’t be used to position content as its expanding content and can lead to abnormalities and is generally bad practice.

div {
    padding: 1.5em;
}

Content

The content is the data within the box model wether it be text, an image or inputs such as text fields or buttons. This is the only part of the box model which is required. For this reason there are no pros or cons about it as it is what it is: content.

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Outline

The outline property is not part of The Box Model! Unlike features of the box model, outline does not affect the position of the content, it only adds a visible border to the content overlapping other elements if needs be.

div {
    outline: 1px dotted #ffcdd2;
}

Compatibility

The main issue with developing sites in the internet is develpoing for multiple browsers. In a perfect world all browsers would use a single rendering engine however this is not the case so many sites need to manually fix errors and bodge solusions for outdated browsers such as Internet Explorer.

  • IE6 will become problematic if floats are overused, causing (paradoxically) disappearing content or duplicate text
  • IE6 will double the margin on floated elements on the side that is the same direction as the float; setting display: inline will often fix this
  • In IE6 and IE7, if an element doesn’t have layout, it can cause a number of problems, including backgrounds not showing up, margins collapsing improperly, and more
  • IE6 does not support min- and max-based CSS properties like min-height, or max-width
  • IE6 does not support fixed positioning of background images
  • IE6 and IE7 do not support many alternate values for the display property (e.g. inline-table, table-cell, table-row, etc.)
  • You cannot use the :hover pseudo-class on any element in IE6 except an anchor ()
  • Certain versions of IE have little support for certain CSS selectors (e.g. attribute selectors, child selectors, etc.)
  • IE versions 6-8 have little support for CSS3, but there are some workarounds

Speed differences in browser engines can affect how browsers load and display to the end user. Some sites include a loading spinner which gets displayed to block out the content of the site loading, this helps make the site more physically attractive however makes load times seem longer and can also cause the user to worry if it continues after a period of time which is deemed acceptable.

An example of CSS that doesn’t work the same on all browsers will be the ::hover phsuedo element which hasnt worked on Internet Explorer version after version unless it was on an ancor tag.

a:hover {
    text-decoration: underline;
}

CSS3 being the most updated version of the CSS language has gotten rid of alot of legacy code that has therefore removed some backwards compatibility for older browsers and engines however alot was added like flexbox allowing for much easier layouts making the upgrade worth it for a lot of designers.

Another issue designers face when creating sites is the difference in default styling each browser has. Below are the full CSS files FireFox and Safari use as a baseplate. Once you’ve read both files completely you’ll realise they are different, this can be a hurdle mny developers are faced with as if they only develop using a single browser and don’t check before submitting to the client there could and will be errors or issues with the site.

user-select: none;

Attempt to select this text.

The above text will only be selectble on select browsers which dont suppor the user-select property by default. The below text will be selectable by all browsers which suppport the property via vendor specific prefixes. The reason the above doesnt function correctly on all browsers is because it uses the enginge agnostic selector user-select: none; which is only supported by browsers which have tested and verified the compatability. When browsers are testing features they require a vendor prefix for the feature to be useable. This is similar to an experimental opt in feature. Becuase the below text has all vendor prefixes and the original selector it’ll work on all fully/partialy support browsers. Supports Chrome and Opera nativly (Both running same engine) however all other browsers require a vendor prefix for partial support.

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Attempt to select this text which has vendor prefixs.

http://caniuse.com/#feat=user-select-none

::selection

Attempt to select this text.

The above selector is supported on all browsers without a vendor prefix except for firefox which requires the -moz prefix and iOS Safari/Opera which have zero support. The selection selector changes how text selection appers allowing for custom text color, background and other text related aspetical changes. This is useful for sites to implement as they can use the color options to co inside with their site theme or as a UX design for differnet color selections dependent on the content. Once the mozila prefix has been added Firefox also allows for this customization.

::-moz-selection
::selection

Attempt to select this text which has vendor prefixes.

http://caniuse.com/#feat=css-selection

::placeholder

The placeholder selector only functions correctly on Firefox without a vendor specific prefix, all other borwsers require a prefix except Opera Mini which has no support. The placeholder selector allows for the placeholder text to be styled within form inputs. There is a similar selector placeholder-shown which customizes the input which has visible placeholder text. Both naming convesions are to be revised as are not semntically sound. The above selector will only work on firefox without a prefix. The below example will function on all browsers except for Opera Mini and the foundation has not stated if it will in the future.

::-webkit-input-placeholder
::-moz-placeholder
:-ms-placeholder
:-moz-placeholder
::placeholder

http://caniuse.com/#feat=css-placeholder

Leave a comment

Your email address will not be published. Required fields are marked *