CSS Basics

Pseudo-class Selectors

A pseudo-class selector is a way of accessing HTML items that aren't part of the document tree (remember the tree structure we talked about earlier?). For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? It isn't there! Pseudo-class selectors let us style these kinds of changes in our HTML document. For example, we saw we could change a link's text-decoration property to make it something other than blue and underlined. Using pseudo selectors, you can control the appearance of unvisited and visited links—even links the user is hovering over but hasn't clicked! The CSS syntax for pseudo selectors is: selector:pseudo-class_selector { property: value; } Ex) a:hover { color: #cc0000; font-weight: bold; text-decoration: none; }

First-child Pseudo Selector

Another useful pseudo-class selector is first-child. It's used to apply styling to only the elements that are the first children of their parents. Ex) p:first-child { color: red; } Would make all paragraphs that are the first children of their parent elements red.

Display Property

By default, every HTML element is a block element and, thus, takes up the full with of the page. But the display property can change this. It has 4 values: 1. block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width. 2. inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line. 3. inline: This makes the element sit on the same line as another element, but without formatting it like a block (so it loses its dimensions). It only takes up as much width as it needs (not the whole line). *The inline display value is better suited for HTML elements that are blocks by default, such as headers and paragraphs (rather than <div>s)/ 4. none: This makes the element and its content (including any children) disappear from the page entirely!

CSS

CSS (which stands for Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. A style sheet is a file that describes how an HTML file should look. We say these style sheets are cascading because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that! Ex) p { color: red; } span { color: blue; }

Comments

CSS comments look different from HTML comments, but you still use them as a way to explain why you did something a certain way in your code. Ex) / * I'm a comment! * /

Specificity Value

Certain selectors will "override" others if they have a greater specificity value. ul li p { is more specific CSS than just p {, so when CSS sees tags that are both <p> tags and happen to be inside unordered lists, it will apply the more specific styling (ul li p {) to the text inside the lists.

Class Selector

Classes are useful when you have a bunch of elements (including ones of different types, like div, img, and p) that should all receive the same styling. Rather than applying the same rules to several selectors, you can simply apply the same class to all those HTML elements, then define the styling for that class in the CSS tab. Classes are identified in CSS with a dot (.) Ex) .'class name' {...

CSS Syntax (Rule Set, Declaration, Selector, Property, Value)

General format: selector { property: value; } A rule set is made up of a selector and 1 or more declarations. A declaration is made up of a property and a value (property-value pair). Declarations are enclosed in curly brackets and separated by semicolons. A selector allows you to select and manipulate HTML elements. 1 or more elements can be "selected" at once for styling using the elements themselves, nesting position, attributes (including id and class) and even values. Any HTML element can be a selector. A property is an aspect of a selector (it's like an attribute for html). They are the different styling options. For instance, you can change the font-family, color, and font-size of the text on your web pages . A value is a possible setting for a property. Ex) color can be red, blue, black, or almost any color. *You need to end each property-value with a semi-colon (;). That's how CSS knows you're done with one pair and ready for the next.

CSS Fonts (defaults)

How many fonts does CSS know? The answer is: it depends. Most computers will understand popular fonts like Verdana, Courier, and Garamond, but each individual computer has different fonts installed on it. The good news is that CSS has some built-in defaults meant to ensure your users see what you intend. They are: serif: A font with little decorative bits on the ends of the strokes that make up letters. Do a search on "serif" to see what we mean. sans-serif: A plain-looking font, like this one. It doesn't have the little doohickies on the ends of letters like a serif font does. cursive: A scripty font. It looks like cursive writing. But you can also import your own fonts. This will help make sure the person viewing your page has all the fonts you want them to have.

ID Selector

IDs are great for when you have exactly one element that should receive a certain kind of styling. IDs are identified in CSS with a pound sign (#) Ex) #'id name' {... This allows you to apply style to a single instance of a selector, rather than all instances.

Parents, Children, Siblings

If you think of the <html> tag as the trunk of the tree, you can think of its immediate branches—<head> and <body>—as its children. Both tags are children of <html>, and <html> is their parent element. Because they are both immediate/direct children of <html> (that is, they are both only one element away), they are siblings.

Using > with direct children

If you want to grab direct children—that is, an element that is directly nested inside another element, with no elements in between—you can use the > symbol. Ex) div > p { /* Some CSS */ } This only grabs <p>s that are nested directly inside of <div>s; it won't grab any paragraphs that are, say, nested inside lists that are in turn nested inside <div>s.

Pixels vs. Ems (font size)

Pixels assume that your screen and another viewer's are similar in size. What if the user is using a screen that's a very different size from yours, though (like a smartphone screen)? Enter ems. The font-size unit em is a relative measure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font: it just says 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size. Ex) <p style="font-size: 1em">One em!</p>

Border Property

The border is the edge of the element. It becomes visible by giving the border property width, style, and color. There is also border-top (-bottom, -left, -right). You can also set the border width, style, and color values at once. Ex) Div { border: 1px dashed blue; }

Margin Property

The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other. Auto value: if we take an HTML element with a specific width and set its margin to auto, this tells the document to automatically put equal left and right margins on our element, centering it on the page. Ex) div { margin: auto; } There is also margin-top (-bottom, -left, -right). Ex) div { margin-top: 10px; } You can also set an element's margins all at once: you just start from the top margin and go around clockwise (going from top to right to bottom to left). Ex) div { margin: 1px 2px 3px 4px; }

