3. Controlling HTML with CSS Flashcards
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
Child elements of a flex container that automatically flex and adjust their sizes to fill the available space within the container.
flex-grow
flex-shrink
flex-basis
Flex Items
Determine the direction of the main axis of the flex container and can be set as
row (L to R)
column (top to bottom)
row-reverse
column-reverse
Flex Direction
Defines how flex items are aligned along the main axis of the flex container
flex-start
flex-end
center
space-between
space-around
Justify Content
Controls the alignment of flex items along the cross axis of the flex container
Align Items
Used to override the Align Items value for individual flex items.
Align Self
Two dimensional layout system that allows the creation of complex grid based layouts with rows and columns that provide precise controle over the positioning and sizing elements within a grid
CSS Grid
Parent element that establishes a grid context by applying display: grid to the container.
Grid Container
Child elements of a grid container tht are positioned within the grid and are automatically placed, based on the defined grid lines and cells.
Grid Items
Properties for defining the columns and rows of the grid by specifying their sizes and tracks.
You can use values like fixed lengths, percentages or flexible united like fr (fractional unit)
Grid Template Columns
Grid Template Rows
Specifies the spacing between grid cells thus allowing control over the gaps between rows and columns
Grid Gap
Shorthand property that defines a named grid area, allowing elements to span across multiple rows and columns in the grid
Grid Area
CSS offers various accessibility features to enhance the usability features to enhance the usability and inclusivity of websites for people with
Disabilities
CSS lets you specify alternative text for images using the
beneficial for screen readers that rely on alt text to convey meaning of images to visually impaired users.
Content Property
You can create high contrast style sheets that increase content visibility for users with
modifying colors, backgrounds and text properties can help ensure that the content remains distinguishable and readable in different contrast settings.
low vision or color blindness
Useful for users who navigate websites using the keyboard or assistive technologies
by highlighting the focused element - CSS helps improve the visibility and navigation for individuals with motor or visual impairments.
focus styles
Can hide / skip navigation links until they receive focus thus allowing users to bypass repetitive navigation menus and directly access the main content of a webpage
essential feature for users who rely on screen readers or keyboard navigation to quickly navigate through the website.
links
CSS can be used in conjunction with this to provide additional information about structure and behavior elements in relation to assistive technologies
Accessible Rich Internet Applications - ARIA
By applying appropriate ARIA roles and states - CSS helps make complex components more understandable and navigable for users with
Disabilities
CSS offers techniques to hide non-essential content such as off-screen elements or elements made visible only when triggered by specific user interactions and this approach is useful for screen readers, ensuring that the relevant content is presented in a
logical order while reducing unnecessary noise.
