CSS Essential 1: Selectors, Typography, Layouts
This is my summary notes of Christina Truong’s lecture: CSS Essential Training 1. Hope you enjoy!
HTML: Describes the content to the browserCSS: Presentation layer; defines styles (e.g., colors)JavaScript: Adds interactivity to the webpage
HTML overview/review
- Elements : components that define page objects(paragraphs, links, etc.)
- Tags : define the elements with angled brackets wrapped around the tag name and usually come in pairs
- Attributes : provide additional information (e.g., location of image file)
DOM(document object model)
The document object model represents the tree-like structure that is created when writing HTML. Each element is an object, which makes up the document, hence the name, document object model. Elements are often nested, meaning the tags are written inside of other tags. This creates relationships resembling a family tree. Branches of ancestors, descendants, parents, children, and sibling nodes.
Inline, internal, and external CSS
External CSS
- A separate file with a .css file extension.
- Always referenced within the <head>
- Uses the <link> and two attributes, rel and href
Inline CSS
- Inline CSS can be added to any HTML element with the style attribute.
- Inline styles take precedence over external CSS
Internal CSS
- Internal CSS uses the <style> tag, included in the <head> element.
- Internal CSS can also take precedence over an external style sheet, but only if it’s added after the external style sheet.
Naming conventions
- Use lowercase letters. Some servers are case-sensitive, so this can result in an error if it’s not consistent.
- Don’t use spaces or symbols, and use an underscore or dash to separate words. I prefer to use dashes, and as it turns out dashes are also better for search engine optimization.
- Use concise and descriptive names, which will also help with SEO and general organization.
Relative Paths
Relative Paths points to files located within your same project folder. This path is determined by where the file is located within the directory.
Absolute Paths
Absolute Paths refer to resources located on a server, including the domain name. It’s usually used when linking to pages outside of your website. When using Absolute Paths, only link to web pages, not specific files such as images.
CSS Terminology and Syntax
Selectors are used to determine which HTML element to apply the styles to. Declaration blocks contain the style rules, they are wrapped in curly braces to contain these styles to the specific selector. The declarations are the style rules, and are written using property:value; pairs. The property name is followed by a colon and ends with a semicolon, to indicate that the rule is complete. Properties determine the type of style to be applied to the element. And values are specific to that property, and will vary depending on the property type.
CSS Selectors
Type Selector
Type selectors match the HTML by using the element name. Without the angled brackets. For example, to apply styles to an h1 tag, h1 would be the selector.
Class Selector
Classes are useful for creating styles that can be reused throughout the document. Use classes to select elements that are more specific, reusable and flexible than type selectors. The class name is the selector, so the style can be applied to any element. Also, the same class can be used one or more times per page.
- Values can be named anything and defined by you.
- The class can be used multiple times on the same page to apply the style to any HTML element that contains the attribute.
- The value is then used as the selector, starting with the leading period to distinguish it from the type selector.
ID Selector
ID values can only be used once per page, so stick to using them for unique styles and global elements that are not repeated. ID values need to be unique for another reason as well. They can also be used for in-page linking.
- ID’s can only be used once per page and must have a unique value. ID selectors can never match more than one element in a single document.
- In CSS ID selectors are denoted by a leading # symbol.
Multiple Classes
- When choosing a class value, do not use spaces. Because the spaces actually indicate that there are multiple classes.
- You can apply different styles to each class and they will be independent of each other.
- If you combine them with no spaces, this style will only be applied if the attribute contains both class names.
Descendant selectors
When an element is nested inside of another element, it becomes its child or descendant.
In CSS, you can select these elements based on this relationship by using descendant selectors. Use multiple selectors separated by a space to match descendant elements.
For descendant selectors, try not to go more than three levels deep. Using more may result in a slower page load because the browser has to cycle through each pattern.
Pseudo-class selectors
Pseudo-class selectors are keywords used to target a specific state of the element. The keyword is combined with a selector using a colon and no white space before or after the colon.
CSS Specificity Rankings
Specificity determines which CSS rule is applied by the browsers. Every selector has a ranking in the specificity hierarchy. The selector with the higher specificity will be applied, regardless of the order of the CSS. The order only matters if the ranking of the selector is the same. This can get a little bit tricky. The ranking is based on what type of selector you’re using. Of the simple selectors we’ve discussed so far, Type selectors have the lowest specificity and IDs have the highest.
Typography
- Typography: the study of the design and use of type as a way to engage and communicate with your readers
- Typeface: a set of fonts designed with common characteristics composed of glyphs
- Font: individual files that are a part of the font family or typeface.
Internal font
Internal font sources refer to downloaded font files, included in your project’s directory just like any other file. Before you can use internal fonts in the CSS, you’ll need to declare it within your style sheet and link to the font files using a method called @font-face.
External font
To link to files in either the CSS or images folder, just add the folder name followed by a forward slash, then the file name.
The font-size property
Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16).
line-height
The line-height property is used to set the height of space between the two lines of content. This style should be considered when setting font sizes since they are closely related. If the line height is set to the same value as the font size, there will be no space between the lines which would make it hard to read, so as a rule of thumb, your line-height value should always be larger than the font size to add space between the lines. To make the line height more flexible to change, use relative units for the line-height property instead.
text-decoration
It can actually be used to add underlines as well above, below or even a strike-through line right through the text. You can remove the existing underline by setting it to none.
text-transform
The text-transform property specifies the letter casing of words or individual letters. This property is useful, because you can style the casing of your text with CSS rather than manually typing the letter casing.
Layout
Block-level
Block-level elements are by default the same height as the content contained between the tags, but they span the entire width of its container, even if the content itself doesn’t. This is why block elements always start on a new line. When writing the HTML, block elements can be nested within other block elements, or wrap inline elements. Most HTML elements are block-level, such as <p>, <div>, <h#>.
Inline elements
Inline elements are the height and width of their content. The elements align to the left side by side in a line. It’s not valid HTML to nest a block-level element within an inline element, but it can be used to nest other inline elements. HTML introduced one exception. <a> tags used for links can wrap block elements. This is generally used when you want to group more than one block element together as one link. Some common inline elements are the <a>, <span>, and <strong> tags.
Box Model Properties
For page layouts, pixels are commonly used. They’re fixed units and offer more control, but they’re not very flexible. Percentages are used to make the components relative to the size of its containing element. This comes in handy when designing and developing for different screen sizes and responsive web design.
- Width and the height are used to set a specific width or height value to the content box.
- Padding adjusts the space inside of the element.
- Margin controls the amount of space around the outside of the element.
- Border adds a border between the padding and the margin of an element.
Margin and page layouts
Margin can also be used to center-align block-level elements on the page. Use this technique to ensure the content blocks stay center-aligned no matter the size of the browser window. First, a width needs to be set. Then, set the left and right values to auto. This auto value will make it automatically find the center of the page.
Floats
Float is another property that can be used to rearrange how elements are displayed. Floats must be cleared to return to the natural page flow.
Floats not only effect the stacking order, it also effects the parent element. In this example, the parent element no longer recognizes the height of the floated element, and it will only wrap around the elements that do not have a float applied to it, represented by the black outline in this example.
Any elements following the collapsed container will also not recognize the floated elements, and will stack itself underneath. In the scenario where there is no element within the container to clear the float, what we’ll need to do instead is self-clear the float. And this will make the parent contain any floated child elements. There are two ways to do this.
The first option is to use the overflow property, with a value of auto or hidden.Apply this to the parent of the floated element, and while this is a common technique for clearing floats, overflow is actually used to specify how to display content that flows longer than its container.
The second option involves using a CSS snippet, created and maintained by many in the developer community.
The Box Model Fix
To use this fix, add this CSS code snippet to your projects. Padding and border will no longer affect the overall sizing of the element. The snippet will set the box-sizing to border-box and add it to the HTML selector.In the second declaration block, the asterisk selector targets every single HTML element, and this will ensure that all elements will inherit the styles from the HTML declaration.
This is end of my <CSS Essential Training 1> note. Hope it was useful. Contents will be continued in the next summary of <CSS Essential Training 2> ✋
