CSS: Selectors and Visual Rules
font-weight
In CSS, the ______ property controls how bold or thin text appears.
inline styles
Although CSS is a different language than HTML, it's possible to write CSS code directly within HTML code using inline styles.
CSS
Cascading style sheets is a style sheet language used to describe the presentation of an html document.
<style>
Fortunately, HTML allows you to write CSS code in its own dedicated section with the _____ element. CSS can be written between opening and closing _____ tags. To use the _____ element, it must be placed inside of the <head> element.
note. id.
If an HTML element needs to be styled uniquely (no matter what classes are applied to the element), we can add an ID to the element. To add an ID to an element, the element needs an id attribute: <h1 id="large-title"> ... </h1>
!important
There is one thing that is even more specific than IDs: !important. !important can be applied to specific attributes instead of full rules. It will override any style no matter how specific it is. As a result, it should almost never be used. Once !important is used, it is very hard to override.
text-align
To align text we can use the text-align property. The text-align property will align text to the element that holds it, otherwise known as its parent. can use left, center, right. h1 { text-align: right; }
<link>
You can use the _____ element to link HTML and CSS files together. The _____ element must be placed within the head of the HTML file.
opacity
_____ can be used to make elements fade into others for a nice overlay effect. To adjust the opacity of an element, the syntax looks like this: .overlay { opacity: 0.5; }
specificity
_______ is the order by which the browser decides which CSS styles will be displayed. A best practice in CSS is to style elements while using the lowest degree of specificity, so that if an element needs a new style, it is easy to override. IDs are the most specific selector in CSS, followed by classes, and finally, tags.
CSS declaration
a _____ is the part inside a css selector. the consist of a property and a value. h1 { color: blue; }
note background image
note background image. The background-image property will set the element's background to display an image. .main-banner { background-image: url("https://www.example.com/image.jpg"); }
note color
note color. In CSS, these two design aspects can be styled with the following two properties: color: this property styles an element's foreground color background-color: this property styles an element's background color
note.
note. Chaining Selectors When writing CSS rules, it's possible to require an HTML element to have two or more CSS selectors at the same time. This is done by combining multiple selectors, which we will refer to as chaining. For instance, if there was a .special class for h1 elements, the CSS would look like: h1.special { }
note.
note. To style an HTML element, you can add the style attribute directly to the opening tag.
note. class.
note. class. CSS is not limited to selecting elements by tag name. HTML elements can have more than just a tag name; they can also have attributes. One common attribute is the class attribute. It's also possible to select an element by its class attribute. <p class="brand">Sole Shoe Company</p>
note. classes and IDs
note. classes and IDs. classes are meant to style many elements while IDs are mainly meant for one element. IDs override the styles of tags and classes.
css selector
note. css selector format: p { }
note.
note. it's possible to add more than one class name to an HTML element's class attribute. <h1 class="green bold"> ... </h1>
note. multiple selectors.
note. multiple selectors. In order to make CSS more concise, it's possible to add CSS styles to multiple CSS selectors all at once. This prevents writing repetitive code.
note.
note. nested elements. In addition to chaining selectors to select elements, CSS supports selecting elements that are nested within other HTML elements. .main-list li { }
note
note. style editing.To make styles easy to edit, it's best to style with a tag selector, if possible. If not, add a class selector. If that is not specific enough, then consider using an ID selector.