User Tools

Site Tools


teaching:css-syntax-and-selectors

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

teaching:css-syntax-and-selectors [2019/02/28 16:30] (current)
seanburns created
Line 1: Line 1:
 +<​markdown>​
 +# CSS Syntax, Selectors
  
 +**Date:** Sun 24 Mar 2019 
 +
 +## CSS, Cascading Style Sheets
 + 
 +From [MDN][1], CSS, or Cascading Style Sheets, is a "​language for specifying
 +how documents are presented to users -- how they are styled, laid out, etc." To
 +accomplish this, CSS uses rules to control the display of a document, usually
 +an HTML document. It does this through:
 +
 +- properties: the values that control how a document is displayed
 +- selectors: what the values control, e.g., the specific elements or other parts of HTML code
 +
 +CSS rules are usually placed in a separate file, called a stylesheet, although
 +they may also be placed in the HTML document -- either in the ``head`` or
 +within the specific tags or elements of HTML. To create some CSS, for example,
 +if I am using the ``h1`` element in my HTML document and I want to make the
 +text within that element red, then I would add the following to my stylesheet:
 +
 +```
 +h1 {
 +  color: red;
 +}
 +```
 +
 +In HTML, ``h1`` is referred to as an element, but in CSS, it's referred to as
 +a selector since it's use in CSS is to select the corresponding HTML element.
 +Here the **property**,​ named color is set to the **value** of red, and the
 +entire property/​value pair is referred to as a **declaration**. In the above
 +CSS code, there is only one declaration,​ but more can be added. Colors may also
 +be expressed in [HEX][2], a six character value expressed like ``#​FD0000``,​ or
 +in [other ways][3]. In fact, this is helpful for very fine control over color
 +display and color transparency.
 +
 +## Creating CSS
 +
 +One way to begin creating CSS is to create a separate file, usually called
 +**style.css** and list all the elements in that file that are used in the HTML
 +that we want to style. Thus, if we have the following elements in our HTML, we
 +can add them to our CSS file:
 +
 +- ``h1``
 +- ``h2``
 +- ``header``
 +- ``nav``
 +- ``article``
 +- ``section``
 +- ``p``
 +- ``ul``
 +- ``li``
 +- ``footer``
 +
 +In the **style.css**,​ we only then need to add an opening curly brace after the
 +end of each selector and a closing one at the end of the list of declarations,​
 +just like in the above code snippet. That is, begin with a selector, add an
 +opening curly brace, list the declarations,​ ending each one with a semi-colon,
 +and then close the curly brace. Here's an example of styling the ``p`` element
 +by coloring it red, making it bold, and increasing the default font-size to 20%
 +bigger than the default [12pt font][4], where ``1em`` generally equals the
 +default size of 12pt:
 +
 +```
 +p {
 +  color: red;
 +  font-weight:​ bold;
 +  font-size: 1.2em;
 +  }
 +```
 +
 +## The DOM (Document Object Model)
 +
 +Per Wikipedia, the [DOM][5], or the document object model is "an application
 +programming interface [API] that treats an HTML...document as a tree structure
 +wherein each node is an object representing a part of the document."​ Because of
 +the tree-like structure, the HTML document is thus represented as having a root
 +node (e.g., the ``html`` element at the beginning of an HTML document), which
 +itself contains children and sibling elements, and parent elements when viewed
 +going up the tree. We'll avoid many technical details of the DOM in this
 +course, but it's important to keep in mind because it affects how CSS is not
 +only applied to specific HTML elements but also to how CSS declarations
 +[cascade to child elements or are inherited][6] by parent elements. Later, as
 +you pursue web development,​ you'll learn that the DOM is also an essential part
 +of learning how to code in JavaScript. We'll also come back to the DOM as we
 +learn more CSS.
 +
 +For now, know that both Firefox and Chrome offer developer tools that
 +facilitate viewing the DOM of a specific HTML document. In Firefox, open the
 +Developer Tools and select Toggle tools. Then select any element on the page in
 +the inspector and right click to view the DOM. This will also reveal things
 +like the siblings, attributes, and other characteristics of an HTML element.
 +
 +## Applying CSS to HTML
 +
 +There are three ways to apply CSS to an HTML document (we can also apply CSS
 +using JavaScript, but that's not necessarily a best practice and is outside the
 +scope of this course). The three major ways are through:
 +
 +- External stylesheets
 +- Internal stylesheets
 +- Inline styles
 +
 +### External stylesheets
 +
 +In the same way that we link to images in our HTML or add URLs, we can also
 +link to stylesheets in the ``head`` of our HTML document. To start, we add the
 +following code, here abbreviated:​
 +
 +```
 +<​html>​
 +  <​head>​
 +    <​title>​My webpage</​title>​
 +    <link rel="​stylesheet"​ href="​styles/​style.css">​
 +  </​head>​
 +```
 +
 +For this to work, our stylesheet, named **style.css**,​ must be located in
 +a folder called **styles**. The folder'​s path must be relative to our
 +**index.html** file as a subdirectory.
 +
 +Adding external stylesheets keeps our HTML document clean and easy to read.
 +This is the only acceptable method for this course.
 +
 +### Internal stylesheets
 +
 +We can also add a stylesheet to the ``head`` of our document. This has some use
 +cases, as the [MDN][7] documentation describes, but it's not the best solution
 +for production websites. This is because by linking to an external stylesheet,
 +we are able to reuse that CSS across multiple pages, thus saving our time and
 +reducing the amount of data to transmit across the internet. Also, the CSS in an
 +internal stylesheet is useful only for that one page. However, to add an
 +internal stylesheet, we add a ``style`` element to the ``head`` of our HTML
 +document:
 +
 +```
 +<​html>​
 +  <​head>​
 +    <​title>​My webpage</​title>​
 +    <​style>​
 +      h1 {
 +        color: blue;
 +        }
 +    </​style>​
 +  </​head>​
 +```
 +
 +### Inline styles
 +
 +We can also style specific elements in an HTML page. As the [MDN][8]
 +documentation warns, don't do this. It's not easily maintained because an
 +inline style is only useful for the one single element that it styles, and
 +because it is messy, since it combines both CSS and HTML in a single document.
 +There are limited use cases for it, but generally you want to avoid this as
 +much as possible. However, to add an inline style, we just use the ``style``
 +HTML attribute for a specific element:
 +
 +```
 +<p style="​color:​ red">​Some text here.</​p>​
 +```
 +
 +## CSS Syntax
 +
 +### Properties, values, declarations
 +
 +As noted earlier, CSS syntax includes [two building blocks][8]: properties and
 +values, which together are called a declaration. Furthermore,​ declarations
 +grouped together are referred to as a declaration block. Each declaration block
 +is preceded by an opening curly brace and ends with a closing curly brace. Each
 +declaration is ends with a semi-colon.
 +
 +### Selectors and rules
 +
 +In order to assign a declaration or declaration block to an HTML element, we
 +need to add a selector. A selector selects a matching HTML element. Thus, if we
 +want to style all of the ``p`` tags in an HTML document, in our CSS we prefix
 +our declaration block with a ``p`` selector. The selector plus the declaration
 +block is referred to as a **rule**. Here's our rule for the ``p`` element:
 +
 +```
 +p {
 +  color: red;
 +  font-weight:​ bold;
 +  }
 +```
 +
 +### Other items to note
 +
 +The [MDN][9] makes note of some other important topics. These include:
 +
 +- at-rules
 +- nested statements
 +- readability with proper white space
 +- adding comments
 +
 +For now, I'll address the last two items -- and we'll come back to at-rules and nested statements later. ​
 +
 +Like our HTML documents, our CSS documents should be readable and easily understood. The two main ways of accomplishing this is by making sure that our rules are properly formatted and use appropriate white space. This can be done, for example, by only using one declaration per line. 
 +
 +The other way is to add comments, which can be very useful in trying to remember what our CSS code is doing in particular parts of a page. To add comments to our CSS code, we use forward slashes and asterisks:
 +
 +```
 +/* this is a comment in CSS ; it can be multiline,
 +like so. */
 +
 +p {
 +  color: red;
 +  font-weight:​ bold;
 +}
 +```
 +
 +It's also sometimes useful to comment out code. We might want to test how something looks without some CSS code or we might want to keep the code in our file for a while but comment it while we're not using it. Consider:
 +
 +```
 +/* p {
 +  color: red;
 +  font-weight:​ bold;
 +} */
 +```
 +
 +## CSS Simple selectors
 +
 +There are different types of selectors that we can use in our CSS. We'll explore most of them in the coming weeks. For now, let's explore the [simple selector][10]. ​
 +
 +Our of our examples so far that have used selectors have used what are called simple selectors. This is when the selector matches the element type on the HTML page, like the ``p`` tag. We can also use selectors to match ``class`` or ``id`` attributes in the HTML. In a follow up video, I will demonstrate the use of the simple selector. ​
 +
 +[1]:​https://​developer.mozilla.org/​en-US/​docs/​Learn/​CSS/​Introduction_to_CSS/​How_CSS_works
 +[2]:​https://​htmlcolorcodes.com/​
 +[3]:​https://​en.wikipedia.org/​wiki/​Web_colors
 +[4]:​https://​kyleschaeffer.com/​css-font-size-em-vs-px-vs-pt-vs-percent
 +[5]:​https://​en.wikipedia.org/​wiki/​Document_Object_Model
 +[6]:​https://​developer.mozilla.org/​en-US/​docs/​Learn/​CSS/​Introduction_to_CSS/​Cascade_and_inheritance
 +[7]:​https://​developer.mozilla.org/​en-US/​docs/​Learn/​CSS/​Introduction_to_CSS/​How_CSS_works#​Internal_stylesheet
 +[8]:​https://​developer.mozilla.org/​en-US/​docs/​Learn/​CSS/​Introduction_to_CSS/​Syntax#​A_touch_of_vocabulary
 +[9]:​https://​developer.mozilla.org/​en-US/​docs/​Learn/​CSS/​Introduction_to_CSS/​Syntax
 +[10]:​https://​developer.mozilla.org/​en-US/​docs/​Learn/​CSS/​Introduction_to_CSS/​Simple_selectors
 +</​markdown>​
teaching/css-syntax-and-selectors.txt ยท Last modified: 2019/02/28 16:30 by seanburns