Loading lesson path
CSS
Selectors, the cascade, layout basics, spacing, typography, and the core styling model.
CSS is the language we use to style an HTML document.
CSS is the language we use to style a Web page.
A CSS rule consists of a selector and a declaration block:
CSS selectors are used to "find" (or select) the HTML elements you want to style.
The universal selector (*) selects all HTML elements on the page.
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
An internal style sheet may be used if one single HTML page has a unique style.
An inline style may be used to apply a unique style for a single element.
If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.
Comments are used to explain the CSS code, and may help when you edit the source code at a later date.
Errors in CSS can lead to unexpected behavior or styles not being applied correctly.
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
An RGB color value represents RED, GREEN, and BLUE light sources.
A hexadecimal color is specified with: #RRGGBB.
HSL stands for hue, saturation, and lightness.
The CSS background properties are used to add background effects for elements.
The background-image property specifies an image to use as the background of an element.
The background-repeat property sets if/how a background image will be repeated.
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
To shorten the code, it is possible to specify all the background properties in one single property. This is called a shorthand property.
The CSS border properties allow you to specify the style, width, and color of an element's border.
The border-width property specifies the width of the four borders.
The border-color property is used to set the color of the four borders.
Like you saw in the earlier lesson, there are many properties to consider when dealing with borders.
The border-radius property is used to add rounded borders to an element:
The CSS margin properties are used to create space around elements, outside of any defined borders.
Margin collapse is when two margins collapse into a single margin.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element ( the box model ).
The CSS height and width properties are used to set the height and width of an element.
The min-width and max-width properties are used to set the minimum and maximum width of an element.
In CSS, the term "box model" is used when talking about web design and layout.
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
The outline-width property specifies the width of the outline, and can have one of the following values:
The outline-color property is used to set the color of the outline.
The outline property is a shorthand property for setting the following individual outline properties:
The outline-offset property adds a space between an outline and the edge/border of an element. The space between an element and its outline is transparent.
CSS has a lot of properties for styling and formatting text.
- text-align - text-align-last - vertical-align - direction - unicode-bidi
The CSS text-decoration property is used to control the appearance of decorative lines on text.
The CSS text-decoration-style property sets the style of the decoration line.
The CSS text-transform property is used to control the capitalization of text in an element.
CSS has several properties to control text spacing.
The text-shadow property adds shadow to text.
Web safe fonts are fonts that are universally installed across all browsers and devices.
Below are some commonly used font fallbacks, organized by the 5 generic font families:
The CSS font-style property specifies the font style for a text..
The CSS font-size property is used to specify the size of the text/font.
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Great font pairings are essential to great design!
To shorten the code, it is possible to specify all the individual font properties in one declaration.
Icons can easily be added to your HTML page, by using an icon library.
To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:
To use the Google icons, add the following line inside the <head> section of your HTML page:
HTML links can be styled with many CSS properties, like color , text-decoration , background-color , font-size , font-weight , font-family , etc.).
CSS can be used to create HTML link buttons:
In HTML, there are two main types of lists:
HTML tables can be greatly improved with CSS:
The CSS width property is used to set the width of a table.
The CSS text-align property is used to set the horizontal alignment of the content in <th> or <td>.
To add some more space between the inner borders and the content in a table, use the padding property on <td> and <th> elements:
A responsive table will display a horizontal scrollbar if the screen is too small to display the full content.
The display property is an important CSS property for controlling layout. It specifies whether an HTML element is treated as a block or an inline element.
When using display: none; the element is completely hidden from the document flow and does not take up any space.
The max-width property defines the maximum width of an element.
CSS positioning is about controlling the placement of elements within a web page.
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 us…
An element with position: sticky; toggles between a relative and fixed position, depending on the scroll position.
The top , right , bottom , and left properties are used to position elements.
The z-index property specifies the stack order of positioned elements.
The CSS overflow property controls what happens to content that is too big to fit into an area.
The overflow-x and overflow-y properties allow you to control overflow behavior independently for horizontal and vertical directions.
The float property specifies how an element should float within its container.
The clear property specifies what should happen with the element that is NEXT to a floating element.
The display: inline-block property combines the features of both inline and block elements.
With CSS, you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element.
There are several ways to horizontally center elements in CSS, depending on the type of element.
Vertical centering in CSS can be achieved using modern layout techniques like Flexbox and Grid, or using positioning with transforms.
A combinator is something that defines the relationship between two or more selectors.
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
Interactive pseudo-classes apply styles based on user interaction with elements.
Structural pseudo-classes select elements based on their position in the document tree.
A CSS pseudo-element is a keyword that can be added to a selector, to style a specific part of an element.
Pseudo-elements for text, allow you to style specific parts of text content, such as the first line or first letter.
Pseudo-elements for content allow you to insert content before or after elements, style list markers, and more.
The opacity property specifies the opacity/transparency of an element.
A navigation bar is an important component of web design.
In a vertical navigation bar, the navigation links are stacked vertically (on top of each other), and is typically aligned along the left or right side of a webpage.
In a horizontal navigation bar, the navigation links are stacked horizontally (next to each other), and is typically aligned on the top of a webpage.
CSS dropdowns are used to display a list of options or content when a user clicks or hover over an element, like a button or a navigation link.
How to add an image and other content inside the dropdown box.
A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page.
An image sprite is a collection of various small images put into one larger image file, called a "sprite image".
CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both.
Advanced attribute selectors match elements based on partial attribute values using special operators.
CSS is used to style HTML forms. The look of an HTML form can be greatly improved with CSS:
With CSS, you can style most of the different input types, like text fields, password fields, checkboxes, radio buttons, and file inputs. You can also style input labels and form buttons.
By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.
By default, a <textarea> can be resized with a "grabber" in the bottom right corner. To remove the grabber, set the resize property to none :
With CSS counters, you can create dynamic numbering of elements (like headings, sections, or list items) without using JavaScript.
CSS units are used to define the length and size of several properties.
Absolute units are fixed, and the length expressed in any of these will appear exactly that size.
Relative units specify a length relative to another length property (like parent element, root element, or viewport).
CSS inheritance is about what happens if no value is specified for a property on an element.
CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element.
Each type of CSS selector has a position in the specificity hierarchy, and the selector types carry different "weights".
The !important rule is used to give the value of a specific property the highest priority.
CSS math functions allow mathematical expressions to be used as property values.