CSS Flashcards
(54 cards)
What is the purpose of CSS?
CSS is used to style HTML, providing control over formatting and layout of web pages.
Why is separating HTML and CSS beneficial?
It ensures consistent design across all pages and allows easy updates by editing one CSS file instead of multiple HTML files.
What are the three ways to reference CSS in HTML?
Inline style
Internal style sheet
External style sheet
When should inline styles be used?
Only when an element needs a unique style not used elsewhere, as inline styles reduce maintainability and consistency.
What is a drawback of internal style sheets?
They do not provide consistent styling across multiple pages of a site.
What is the benefit of using an external style sheet?
It allows one CSS file to style multiple HTML pages, enabling quick and consistent updates.
SELECTORS
What are the main categories of CSS selectors?
Type
Class
ID
Universal
Attribute
What is a type selector in CSS?
A selector that uses the HTML element name (e.g., p, td, h1) to apply styles.
What is an ID selector in CSS?
A selector that targets a single element with a specific id using # before the ID name.
What’s the difference between ID and class in CSS?
D is unique and used once per page.
Class can be used multiple times and elements can have multiple classes.
Can an element have both a class and an ID?
Yes, but it can have only one ID and multiple classes.
COMBINING SECTORS
What is a combinator in CSS?
defines the relationship between selectors when using CSS
types of combinators.
Child
Descendant
Adjacent sibling
General sibling.
Child combinator
allows you to select elements that are within (nested with) other
elements.
For example, suppose you want to apply a style only to h1 elements that are inside a
<div> element.
div > h1 {
color: green;
}
</div>
Descendant combinator
allows you to select elements that are within (nested with) other elements, but nested anywhere in the hierarchy of styles, not just direct children as with the child combinator.
<!DOCTYPE HTML>
<html>
<head>
<title>CSS example</title>
<style>
div p{
background:lightblue;
div>p{
background:lightgreen;</style></head>
</html>
Adjacent sibling combinator
used to select an element that is directly after another element, not nested
within the element, but after it.
The two elements are separated by a + sign
General sibling combinator
similar to the adjacent sibling, but the sibling element does not have to directly
follow the element.
INHERITANCE
What is inheritance
Inheritance defines the way that
styles set on an element are passed down to the child elements.
properties that are not inherited
border, margin, padding,
APPLYING STYLES TO ELEMENTS WITH AN ATTRIBUTE VALUE
There are a number of different ways that CSS rules can be applied depending on the attributes that an element has.
What are they
Existence.
Equality.
Space.
Prefix.
Substring.
Suffix
Existence.
A style can be applied to those elements that simply have a certain attribute (i.e. it
exists).
For example, you could use the following CSS to style all the <a> elements that have a title attribute.
The attribute you want to select is placed in square brackets after the element, like this:</a>
a[title] {
color: red
Equality.
it may be that you want a style to apply only if the attribute is equal to a certain
value.
In which case you include the required attribute value in the selector.
a[title=”example”]{
color: green;
Space.
The above method will only style the element if there is an exact match to the attribute value, but you can also set the element to be styled if the value is in a list separated by spaces
.
To do this you precede the equals sign by the ~ character. For example:
a[title~=”example”]{
color: purple;
Prefix.
You can set a style based on an attribute that is prefixed (preceded) by a value using
this syntax:
a[title^=”my”]{
color: orange;
