Head First CSS

CSS Core Essentials

headerart

Writing CSS

Unlike a programming language as we have been exploring with JavaScript, there isn't that much to the syntax of CSS and the makeup of CSS rules. But the following sections highlight some things you should know before jumping into the complexities of what this simple syntax can do for designers. CSS is case insensitive as for the color property is equivalent to using COLOR and px may also be written as PX or Px as well. By convention properties and values are typically written using lowercase characters ( color, px ) and that is the CSS convention we will use while teaching you the basics. Parts of the CSS code that is not under the control of CSS such as file paths to style sheet documents, images, elements names, classes and IDs may be case sensitive and are define at their source. For example, the file path on one server may be case sensitive, but on another server or your local machine it may not be. For markup such as CSS, elements in HTML documents are case sensitive and should be written as explained here. 

Comments

There is only one way to write comments in CSS. Beginning with the two characters /* and ending with the same two characters reversed. */  any text, code or whitespace between those two will be ignored by the browser when parsing your code. 

<code>

/*This is a comment in CSS*/

</code>

In CSS, whitespace including space characters, tabs and line brakes has no meaning outside of its use as a descendent selector. A descendent selector matches all elements that are descendent of a specific element. The first simple selector within this selector represents the ancestor element.

<code>

<div p {

background-color:yellow;

}

</code>

Validation Tools

Validation tools parse your HTML and CSS documents checking for conformance with the designated specification in areas such as syntax errors, missing or improperly nested HTML tags, unknown CSS  properties should be avoided such as illegal values or other coding problems may occur during validation. Validation is one of the most important benchmarks you should grasp as a young student of technology, in my personal opinion as a experienced CSS developer.  But be careful to understand validation errors before reacting to them because some code that you want to use, such as vendor extensions for experimental CSS3 implementations may also be reported as an error based on the validation settings. While I would recommend using CSS3 after having a clear grasps of how to implement regular CSS into your projects. Site such as Can I Use are a great starting point to check if the vendor prefixes are ready in your browser, where fallback is required. 

Web Inspectors 

Web inspectors or DOM inspectors are tools that allow you to view the documents tree, CSS properties, and other information about a web page as it appears in your browser, often with a click on the element itself. These tools are invaluable when writing and debugging CSS code, providing real-time information about style properties and pointing out which style rules contributed to the element's appearance. Please note while this tutorials and the code examples are fully optimized for mobile, they are meant to be used within a classroom environment and will yield better results when viewed in Desktop, tablet or smart board settings

  • Internet Explorer: Starting with version 8, IE includes developer tools, a set of built in tools including the ability to inspect HTML elements and view CSS information. To launch, open any web site and press F12 or go to Tools--Developer Tools from the menu bar in IE
  • Safari: Safari on OXS comes with a built-in set of developer tools including a web inspector. These tools are not disabled by default, but you can enable them from the Advance Panel inside Safari's Preferences Menu.  
  • Chrome: Chrome also ships with built-in developer tools with similar features to those already mentioned. To access the tools, select View--Development--Developer tools from the menu or right-click an element in a web page and choose--inspect element 
  • Firefox: Among it's other features, the firebug extension for Firefox allows for viewing and editing of the document tree and style property cascade. Once installed, you can open Firebug directly or by right-clicking an element in the page and choosing Inspect Element

validator_css

 

What is CSS

CSS, short for Cascading Style Sheet, is a language for describing the presentational properties of contextual elements in structured web documents. In our Head First HTML5 tutorial I describe how html can be seen as the structure of a house or its core foundation, while CSS is the style or decor interior of your home. Style sheets provide a set of guidelines for styling a structure document by defining rules for the appearance of different types of content or different contexts that a web page can contain. You may have encountered forms of style sheets or themes in typical office suites such as PowerPoint or Keynote to pick a theme to start with, where each slide is automatically formatted with the same font sizes, colors and layouts rather than starting with the same font sizes and its location in the document. It will ultimately render each element consistently based on this accumulated set of rules. 

Anatomy of a Statement 

basic_functions

A rule set consist of a selector followed by a declaration block containing declarations of style properties by declaration block containing declarations and their values as explained in the above graphic. 

  1. Rule Set Function: This is the entire definition of a CSS rule including selector and declaration block containing individual selectors. 
  2. Selector: The selector includes everything up to the opening curly brace. The selector describes the markup elements to which the contents of declaration block apply. Individual selectors may share a declaration block with each selector separated with a comma (,)
  3. Declaration Block: The declaration block starts with the left curly brace and ends with the right curly brace. Inside the block there are zero or more declarations, each separated by a semicolon. 
  4. Declaration: Each declaration is a colon-separated property-value pair. 
  5. Property: The property is the CSS property that the declaration is targeting. 
  6. Value: This is the value that will be applied to the declared property. The syntax of the value depends of the property but can be things such as keywords, a <length> a <percentage> or a mix of multiple space-separated types. 

