Section 4-5 (CSS)
CSS Simple Selectors
.class: Selects all elements with #id:Selects the element with id *: Selects all elements element: Selects all elements of that type element,element: Selects all elements of one type and all elements of another type
Controlling Inheritance
1. inherit: Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance". 2. initial: Sets the property value applied to a selected element to be the same as the value set for that property on that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to inherit instead. 3. unset: Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial. Resetting all property values: The CSS shorthand property all can be used to apply one of these inheritance values to (almost) all properties at once. Its value can be any one of the inheritance values (inherit, initial, unset, or revert). It's a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes.
Inline CSS
A Cascading Style Sheet that is embedded among the lines of HTML in a source document. Inline CSS allows you to apply a unique style to one HTML element at a time. You assign CSS to a specific HTML element by using the style attribute with any CSS properties defined within it. In the following example, you can see how to describe CSS style properties for an HTML <p> element in the same line of code.
Internal CSS
A Cascading Style Sheet that is part of an HTML document, but located in a separate area (usually the head section). In the <head> </head> add <style> </style> tag and select html element we want to affect by specifying element with { }
CSS Combinators
A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are 4 different combinators in CSS: 1. descendant selector (space): The descendant selector matches all elements that are descendants of a specified element. 2. child selector (>): The child selector selects all elements that are the children of a specified element. 3. adjacent sibling selector (+): The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". 4. general sibling selector (~): The general sibling selector selects all elements that are siblings of a specified element.
CSS Pseudo-Classes
A pseudo-class is used to define a special state of an element. Can be used to: 1. Style an element when a user mouses over it 2. Style visited and unvisited links differently 3. Style an element when it gets focus Syntax: selector:pseudo-class {property:value;} Anchor pseudo-classes: a:link{}. a:visited{}, a:hover{}, a:active{} Pseudo-classes and CSS classes can be combined. CSS - The :first-child pseudo-class The :first-child pseudo-class matches a specified element that is the first child of another element. - p:first-child {}: Match the first <p> element - p i:first-child {}: Match the first <i> element in all <p> elements - p:first-child i {}: Match all <I> elements in all first child <p> elements CSS - The :lang pseudo-class The :lang pseudo-class allows you to define special rules for different languages.
External CSS
An external style sheet can be written in any text editor, and must be saved with a .css extension. Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into 5 categories: 1. Simple selectors (select elements based on name, id, class) 2. Combinator selectors (select elements based on a specific relationship between them) 3. Pseudo-class selectors (select elements based on a certain state) 4. Pseudo-elements selectors (select and style a part of an element) 5. Attribute selectors (select elements based on an attribute or attribute value)
CSS
Cascading Style Sheets General rules: 1. Content is everything 2. Order comes from code 3. Children sit on parents
The Box Model of Website Styling
Height x Width Padding Border Margin
Classes vs Ids
In the CSS, a class selector is a name preceded by a full stop (".") and an ID selector is a name preceded by a hash character ("#"). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
Inheritance
Some CSS properties by default inherit values set on the current element's parent element, and some don't. (This can cause some behavior that you might not expect.) If you set properties that can inherit on an element, every element inside it will also be styled with those properties, unless you've applied those different property values directly to them. Some properties do not inherit.
Specificity
Specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element. It is basically a measure of how specific a selector's selection will be: An element selector is less specific — it will select all elements of that type that appear on a page — so will get a lower score. A class selector is more specific — it will select only the elements on a page that have a specific class attribute value — so will get a higher score. ID | Class > Tag The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns: Thousands: Score one in this column if the declaration is inside a style attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always simply 1000. Hundreds: Score one in this column for each ID selector contained inside the overall selector. Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector. Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.
CSS Attribute Selector
The attribute selectors can be useful for styling forms without class or ID. [attribute] selector is used to select elements with a specified attribute. [attribute="value"] selector is used to select elements with a specified attribute and value. [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value. [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value. [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value. [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.
CSS Box Sizing Property
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height. Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way. The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).
CSS Display Property
The display property specifies the display behavior (the type of rendering box) of an element. By default some are block display (take up whole width of screen - blocking out any other elements). We can change the display property to inline but we lose ability to change width, inline display , inline-block display, none.
CSS Layout - Float and Clear
The float property is used for positioning and formatting content e.g. let an image float left to the text in a container. The float property can have one of the following values: 1. left - The element floats to the left of its container 2. right - The element floats to the right of its container 3. none - The element does not float (will be displayed just where it occurs in the text). This is default 4. inherit - The element inherits the float value of its parent In its simplest use, the float property can be used to wrap text around images. The clear property specifies what elements can float beside the cleared element and on which side. The clear property can have one of the following values: 1. none - Allows floating elements on both sides. This is default 2. left - No floating elements allowed on the left side 3. right- No floating elements allowed on the right side 4. both - No floating elements allowed on either the left or the right side 4. inherit - The element inherits the clear value of its parent The most common way to use the clear property is after you have used a float property on an element. When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.
Font Properties
The font property is a shorthand property for: - font-style The font-style property specifies the font style for a text. - font-variant: The font-variant property specifies whether or not a text should be displayed in a small-caps font. - font-weight: The font-weight property sets how thick or thin characters in text should be displayed. - font-size/line-height: The font-size property sets the size of a font. The line-height property specifies the height of a line. - font-family: The font-family property specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
The Effect of CSS Location (Hierarchy of Implementing CSS)
The importance of a CSS declaration depends on what stylesheet it is specified in: Priority - Inline > Internal > External You can apply a global css rule to all webpages but on individual web pages you can apply more specific rules using internal or inline CSS as more or less one off changes for that specific page or that specific element on that page — suggested to implement all css in external css.
Stylesheets Cascade
The order of CSS rules matter. When two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used. 3 factors - Earlier ones overrule later ones: 1. Importance (!important) 2. Specificity 3. Source order
CSS Layout - Position Property
The position property specifies the type of positioning method used for an element. There are 5 different position values: 1. static: HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page 2. relative: An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. 3. fixed: An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. 4. absolute: An element with position: absolute; is positioned relative to the nearest positioned ancestor. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static. 5. sticky: An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). Positioning properties: bottom, clip, left, position, right, top, z-index
CSS Syntax Building Blocks
The property which is an identifier, that is a human-readable name, that defines which feature is considered. (Suggested: In alphabetical order.) The value which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine. Together they make a declaration.
Anatomy of CSS Syntax
The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. Example: h1 { color: blue; font-size: 12px; } h1: Selector color: Property blue: Value { }: Declaration blocks
z-index
When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order.
CSS Sizing
px: pixel (px) is a commonly used CSS unit on websites. pxis not scalable, it is an absolute unit. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user setting. em: equal to the computed font-size of that element's parent. If there is a div element defined with font-size: 16px, then for that div and for its children 1em = 16px. If font-size is not defined explicitly, that element will inherit it from the parent element. The inheritance continues to take place this way amongst ancestors up until the root element. Default font-size of the root element is provided by browser. rem: rem values are relative to the root html element, not to the parent element. That is, If font-size of the root element is 16px then 1 rem = 16px for all elements. If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px). Allow you to quickly scale an entire project by changing the root font-size (for example at a certain media query/screen size). Suggested: use rem in spacing (margin, padding, etc.) and font sizing and use em for layouts like menu. 100% = 16px; -> 90 / 16 = 562.5% == dynamic — em is phonetic pronunciation of m (width of capital letter M) 1em = 16px but with zoom it doesn't matter whether static or dynamically sized font but dynamically sized font (em or %) is inherited — states does not matter with parent size
