CSS Basics Flashcards
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)