The Basic Parts 

<code>

body

{

background: #fff;

color:#000;

}
</code>

At-Rules

At-rules are statements that begin with the character for at (@) followed by a rule type or identifier, and end with a semicolon. Unlike rule sets, at-rules do not contain declaration directly but offer additional context of commands for the processing of style sheet information. Below is a pithy example. 

<code>

/*include file additional .css */

@import "additional.css"

/*target specific media with contained rules*/
@media print {
[.....]
}

</code>

Cascading

The cascading in CSS is the process that is followed in order to determine which declaration for a given property is applied to a given element in the document. As you'll soon learn, properties such as color for instance can be defined and redefined multiple times, allowing the browser to determine which of those definitions to apply. The criteria for sorting through the style sheets to determine which property declaration to use is threefold:

  • Weight
  • Specificity
  • Order of appearance 

The values for some properties, such as color and font-family are inherited by child elements where the property was set. If that property was not explicitly declared for the child element, it will use the inherited value for display. In the case of color, if the <body> element has been set to black, the paragraphs, list content, block quotes and other children will also have a color value of black. Because links have a different color defined in the user agent style sheet, they will not appear as black but as the default blue color set by default. Furthermore, inherited values are passed along to child elements as their computed value. 

<code>

<p style="font-size: 10px">

<strong style="2em">

<span>text</span>

</strong>

<p>

</code>

As you can see, the font-size for the <strong> element is calculated to be 20px and this is the value inherited by the <span> element. If the specified value of 2em was inherited and the size recalculated, the <span> would have a font-sized value pf 40px instead. 


K-12 Education Series 

porfolio_featureart

 

Head First HTML5


Block, Inline and Replaced Elements

There are three main type of elements types in HTML5 documents whose intended content types dictate their behavior in CSS and presentation. There are elements that serve as containers for other content (<div>, <p>) there are elements that differentiate types of text content (<a>, <strong>) and there are elements that refer to external content (<img>,<object>). Now that you know everything you need to know about the basic definition of CSS and HTML5 process, you might need to know how you get actual CSS code into your web pages and what CSS really looks like. 

Attaching CSS Styles to HTML5

Before you start writing CSS, you have to know where to properly place the code. There are a few ways to define rules for your content, some based on external files that can be shared between multiple HTML documents on a site and some that are more specific to a page or even individual elements. You can use <link> element in the <head> of a document to specify an external CSS document. This document does not contain markup or script elements, only CSS code. 

<code>

<head>

<link rel="stylesheet" type"text/css" src="global.css">

</head>

</code>

<code>

/* CSS Document */

/*copyright DSC79.com
feel free to use these styles as you wish
attribution would be nice, but not required
*/

