Chapter 1.3 - Introduction to CSS and Advanced HTML.

What is CSS?

CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content. CSS is independent of HTML and thus, as a rule, HTML will always represent content, and CSS will always represent the appearance of that content.

CSS Terminology

Some common CSS terminology is outlined below:

Selectors

As elements are added to a web page, they may be styled using CSS. A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to. Selectors may include a combination of different qualifiers to select unique elements, all depending on how specific we wish to be. >For example, we may want to select every paragraph on a page, or we may want to select only one specific paragraph on a page. Selectors generally target an attribute value, such as an id or class value, or target the type of element, such as <h1> or <p>. In CSS, selectors are followed by curly brackets, { }, which hold the styling that is applied to the selected element. In the following example, the selector 'p' is used to tell CSS to apply specific styles to the <p> elements.

p { ... }

Properties

Once an element is selected, a property determines the styles that will be applied to that element. Property names fall after a selector, within the curly brackets, {}, and immediately preceding a colon, :. There are numerous properties we can use, such as background, color, font-size, height, and width, and new properties are often added. >In the following code, we are defining the color and font-size properties to be applied to all <p> elements.

p {
	color: ...;
	font-size: ...;
}

Values

We can determine the behavior of a property with a value. Values can be identified as the text between he color, :, and semicolon, ;. >In the example below, we are selecting all <p> elements and setting the value of the color property to be orange and the value of the font-size property to be 16 pixels.

p {
	color: orange;
	font-size: 16px;
}

Note: it is common practice to indent the property and value pairs within the curly brackets.

Linking CSS and HTML

To get CSS talking to HTML, we reference our CSS file within our HTML file. The best practice for referencing CSS is to include all of our styles in a single external style sheet--this is referenced from within the <head> element of our HTML document.

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>A quote</title>
		<link rel="stylesheet"  href="mystyle.css">
	</head>

	<body>
		<!--  this is a comment -->
	</body>

</html>

If our CSS file is within a subdirectory or subfolder, the href attribute value needs to correlate to this path accordingly. For example, if our main.css file were stored within a subdirectory named stylesheets, the href attribute value would be stylesheets/main.css , using a forward slash to indicate moving into a subdirectory.

<head>
		<meta charset="utf-8">
		<title>A quote</title>
		<link rel="stylesheet"  href="stylesheets/mystyle.css">
</head>

CSS Resets

Because different web browsers might render our website differently, the practice of adding CSS resets to the top of our .css file has become a common practice. CSS resets take every common HTML element with a predefined style and provide one unified style for all browsers. These resets generally involve removing any sizing, margins, paddings, or additional styles and toning these values down.

There are numerous types of resets available but the two most common are Eric Meyer's reset and Normalize.css. Normalize.css requires a stronger understanding of CSS so hold off on implementing it until you have mastered the language!

“/* 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;
}

Example of Eric Meyer's reset implementation in .css file.

Oval: Web Development and Design