CSS Basics
Separation of Concerns
CSS is a presentation language. This means that it should only modify the β¨display propertiesβ¨ of a page and doesn’t modify the πcontentπ of a page. This also means CSS can apply style to other document types than just HTML. β»οΈ Neat!
Comments
You can disable areas of code or write love letters π to your future self using comments. Put a /*
at the front and a */
at the back:
/* I told you, future self, I really do care! */
/* p { background-color: ugly; }
(this style of comment also works
- as long as you CLOSE THE COMMENT BLOCK)
*/
Applying Rules
CSS properties can be placed directly π― into HTML via the style
attribute…
<p style=βborder: 1px solid red;β>Hello World!</p>
Linking External Stylesheets
…but including CSS directly in HTML will be hard to keep track of π. Itβs better to create a separate CSS file and reference ⬳ it from your HTML. Place a link element in the head of the page:
<link href=βstyle.cssβ rel=βstylesheetβ />
Rulesets
A ruleset says:
- which π (the selector’s) elements will be styled and
- how β¨ (the properties) they will be styled.
You’ll need at least one in your stylesheet to change the page. Use this template to form your rulesets:
/* which elements should be styled? */
/* selector goes here! */
* {
/*
how should those elements be styled?
properties go here!
*/
border: 1px solid red;
}
Selectors
To define which elements on your page a set of properties are going to apply to, use a selector. There are a bunch of selectors. Here are a few β:
Syntax | Example | Explanation | |
---|---|---|---|
by element type | type | p | Get elements with type (ex: paragraph). |
by class | .class | .my_class | Get elements with class (ex: my_class ). |
by id | #id | #this_el | Get the element with id (ex: this_el ). |
by attribute | [attribute] | [src] | Get elements with attribute (ex: src ). |
by attribute value | [attribute=value] | [alt=Dog] | Get elements with attribute equal to value. (ex: alt is set to Dog ). |
on hover | :hover | a:hover | Get elements under the mouse (ex: anchors under the mouse). |
not | :not(selector) | a:not(:hover) | Gets elements which do not match the selector (ex: anchors not under the mouse). |
Combining Selectors
Look for more than one selector on elements by βsmooshing themβ (a.k.a. concatenation) together. This gets paragraphs that also has class my_class
:
p.myclass
Nesting
Indicate that you want an element from inside a specific parent (or deeperβ) by putting the parent selector first, then a space, and then the child selector. Get all h1
’s inside section
s (or the child of a section
πͺ):
section h1
Immediate Children
Get an immediate child π§ using >
. For example, to select all paragraphs inside a section (but not also its children):
section > p
More complex selectors can be also be combined with the nesting notation. For example, to select all paragraphs inside divs with class myArea
inside the element with ID mainArea
or its children:
#main_area div.my_area > p
Properties
The good stuff. Change the way stuff looksβ¨. Properties belong inside the curly braces after a selector (or in yer HTML, in the style attribute)! Make sure to end your properties with a semicolon (;
), or things will break.
A helpful trick
To modify everything to have a red outline:
/*
I should really change this to
whatever I actually want to highlight.
*/
/* give me all elements */
* {
/* here are my properties π */
border: 1px solid red;
}
Here are a few basic properties you’ll use a lot:
Property | Options | Example | Explanation |
---|---|---|---|
border | size style color | border: 1px solid red; | all borders of the element |
margin | size | border: 20px; | the space between this element’s border and everything else |
padding | size | padding: 5px; | the space between this element’s border and the stuff inside |
color | color | color: gray; | the text color |
width | size | width: 100px; | horizontal distance of the element |
text-align | ’left’, ‘right’, ‘center’, ‘justified’ | text-align: center | Which direction should we shove the words? |
The Box Model
Which measurements π can be set is described in the box model.
ββββββββββββββββββββββββββββββββββββββ
β β³ β
β βββββββββββββββββββββββββ β
β β β³ β β
β β βββββββββββ β β
βββββ content ββ¦ padding β¨ββ¦ margin β¨β
β β βββββββββββ β β
β β β³ β β
β βββ border ββββββββββββββ β
β β³ β
ββββββββββββββββββββββββββββββββββββββ
And also “-top”, “-bottom”, “-left”, and “-right” versions. Let’s change a paragraph:
p {
margin-top: 15px;
boder-bottom: 3px solid blue;
padding: 5px;
}
Units
Distances in CSS can use a few different units. You can mostly use them interchangeably. So, something like:
padding: 15px;
or padding: 15em;
Property | Explanation |
---|---|
px | One dot on the screen. Most of the time. π It’s complicated don’t worry about it. |
% | Scales according to the parent (or other) element’s size. |
in | That’s inches. Imperial represent! |
mm | Yes, we have the more civilized version, too. π |
em | The font size relative to the parent. 1em means the same size as the parent. Bigger than one is bigger text. Smaller is smaller. |
rem | The font size relative to the root of the document. Use it if you want sizes to be consistent. |
vw and vh | 100’s of the window’s width (vw ) and height (vh ) |
Color
Color in CSS can be written a few different ways. You can use them interchangeably. So, background-color: white;
and padding: rgb(255,255,255);
mean the same thing.
Property | Explanation |
---|---|
named color | Use a whole bunch of colors just by writing their name, like: blue ,red , and fuchsia . There are even more in newer CSS but those might not look the same for everyone π€¦. |
rgb(r,g,b) | Lets you specify how much red, green, and blue. All three go from 0 (none) to 255 (MAXXED out). |
rgba(r,g,b,a) | Like rgb() , but also has opacity (a , for alpha, another term for opacity). |
hsl(h,s,l) | Also like rgb() , but lets you specify hue (which color), saturation (how much color), and lightness (brightness). There’s also hsla() that works like rgba() , but for hsl . |