/*color palette
#FBAE2C rgb(251, 174, 44) ORANGE
#B683BA rgb(182, 131, 186) LIGHT LAVENDER
#A858A3 rgb(168, 88, 163) DARK LAVENDER
#0263AE rgb(173, 169, 130) DARK TAN
#D8D5BC rgb(2, 99, 174) DARK BLUE
#F9E482 rgb(249, 228, 130) LIGHT YELLOW
#BFBFBF rgb(191, 191, 191) LIGHT GRAY
#414042 rgb(65, 64, 66) DARK GRAY
*/
/*Font declarations*/
@font-face {
 font-family: 'Bitter';
 src: url('../_fonts/Bitter-Regular-webfont.eot');
 src: url('../_fonts/Bitter-Regular-webfont.eot?#iefix') 
 format('embedded-opentype'),
 url('../_fonts/Bitter-Regular-webfont.woff') format('woff'),
 url('../_fonts/Bitter-Regular-webfont.ttf') format('truetype'),
 url('../_fonts/Bitter-Regular-webfont.svg#BitterRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'Bitter';
 src: url('../_fonts/Bitter-Italic-webfont.eot');
 src: url('../_fonts/Bitter-Italic-webfont.eot?#iefix') 
 format('embedded-opentype'),
 url('../_fonts/Bitter-Italic-webfont.woff') format('woff'),
 url('../_fonts/Bitter-Italic-webfont.ttf') format('truetype'),
 url('../_fonts/Bitter-Italic-webfont.svg#BitterItalic') format('svg');
 font-weight: normal;
 font-style: italic;
}
@font-face {
 font-family: 'Bitter';
 src: url('../_fonts/Bitter-Bold-webfont.eot');
 src: url('../_fonts/Bitter-Bold-webfont.eot?#iefix') 
 format('embedded-opentype'),
 url('../_fonts/Bitter-Bold-webfont.woff') format('woff'),
 url('../_fonts/Bitter-Bold-webfont.ttf') format('truetype'),
 url('../_fonts/Bitter-Bold-webfont.svg#BitterBold') format('svg');
 font-weight: bold;
 font-style: normal;
}
@font-face {
 font-family: 'DroidSans';
 src: url('../_fonts/DroidSans-webfont.eot');
 src: url('../_fonts/DroidSans-webfont.eot?#iefix') 
 format('embedded-opentype'),
 url('../_fonts/DroidSans-webfont.woff') format('woff'),
 url('../_fonts/DroidSans-webfont.ttf') format('truetype'),
 url('../_fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'DroidSans';
 src: url('../_fonts/DroidSans-Bold-webfont.eot');
 src: url('../_fonts/DroidSans-Bold-webfont.eot?#iefix') 
 format('embedded-opentype'),
 url('../_fonts/DroidSans-Bold-webfont.woff') format('woff'),
 url('../_fonts/DroidSans-Bold-webfont.ttf') format('truetype'),
 url('../_fonts/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');
 font-weight: bold;
 font-style: normal;
}
/*Global styles ---------*/

/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, 
address, time, span, em, strong, img, ol, ul, li, figure, canvas, 
video, th, td, tr {
 margin: 0;
 padding: 0;
 border: 0;
 vertical-align:baseline;
 font: inherit;
}

</code>

Video Tutorial CSS

Our good friends over at EJ Media have created a complete set of free video tutorials for those of you who are visual learners. EJ masterful class for K-12 implementation is a good started kit for early students of technology and for those of you who are in the education space, the video series provide a good reference style guide to use in your lesson plans. For schools not providing proper economics, technology or computer science training, as the education space is woefully defunded in some parts of our country, the series provides a helpful guide for teachers and educators. 

HTML5 <style> element

You can use the HTML <style> element in the <head> of a document to wrap css code to be applied to the document as such. 

<code>
<head>
<style> type="text/css">

[....]

</style>

</head>

</code>

The type attribute defines which language is used in the style sheet. It is required for HTML, but it is optional in HTML5. However, I highly recommend of it's use. HTML5 also defines a scope attribute that allows the <style>element to be used inside a block of content, not just the head element. HTML content elements (those not associated with the document <head>) have a style attribute that can be used to assign a semicolon separated list of CSS declaration to a specific element. 

<code>

p style="color: pink">A Pink Paragraph</p>

</code>

This attribute is an unwieldy method of styling an entire document but can occasionally be useful on a project where it is important for style information to be matched with the HTML content such as when sharing HTML content across sites or defining one-off special cases for styling an element. 

 JavaScript and the Document Object Model

JS can access style sheets and style properties via the DOM. JS can be used to set styles via the style object on an element or to read current styling information using the getComputedStyle method. You can also use JavaScript to read the contents of style sheets via the document.styleSheets object, which is a useful technique for creating bridge libraries to bring support for unsupported CSS properties or selectors to older browsers. Moreover, CSS does not rely on whitespace or indentation to parse the values, but consistent use of whitespace can make code easier to follow. As can thoughtful organization of the rules in a document and good use of CSS comments (/*/*) can take you very far. 


K-12 Education Series 

Icon-Page-Full-Stack

 

New To JavaScript 

 


CSS Code Location 

CSS has its greatest value when it's shared across multiple documents or entire sites rather than rewritten or copy and pasted from document to document. As a result, it is common to break style rules into groups of how they apply to your content such as:

  • Global Styles
  • Section or page type styles
  • Page or content specific styles
  • Unique documents 

The implementation of this type of structure, if all those levels of granularity are helpful, could look something like the following code. 

<code>

<head>

[...]

<link type="text/css" href="styles/global.css">

<link type="text/css" href="styles/forums.css">

<link type="text/css" href="styles/PamAmIsbehindTheBlacklist.css">

[....]

</head>

</code>

CSS Portfolio Showcase

spiral-binding_cms_widgets2

  • CSS can be used to create customizable admin menu bars in conjunction with tailored Content Management Systems. The fonts I used to create the menu bar for the Spiral CMS where used using Font Awesome CSS including the icons as well.  I began with a clear requirement list from the client whilst following a clear design color pattern that was both corporate and minimal to fit their product guidelines. While the the CSS core tutorial is meant to be a basic introductory series, I wanted to show you just how powerful CSS can be when implemented in the wild. 

Customizer_WPNewTheme2

  • I used the built in customizer CSS functions in WordPress core to create user centric options for non-technical teams while at YipTV. The original theme was created by a developer with little design and WP expertise which proved to be a woeful attempt at managing the behavior of the theme overtime. The core principle behind using a CMS is to allow the user the ability to use the the backend CMS component  while not having to need a developer in-house. As more companies are beginning to see a zero sum value proposition when hiring full stack developers vs looking for offshore contracting work.