Selectors declare which part of the markup a style applies to by matching tags and attributes, they define the elements to which a set of CSS rules apply. Here are a basic list of selectors that have been useful thus far. A CSS rule-set consists of a selector and a declaration block, where the selector points to the HTML element that you want to style.
An property contains a name and value that are used to style an element. Here are some that I have used in the CSS for this site, but there are countless others in the documentation. Most of these definitions are from the Mozilla Developer Network, or an approximation of that definition.
Here are the links for documentation about everything that is CSS. For even more links as well as books that I used as well be sure to checkout the links section of the site (not just the CSS links)
Attribute selector - [attr=value] - used to target elements with a specific attribute in the HTML element.
a[href] {
background-color: yellow;
}
This code only targets anchor tags that have a href attribute.
Class selector - .classname
.className {
property: Value;
}
ID selector - #idname
#specificIdName {
property: Value;
}
Type selector - elementname
a {
property: Value;
}
Universal selector - * - This targets everything on page
* {
property: Value;
}
background - The CSS background shorthand property lets you adjust all of the available background style options at once, including color image, origin and size, repeat method, and other features. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
border - The border CSS property is a shorthand property for setting all individual border property values at once: border-width, border-style, and border-color. As with all shorthand properties, any individual value that is not specified is set to its corresponding initial value.
border-radius - CSS property allows Web authors to define how rounded border corners are. You can specify a single radius to make circular corners, or two radii, to make elliptical corners.
color - This sets the text color. Like background, it can be entered keyword, hex, RGB and rgba.
display - This specifies the type of rendering box used for an element. The main types used in this site are block, inline, inline-block and none.
display - inline - An inline element does not start on a new line and only takes up as much width as necessary.
display - block - A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
display - inline-block - inline-block elements are like inline elements but they can have a width and a height.
display - none - This hides the corresponding element, it is used several times throughout this site. in the html section, it is used to hide a div, and then show it when the corresponding button is clicked.
font-family - This is how you specify which fonts you want to load on the site. You can list several in the case that the primary one doesn't work. This also commonly requires a link with the meta element of the html.
font-size - typically entered in px or em. This site uses lots of different font sizes, mostly bootstrap defaults.
font-weight - This attribute defines the general boldness of the font you are using. It is uaully entered either by keywork (normal, bold), a numeric values (100-900) or by global values (inherit and initial). This site uses a font-weight of 500 and 600.
margin - The outer space of an element. This is also the space outside of the border of an element.
padding - The inner space of an element. This is also the space that is inside the border of en element.
white-space - The white-space CSS property determines how whitespace inside an element is handled. To make words break within themselves, use overflow-wrap, word-break, or hyphens instead.
