Embedded Files
Learning CSS in 20 minutes?
Learning CSS in 20 minutes?
I learned a tiny amount about CSS (cascading style sheets) during a web design module at uni. But I haven't used my knowledge, other than occasionally changing the colour of a font, for about 5 years.
This is going to be fun. And tricky.
CSS syntax
CSS syntax
selector {
property1: value;
property2: value;
}
Selector
Selector
There are three types of selector:
element
class
ID
Element
Element
eg h1, section, strong etc.
Class
Class
The most common CSS selector.
Used to distinguish elements in the HTML by the attribute class="this-is-the-class" you've given them). You can add multiple classes to the same element in HTML by separating the class names with a space.
Use a period before the selector to tell the CSS that this is a class name and not an element name.
.this-is-the-class {
property: value;
}
ID
ID
Similar to class in that it is an HTML element determined by an attribute
<h1 id="main-header">Title</h1>
Only one of each ID across the whole page, but can have multiple classes (I don't really understand this bit yet).
Use # to tell the CSS that this is an ID
#main-header {
property: value;
}
Mostly, class selectors are the easiest to use.
Combining selectors
Combining selectors
Combine selectors in your CSS by listing all the selectors you wish to target, separated by periods.
.class1.class2.class3 {
property: value;
}
You can also select elements with parent selectors by putting a space between your selectors in CSS.
div p {
color: red;
}
<p>not selected</p>
<div>
<p>selected</p>
<p>selected</p>
<p>selected</p>
<span>
<p>selected</p>
</span>
</div>
<p>not selected</p>
The two rules above can be combined together too!
The * symbol is the "everywhere" selector and selects everything on your site. It's only used for global styling, such as setting the font family.
Loading CSS into the HTML page
Loading CSS into the HTML page
Three ways to do this:
inline
a bad idea since you can't reuse styles on multiple elements
in a <style> element in the <header>
also a bad idea since it affects load time and prevents you making style changes to the whole site
use an external CSS file linked to the webpage
<head>
<link rel="stylesheet" href="style.css">
The rel (relation) attribute tells the browser to use style.css as the stylesheet.
Starting out
Starting out
I built a very basic page using CSS and HTML - mainly just so I could get used to the different terminologies. (And also because the tutor told me to!).
Just ignore the typo, the content's not important in this example!
Other stuff I learned
Other stuff I learned
CSS will always use the lowest selector. So if you have selected the same element twice, the style applied to the HTML will be the style detailed in the last selector.
Theres a hierarchy to the different types of selector. A class will always override an element. An ID selector will always override a class.
Inline styles will override any CSS style sheet.
The default value for text colour (color) is inherited - it inherits whatever its parent's value is. So if <body> is set to red, the colour (color) of <p> text will be red.
When defining color, rgba lets you set the transparency of an element
like rgb, but there is an extra number at the end which is between 0 and 1, where 1 is fully opaque and 0 is fully transparent.
Transparency is also achieved by adding two extra digits to the end of a hex code (eg #000000FF for full opaque or #00000000 for full transparent.
The box model
The margin attribute spaces elements from each other.
The padding element spaces the content within a border (or <div>)
Different sizes
pixels
percent
em - based on font size (1em is default setting for your font size)
rem - based on font size of your browser (not of font size of the HTML)
Page updated
Google Sites
Report abuse