Part
1
File structure
Organization and File Structure
Before we begin building a website, we should give some thought to the organization of the files and folders of our project. You can dump everything in one folder, so long as our file paths were set up correctly, but this will get confusing quickly.
Alternatively, we can easily create a clean, organized file tree for our website that will not only make our lives easier, but improve the experience for our visitors.
Download the Demo
Part
2
Getting started with CSS
Basic CSS Syntax
CSS or cascading style sheets is a companion language to HTML which handles styling.
It's called 'cascading' because the browser reads it from top to bottom.
Create a stylesheet (.CSS file) in your text-editor. To link the stylesheet to your HTML file, paste the following code into the head of your HTML document.
In the code sample above assets/css/ is the path, and style.css is the file name. These depend on where you put your .css file and what you named it. If you're following the structure and file name in the Demo on this page, the above will work).
CSS Example
CSS consists of 3 parts; Selectors, Properties, and Units. Below is the proper syntax for a CSS declaration.
selector {property: unit;}
Here's a functional example
p {font-size: 16px;}
p = the selector
font-size = the property
16px = the unit
This declaration would make all of the paragraphs linking to this stylesheet have a font-size of 16px.
CSS Selectors
A CSS selector is the part of a CSS rule set that selects the HTML you want to style.
Here are some selectors.
Universal
Styles under this selector are applied globally unless overriden.
The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk. You can also use the universal selector in combination with other selectors.
Element Type Selector
Selector must match one or more HTML elements of the same name. Thus, the following selector would match all HTML unordered lists, or UL elements. Any HTML element can be an Element Type CSS Selector.
ID Selector
An ID selector is declared using a hash, or pound symbol (#) preceding a name defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.
* An ID element on a web page should be unique. That is, there should only be a single element on any given page with an specific ID. This makes the ID selector quite inflexible, because the styles used in the ID selector rule set can be used only once per page.
Class Selector
The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a name defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot. However, classes can be applied to as many items on a page as you want.
Psuedo Class
A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated.
CSS Properties
Properties are the styling elements within CSS including color, backgrounds, borders, text, fonts, and many more.
Here is a rather exhaustive list of PropertiesCSS Units
Units are also innumerable but some common ones follow:
Pixel 50px simple measurement unit for sizing all things including, type, margins, borders, etc.
Hex #00c2a6 Hex or hexidecimal is a 6 character string that defines a color