3. Controlling HTML with CSS Flashcards
(43 cards)
Allow you to separate your content from its presentation
Cascading Style sheets
CSS
Handles the content of web browsers
HTML
One way to incorporate CSS code is to save all of your markup to file using the
.css extension that accessible to your .html files
Another way to use CSS is to add it between <style> tags within this section of your HTML</style>
<head>
</head>
Tag uses the stylesheet attribute and points to a CSS file called main.css thats in the web root directory on this server
rel
paragraph
p
element will be applied through the id=attribute
special
targets elements with a class
.highlight
targets elements based on relationship
list-style-type: square;
target elements based on attribute values
input[type=”text’] {
border: 1px solid gray;
classes are not traditional classes but class controls
pseudo class.
normal at-rest appearance of a button my have
blue background
white text
hovering will cause the background to
turn light blue
mechanism that allows properties defined on parent elements to be inherited by their chiled elements
when property is set on a parent element its value is automatically inherited by its descendents unless overridden.
CSS Inheritance
HTML exists within this that uses the id=attribute to adopt the parent style
<div>
</div>
html style attribute overrides css rules in style tag and css file
Inline css
takes precedence over a less specific one
more specific selector
Rules that appear later in the code override earlier rules if both have the same
specificity
CSS rule that always takes precedence
!important
root element
rem
viewport height
vh
Exist to enable flexible and responsive web design and provid efficient ways to structure and align elements within containers - allowing developers to create complex and dynamic layouts
CSS Flexbox
CSS Grid
Designed for one-dimensional layouts typically used for arranging items along a single row or column
flexible box model that distributes space among elements, adjusting their sized and positions based on available space and alignment rules
CSS Flexbox (Flexible Box Layout)
Parent element that holds a collection of flex items and is defined by applying
display:
flex or display:
inline-flex:
To the container
Flex Container