Padding Property

The padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content. Like margin, there is padding-top (-right, -bottom, -left) or you could set all values at once (going clockwise from top to right, bottom, and left). Ex) div { padding: 1px 2px 3px 4px; } *You should also know that if you want your padding to be the same for all four sides, you can declare that value only once. Ex) padding: 10px will give your HTML element 10 pixels of padding on all sides.

Using Link Tag

The second way to implement CSS is to write your CSS in a separate file. You do this by putting a <link /> tag (as you saw in the first exercise of this course) between the <head>...</head> tags of your HTML page. Your <link /> tag needs three attributes: 1. A type attribute that should always be equal to "text/css". 2. A rel attribute that should always be equal to "stylesheet". 3. A href attribute that should point to the web address of your CSS file. Ex) <link type="text/css" rel="stylesheet" href="styles.css" />

Position Property

There are 4 positioning types/values: 1. Static: If you don't specify an element's positioning type, it defaults to static. This just means "where the element would normally go." If you don't tell an element how to position itself, it just plunks itself down in the document. 2. Absolute: When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>. 3. Relative: relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning. If you give an element relative positioning and tell it to have a margin-top of 10px, it doesn't move down ten pixels from any particular thing—it moves down ten pixels from where it otherwise would have been. 5. Fixed: fixed positioning anchors an element to the browser window—you can think of it as gluing the element to the screen. If you scroll up and down, the fixed element stays put even as other elements scroll past.

Why separate form (CSS) and function (HTML)?

There are two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML): 1. You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color:red":) over and over. 2. You can apply similar appearance and formatting to several HTML pages from a single CSS file.

Most specific selectors

There are two selectors that are even more specific than nested selectors: classes and IDs. These will override the other selectors.

Using Style Tag

There are two ways to implement CSS. This first is to put your CSS between <style></style> tags, right in the same file as your HTML. These <style> tags go inside the <head></head> of your webpage. Ex) <head> <style> p { color: purple; } </style> <title>Result</title> </head>

Hexadecimal Values (colors)

This is the system used by CSS to identify colors. Hexadecimal counting is base-16 (each digit has 16 possibilities). Each digit can be the numbers 0 through 9 or the letters a through f. There are millions of colors available, but keep in mind that not all of them can be displayed by all browsers. Ex) Aqua = #00FFFF *Hex values always start with a pound sign (#), are up to six "digits" long, and are NOT case-sensitive: that is, they don't care about capitalization.

Border-radius Property

This property modifies the corners of HTML objects; it's how you get those cool rounded buttons! Ex) Div { border-radius: 5px; }

Clear Property

Unfortunately, we sometimes mix large floating elements with non-floating ones, and elements do end up on top of each other. This is because we haven't told these elements something very important: to clear the other elements on the page. Clear values are left, right, or both If you tell an element to clear: left, it will immediately move below any floating elements on the left side of the page; it can also clear elements on the right. If you tell it to clear: both, it will get out of the way of elements floating on the left and right! Ex) div { clear: right; } p { clear: both; }

Border-style Property

Values: Solid, dashed, hidden, double, dotted, groove, ridge, inset, outset Ex) Div { border-style: solid; }

Multiple Selectors

What if you want to grab <p>s that are inside two <div>s, and not all <p>s? You select those in the CSS tab. Ex) div div p { /*CSS stuff!*/ }

Float Property

When you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other. You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other. Float values can be left or right. We can use floated elements to naturally divide our pages into different sections. Ex) div { float: right; } p { float: left; }

Negative Values

When you give CSS a positive padding or margin value, it puts that space between the element and its reference: for instance, if you have a <div> and you give it a margin-left of 20px, it puts twenty pixels between the left margin of that <div> and the side of the screen. This effectively moves the <div> twenty pixels to the right. If you want to move an element in the other direction, you can give CSS a negative value: Ex){ margin-left: -20px; } will move the element twenty pixels to the left.

Nth-child Pseudo Selector

You can actually select any child of an element after the first child with the pseudo-class selector nth-child; you just add the child's number in parentheses after the pseudo-class selector. Ex) p:nth-child(2) { color: red; } Would turn every paragraph that is the second child of its parent element red.

* Selector

You can use this to apply CSS styling to every element on the page. Ex) * { border: 2px solid black; } You'll create a two-pixel wide solid black border around every element on the HTML page.

Backup Values

You don't have to jump straight to a default value like cursive or sans-serif: you can tell CSS to try several (separated by commas), going from one to the next if the one you want isn't available. Ex) p { font-family: Tahoma, Verdana, sans-serif; } CSS will first try to apply Tahoma to your paragraphs. If the user's computer doesn't have that font, it will try Verdana next, and if that doesn't work, it will show a default sans-serif font.

Top, Bottom, Left, and Right (margin, border, and padding)

You'll see abbreviations like TM, TB, and TP in the box model diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.

CSS Box Model

elements populate the page in what's known as the CSS box model. Each HTML element is like a tiny box or container that holds the pictures and text you specify.