CSS Basics Flashcards
(12 cards)
what does CSS stand for
cascading style sheets
what does css handle
styling of the website
basic syntax
rule set
declaration block
declarations
rule set
h1 {
background: pink;
font-size: 1.5em;
}
selector (h1) and declaration block
declaration box
{
background: pink;
font-size: 1.5em;
}
where the declarations are organized
declarations
{
background: pink;
font-size: 1.5em;
}
each of these lines is a declaration
property (font-size) + value (1.53m)
what makes it cascading
browser reads CSS top to bottom
boxes lower down override higher up boxes
applying css to html:
inline
<p>Some red text.</p>
<p>plain old p text</p>
when css is applied directly to the element in the html file through a style attribute
applying css to html:
<style></style>
element in the <head>
<head>
<title>title</title>
<style>
p {
color: blue;
font-size: 42px;
font-weight: 700;
}
</style></head>
when css is applied via a style element box in the header section in the html file
applying css to html:
external stylesheet
<head>
<meta></meta>
<title>
Page title for browser tab.
</title>
<!-- The following link points to a stylesheet called "index.css". -->
<link></link>
</head>
link href=”styles.css” –> linking to an external stylesheet (.css file) in your project file
which method is the best?
external spreadsheet
good web developers separate their concerns
html –> good for structure and content
css –> styling
JS –> behavior and interactivity
what methods are bad and why?
inline –> messy, not efficient
style element –> messy and long (good in quick demos or single paged sites)
