[VISUAL] CSS Intro, Syntax & the CSS Cascade

PublishedOctober 8, 2023

•1 min read

[VISUAL] CSS Intro, Syntax & the CSS Cascade

Nuclear

Aspiring Frontend Engineer

Image description

CSS Syntax

Image description

CSS Specificity

Image description

LINK CSS TO HTML

To write the css in a seperate file, you have to link that file to the html. In the head element, make a new element called link and write this:

<head>
    <link href="styles.css" rel="stylesheet"/>
</head>

href attribute specifies the path of the file, if the file is in the same directory as the html, then you just write the file name.

href stands for hypertext reference and yes the value of that attribute (the path) is a reference to the file.

rel stands for relation and here we are specifying the relation of that file we referenced. Is it a stylesheet file, a favicon, it is an alternative page in a different language?

#web-development #webdev #html5 #css #beginners

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

File permissions in unix-like OSs ft. ls stdout

nuclearegg69@zenbook-f13:~$ ls -l total 56 -rw-r--r-- 1 nuclearegg69 nuclearegg69 0 Oct 10 07:55 1 -rw-r--r-- 1 nuclearegg69 nuclearegg69 0 Oct 10 07:55 2 -rw-r--r-- 1 nuclearegg69 nuclearegg69 0 Oct 10 07:55 3 -rw-r--r-- 1 nuclearegg69 nucl...

Dec 22, 20233 min read

Quirks with 'value' attrib/prop on 'input' element/object

<input value='something'> If we change the user input (text on ui) to be 'something else', what happens to the attribute value in the html and what happens to the value property on the dom object representing that element? The property value will ch...

Dec 21, 20232 min read

Closures !!

A closure is a function with its outer function lexical scope/environment. What does 'lexical' mean? 'Lexical' means relating to words, so the 'lexical scope of a function' is the scope related to the wording of that function or the definition of th...

Dec 18, 20234 min read

HTML Collection vs Nodelist

Both are array-like objects but they differ in some areas HTML Collection is a collection of element nodes is returned by 'getElementsByClassName' and 'getElementsByTagName' Nodelist contains all types of nodes: element nodes, text nodes, etc is r...

Dec 17, 20231 min read

window object and the DOM

When we query an element in js using document.querySelector syntax. We might would want to stop a bit and think about what we wrote document.querySelector looks like the syntax we use for properties on a object where the name before the dot (.) repre...

Dec 14, 20233 min read

My Technical Blog

38 posts

Command Palette

CSS Syntax

CSS Specificity

LINK CSS TO HTML

Comments

More from this blog