Introduction to CSS: Selectors

Anatomy of a Website: As I’ve mentioned in previous lectures websites are made up of many different types of files that are interpreted by your browser to look and contain the information that they do. One file we know websites are made up of is HTML Today we will be working with another important file that makes up websites and that is a CSS file. Your Content + HTML: Structure + CSS: Presentation = Your Website CSS is basically the language you will use to make your content look good

What is CSS? CSS stands for Cascading Style Sheets. It is a “style sheet language” that lets you style elements on your webpage. CSS is embedded inside HTML but is not HTML itself. We use link CSS files in the HTML code. CSS is useful for changing fonts, colors, size, underline, highlighting, positioning, etc.

Anatomy of CSS CSS consist of “style rules”. Each style consists of a “selector” and “declarations” of property-value pairs:

CSS in HTML: CSS can be embedded in HTML in several ways. One way is to include all CSS in a style tag, usually inside the head tag like shown in the example to the right. You can also have CSS be defined in a separate file, and imported using either the link tag or the @import statement in CSS.

Selectors: Element The selector is used to select which elements(tags) in the HTML page will be given the styles in the curly brackets. There are 4 types of selectors: 1. Element 2. id 3. class 4. position in document. The example above is of the first type of selector, element. The code inside the curly brackets affects all the p elements in the entire HTML document. This can be used with many other HTML tags, like div, table, a, ul, li, h1, etc.

Selectors: IDs The code below shows an example of how to use a header. Element IDs are unique, so that should only be used for one element. The “#” is how you tell CSS “this is an ID.”

Selector: Class The code below shows an example of how to create a class in CSS. Multiple elements(tags) in an HTML document can have the same class name. The “.” is how you tell CSS “this is a class name.”

Selector: Class continued An element can only have 1 ID but multiple classes, so you can take advantage of that for greater flexibility.

Selector: Position in Document You can actually style elements(tags) embedded within other elements(tags)

Selectors: IDs + Position The code below will select(style) any <li> element that is embedded from an element with an ID that equals “related-brands.”

Selectors: Elements + Class You can also only select all elements that contain a specific class name. The example below selects any li element with a class attribute that contains the word “special.” WARNING: If you place a space after the “.”, it’ll look for descendants of li with class of “special.”

Selectors : All of them combined The example above selects any em element with a class attribute that contains the word “required” that is a embedded within a p element that is embedded within a form element that is embedded within a div element with the class attribute “content”, that is a descendant of any element with an ID attribute that equals “header.”

Selector: Pseudo classes/actions A set of “pseudo classes” can style anchor elements based on their state: Unvisited Visited Mouse Over Current link(clicked) Focused link

Grouping Selectors and Selector Rules: You can group selectors to apply the same style to all of the selectors by separating them with commas: Cascade Rules: ID is more specific than a class, class is more specific than element. The longer the selector, the more specific it is If style rules are equally specific, the last one wins!

CSS Assignment: Starting with the solution from the second HTML exercise, add CSS rules to the webpage so that it looks like the screenshot to the right. All the CSS rules should have "color: red;" or "color: blue;" as the property-value pair. Just use different selector types to style the different parts of the page. Note that there are often multiple ways to achieve the same result in CSS. Try to use a mix of the different types of selectors- id, class, position in document, etc. Add CSS using the Style tag or link a CSS file to your HTML page.