CSS – Basic Syntax
CSS stands for Cascading Style Sheets and is the language used to describe how HTML elements on a web page or printed page should be displayed and styled.
CSS – Placing Styles in Your Document
CSS can be added to documents by using the style attribute inside an element, by placing styles in the document head, or by linking to an external file.
CSS – !important Rule
The CSS !important rule is used to add importance to a property/value to override all styling rules for that specific property on that element.
CSS – Comments
CSS comments are used for notes in the style blocks, whether inline, in the document head, or an external file. Comments are not displayed in the browser.
CSS – Color Values
In CSS/HTML there are many ways to express a color value. The method chosen will likely depend on the color itself and whether or not there’s transparency.
CSS – Backgrounds
The CSS background properties are used to add backgrounds and background effects to the HTML page and HTML elements.
CSS – Box Model
The CSS box model is a method for visualizing the layout of every HTML element, which consists of the content, padding, borders, and margins.
CSS – Setting the Size of an Element
The CSS width, height, min-width, min-height, max-width, and max-height properties are used to set the size (including minimum/maximum) of an element.
CSS – Display and Visibility
The display property and visibility property are used to control the layout of the page. They dictate how, and if, an element is shown on the page.
CSS – Block, Inline, and Inline-Block Elements
The display property is used to set how an element should be displayed within the page layout. Values include block, inline, and inline-block.
CSS – Positioning an Element
CSS is used to position HTML elements as one of the following: static, relative, fixed, absolute, or sticky, and also define the stack order of an element.
CSS – Opacity
The opacity of an element can be used to create effects such as elements fading in our out on hover, or changing opacity as a visual cue to the user.
CSS – Floating an Element
The float property is used to position content by “floating” an element either to the left or right, and is often used to position an image next to text.
CSS – Padding
The CSS padding property gives an element space around its content, inside of any defined borders. The padding can be set for all four sides of the element.
CSS – Clearing an Element
When we use the float property, and we want the next element below (not on right or left), we can use the clear property.
CSS – Borders and Border Radius
The CSS border property allow you to specify the style, width, color, radius, etc. of an element’s border.
CSS – Margin
The CSS margin property gives an element space around its content, outside of any defined borders. The margin can be set for all four sides of the element.
CSS – Outline
A CSS outline is a line that is drawn around elements, outside the borders, prior to the margin, to give the element additional visibility for the user.
CSS – Formatting Text
CSS can be used to style HTML text by changing the font, color, size, weight, spacing, alignment, and more.
CSS – Choosing a Font
There are many ways to apply a font to the text on your site, including the use of web-safe fonts, custom fonts, and Google fonts.