The foundation of these notes is taken from Barry Luijbregts' PluralSight course called HTML, CSS, and Javascript: The Big Picture. The images are screen captures, a few of which have been edited. Some additional information is included from various sources, which are listed at the bottom of each post in the References section.
This post is part of a long-term series called The Web Series. To start from the beginning, check out History of The Web. The Web Series includes everything you need to get started on the path of web development.
Formatting conventions used:
div { } This is an example CSS selector.
class=”specific” and color: white are also CSS.
<< >> These are just to frame the code. If you're using any code, do not copy these. For example, if it said << <a href="https://techkeen.com"> TechnicallyKeen</a> >> than you would only copy the following part:
<a href="https://techkeen.com"> TechnicallyKeen</a>This is only to keep the code snippets within their paragraph.
WHAT IS CSS?
"It’s still difficult to basic things like displaying something in the absolute middle of page regardless of size of object of screen."
- Barry Luijbregts (Course instructor)
STYLING HTML USING CSS
Inline CSS
I believe this is called inline CSS. Pretty much it is good for when you know you’ll only use the styling once in the entire document.
Syle Element CSS
If there is a chance you’ll need to use it more than once, this is the more responsible option.
In this example, any div in the HTML document will automatically be in blue italics. And it contains a CSS class that tells this one list item to be in italics.
Isn’t that div already italic, so why does this one have to be declared italic. Maybe at the top, it just defines italic so you can call on it easier.
Test this on htmlivecode or whatever it was called.
EXTERNAL STYLESHEETS
This is great for when you want much more uniformity, as the same stylesheet can be linked to as many html files in the folder as you want. You can even copy the style sheet to completely other folders. Unless it is a quick one-off project, this is the most recommended way to go. Having the stylesheet separate allows for easier readability and maintenance of the project.
When the browser reads this line of the HTML code, it quickly checks the folder for a file called << stylesheet.css >>. Now it knows that these are the rules. It as it reads through the rest of the code it will apply the rules of the style sheet.
In this example, whenever the browser comes across a << div >> in the stylesheet it will automatically colour the font blue and put it in italics.
CSS SYNTAX SELECTORS
Selectors select HTML elements to apply CSS properties to them.
none == element
. == class attribute
# == ID select
div { } selects all the HTML’s div elements
.class1{ } selects all elements with a class attribute set to << .class1 >>
#para1 { } selects all elements with ID of << para1>>
You can also nest things :
div p { } selects all paragraph elements within divs elements
“Selects all paragraphs elements that have div elements as parents”
Select multiple elements :
h1, h2, p { } all h1 elements, h2 elements, and p (paragraph) elements in the HTML are selected.
... and many more...
CSS PRIORITY
CSS is CascadingSS because properties are applied in a specific order based on priority.
This HTML example is just two paragraph elements with text between their tags. They both have the CSS class << “specific” >> assigned to them, but the second line has the ID << “more specific” >> assigned to it.
The browser then applies the stylesheet (left side of example figure) which results in the display on the right side of the example figure.
WHY ARE THEY THE COLOUR THEY ARE??
The << p { } >> selector in the CSS says that the background should blue, but the elements are both classified as << .specific >>, so that takes priority and turns them gray. The second element line is ID’d as << #morespecific >> so it is then turned red. But technically the browser reads from top to bottom so it’s more like the class attribute turned them grey and the higher priority element being turned rouge.
WHY DO THEY NOT HAVE BORDERS??
<< #morespecific >> says to have a solid black border around it, but in << .specific >> it is declared that the border is disabled like << border: none !important; >>. Because of priority, the note << !important >> value, which is the highest priority of all, says not to have a border. Because the << class=”specific” >> therefore << .specific >> applies to both elements, neither of them are allowed to have a border.
WHY IS THE TEXT WHITE??
The lowest priority << p { } >> is the only CSS selector that mentions [the font] colour << color: white >>, so the browser listens to it. Same thing with padding (the pace between rendered elements). If anything higher priority says otherwise, it listens to that one. Think of priority as the Chain of Command or by Ranks. CSS can have very complex hierarchies. Map them as you go.
For more on specificity: http://qnimate.com/ has a decent article.
Resources
Comments