Introduction to CSS

[Deep Dive: CSS Foundations, Introduction with Guil Hernandez] 0:01 CSS, which stands for Cascading Style Sheets, 0:06 is responsible for describing the presentation of HTML pages 0:10 and it defines how elements on a page are displayed. 0:14 Colors, font sizes, and page layout 0:18 are just a few of the presentational responsibilities of CSS. 0:20 With CSS we create rules to specify how contents should appear on a page. 0:25 We then associate those rules with HTML elements. 0:30 CSS was added by the W3C and HTML 4.0 0:34 to solve some development and maintenance problems 0:38 web developers were having at the time with HTML 3.2, 0:41 which had introduced several new presentational tags and attributes. 0:45 Because HTML was never intended to contain presentational tags 0:49 for formatting pages, such as the font and center tags, 0:53 it made it difficult and impractical to develop and maintain websites. 0:57 By separating the content from the presentation, 1:02 CSS made the development and maintenance of websites more efficient 1:05 by being able to share styles across multiple pages. 1:09 CSS also improved accessibility of web content 1:13 by allowing access and adaptability to various devices, 1:16 such as desktops, mobile devices, large screens, and printers. 1:20 Currently, CSS is the official complete web standards, with parts of the CSS 3 spec 1:26 in the recommendation stage--the stage where it's considered a final standard. 1:33 The good news is the W3C has split the CSS 3 spec 1:38 as a series of modules being implemented separately 1:43 and independently from each other. 1:46 This has enabled portions of the spec to move faster, 1:48 which is great, because it has really encouraged browser vendors 1:52 to implement certain modules without having to wait for the entire spec 1:55 to be considered finished. 1:59 To follow the development of CSS 3 and view all completed specifications and drafts 2:02 you can visit the W3C at www.W3.org. 2:07 One of the most fundamental concepts of CSS is the cascade. 2:11 The cascade determines which style properties are assigned to an element 2:15 based on declarations that have cascaded down from other sources. 2:19 It's what allows us to set styles and keep them consistent throughout a website 2:23 without having to repeat them. 2:27 There are three main concepts 2:29 that determine which properties are assigned to an element-- 2:30 importance, specificity, and source order. 2:33 The cascade then follows these three steps to determine which properties 2:36 to assign to an element. 2:40 Importance depends on the origin of the style sheet, 2:43 which can come from different sources, 2:46 such as user agent styles, user styles, and author styles. 2:48 User agent styles are the styles the browser applies by default. 2:52 Each browser has its own user agent style sheet, 2:56 and this is why there are some visual differences 2:58 when viewing a web page on different browsers. 3:01 User styles are the styles specified by the user. 3:04 Users can have special styles predefined that are different 3:08 from the browser's default styles. 3:10 These are are often times used for accessibility for people with special needs 3:12 who, for example, need larger font sizes, specific colors, or contrast. 3:16 Finally, author styles is the CSS in the HTML page specified by an author, 3:21 more likely the sites designer. 3:26 By default, rules in author style sheets have more weight 3:28 than user agent and user style sheets. 3:31 Specificity determines which CSS rule is applied by the browser. 3:36 As mentioned earlier, CSS rules have a particular weight defined 3:40 that determine which property will be applied to an element, 3:43 even when rules conflict. 3:46 Once the cascade decides the importance of a rule, 3:49 it then assigns a specificity to it. 3:52 If one is more specific than the other, it overrides it. 3:54 Later we'll discuss ways to calculate a selector's specificity. 3:57 Once you're familiar with how specificity works, 4:01 it can save you a lot of time customizing and troubleshooting your CSS. 4:03 Source order is the order in which styles are linked, included, or imported. 4:08 The order is important because the cascade assigns a priority to a rule 4:13 based on what order they appear. 4:17 If you have tooling styles sheets in the head section of the page, 4:19 the last one will take precedence over the first. 4:23 Or if two declarations affect the same element, 4:26 have the same importance and the same specificity, 4:29 the declaration that appears later in the style sheet will be applied. 4:32 After importance, specificity, and source order have been determined 4:38 a weight is assigned to each CSS rule. 4:42 The one with the greatest weight takes precedence when several rules are applied. 4:45 Inheritance means that the specified value of a property is copied from the value 4:50 of the parent element in the DOM tree. 4:54 When a property is said to be inherited, 4:56 it just means that the value will be determined by that inheritance 4:58 unless another property value is specified. 5:01 For example, if you set the body element of a page to a specified font, 5:04 that font will be inherited by other elements, 5:08 such as headings and paragraphs. 5:11 Not all properties are inherited, 5:13 but you can force them to be by using the inherited value, 5:14 which we'll go over later in detail. 5:18 CSS rules tell browsers how to render elements in an HTML document. 5:20 A CSS rule is comprised of two main parts-- 5:25 the selector followed by one or more declarations. 5:27 CSS rules then apply the declarations listed to all elements matched by the selector. 5:30 A selector is a part of the CSS rule that matches 5:37 a set of elements in an HTML document. 5:40 Selectors can contain one or more simple selectors, 5:43 such as an h1 or a paragraph element, 5:45 also a class or an ID separated by combinators. 5:48 Combinators explain the relationship between the selectors. 5:52 Examples of combinators are white space, the greater than sign, or a plus sign. 5:55 We'll go over all the combinators in the selectors video. 5:59 Selectors can range from element names to contextual representations. 6:03 They are case sensitive, so they must match the element name exactly. 6:07 A declaration is the part of the rule that sits inside the curly braces. 6:12 It consists of a property name, followed by a value. 6:16 Multiple declarations can be made by 6:19 organizing them into semicolon-separated groups. 6:21 Properties are a set of parameters that define the rendering of a document. 6:24 They indicate the part of the element you want to change. 6:28 Each property is then followed by a value, 6:31 which specifies the settings you want to use for the property. 6:33 Before learning CSS, it's important to have at least a basic understanding of HTML 6:37 and the structure of a document. 6:42 So now that we've covered some basic concepts, 6:44 we're ready to start writing CSS. 6:46 In the next video, we'll go over the different ways we can apply CSS to a page. 6:49 [treehouse] 6:54