Hello, CSS
In order to define the "design" of a web page we use a language that is completely separate from HTML. It is called CSS.
Why is CSS a separate language ?
Because, it serves a completely different purpose.
While HTML represents the content of a web page, CSS defines how that content is "presented" to the user. This is a fundamental distinction central to modern web development.
CSS Stylesheets:
CSS stylesheets reside in plaintext files with a .css extension.
A CSS "rule" always start with a "selector" that defines which HTML elements it applies to. After the selector, we have the "declarations block" inside of some curly braces.
Linking a CSS Stylesheet:
In order to see our stylesheet in action we need to link our HTML page with our CSS file together. This is what the HTML <link> element is for.
This <link> element is how browsers know they need to load the CSS file, e.g. "styles.css" when they try to render a web page.
The <link> element is only meant to be used inside of the <head>, and it is an empty element, so it does not need a closing tag.
Since it is in the head of the document, <link> connects to metadata that is defined outside of the current document.
The rel attribute defines the relationship between the resource and the HTML document. The most common value is stylesheet. The href attribute should point only to a .css file.
Setting Multiple Properties:
We can stick as many properties as we want in the declarations block of a CSS rule.
Units of Measurement:
Many CSS properties require a unit of measurement. There is a lot of units available, but the most common ones you will encounter are px (pixel) and em (pronounced like the letter m).
The em unit is very useful for defining sizes relative to some base font. In the above diagram, we can see em units scaling to match a base font size of 12px, 16px, and 20px.
Consider the following code snippet:
h1 {
font–size: 2em;
}
h2 {
font–size: 1.6em;
}
This sets our base font size for the document to 18px, then says that our <h1> elements should be twice that size and our <h2>'s should be 1.6 times bigger.
If we (or the user) ever wanted to make the base font bigger or smaller, em units would allow our entire page to scale accordingly.
Selecting Multiple Elements:
What if we want to add some styles to all our headings ?
We can select multiple HTML elements in the same CSS rule by separating them with commas, like this:
h1, h2, h3, h4, h5, h6 {
font–family: "Helvetica", "Tahoma", sans–serif;
}
This defines the font to use for all of our headings with a single rule. That is great, because if we ever want to change it, we only have to do so in one place.
Copying and pasting code is usually a bad idea for web developers, and multiple selectors can help reduce that kind of behaviour quite a bit.
Defining Fonts:
font–family is a built–in CSS property that defines the typeface for whatever element we select. It accepts multiple values because not all users will have the same fonts installed.
With the above code snippet, the browser tries to load the left–most one first (Helvetica), falls back to Tahoma if the user does not have it, and finally chooses the system's default sans serif font.
List Styles:
The list–style–type property lets us alter the bullet icon used for <li> elements. We typically define this on the parent <ul> or <ol> element, like this:
ul {
list–style–type: circle;
}
ol {
list–style–type: lower–roman;
}
Another common value of the list–style–type property is none, which is commonly used when marking up menu navigation using a <ul> list. The none value allows the menu's list items to be styled more like buttons.
This is a good example of the separation of content from presentation:
A navigation menu is an "unordered list", but it also makes sense to display them as buttons instead of a typical bulleted list. Intelligently designed HTML allows search engines to infer the structure of our content, while CSS lets us display it to humans in beautiful ways.
Reusable Stylesheets:
When we have just defined some basic styles for one of our web pages, it would be really convenient if we could reuse them on our other web pages, too. For this purpose, all we need to do is to add the same <link> element to any other web pages we want to style in the same manner.
Thus, whenever we change a style in our CSS file, those changes will automatically be reflected in every web page that is linked thereto. This is how we get a consistent look and feel across an entire website.
More Text Styles:
Underlines:
The text–decoration property determines whether text is underlined or not. By setting it to none, we can, for example, remove the default underline from all of our links.
a {
text–decoration: none;
}
Text Alignment:
The text–align property defines the alignment of the text in an HTML element. Accepted values are left, right, center, or justify.
Font Weight and Styles:
The font-weight property defines the “boldness” of the text in an element, and the font–style property indicates whether it's italicized or not.
Inline styles should be avoided at all costs because they make it impossible to alter styles from an external stylesheet. You would have to go through every single page and update every single HTML element that has a "style" attribute. It is horrifying.
However, there will be many times when you will need to apply styles to only a specific HTML element. For this purpose, you should always use CSS classes instead of inline styles.
Multiple Stylesheets:
CSS rules can be spread across several external stylesheets by adding multiple <link> elements to the same page. A common use case is to separate out styles for different sections of your website.
The order of the <link> elements matters. Stylesheets that come "later" will override styles in "earlier" ones.
Typically, you will put your "base" or "default" styles in a global stylesheet (styles.css) and supplement them with section–specific stylesheets (product.css and blog.css). This allows you to organize CSS rules into manageable files.
Summary:
Separating content from presentation allows us to reuse the same CSS stylesheet in multiple HTML documents.
As a web developer, you will (hopefully) be given a polished design to work off of. Your job is to "turn" that mockup into a real web page leveraging your knowledge of CSS.
While setting individual CSS properties is actually quite simple, the hard part is "combining" the overwhelming number of built–in properties to create exactly what your web designer asked for, and to do it quickly.