"Some" about the box - Computer: Web Development

Thursday, May 28, 2020

CSS (Cascading Style Sheets)

https://classroom.udacity.com/courses/ud001/lessons/7473321627/concepts/74276264120923

CSS Tricks: https://css-tricks.com/almanac/

CSS: how the content should look in the webpage (layouts, colors etc)
HTML: the actual contents
[Without CSS, HTML allows basic formatting such as bold, italic etc, but nothing more. To use various layouts, use CSS]
NOTE: without CSS, browser also can apply default styling settings.
Youtube without CSS is something that would look like when the internet connection is slow.

CSS has rule-sets.
And a rule-set is nothing but rules on how to render the tags
For ex: div : {color: blue} => would mean, render everything under 'division' in body in blue color
Hence it has 2 parts: tags and the declarations.
CSS rule-sets are written inside <style></style> tags inside <head> tags
Comments inside CSS is same as C or C++: /* CSS comments */
NOTE: Comments inside html is different
attributes and classes:

p { colors: red }; => will change all the paragraph colors to red.
but if we want to change a particular paragraph (id) or a group of paragraphs (classes) to a color, we need id and classes.
while declaring a tag in <body> include the id (id is similar to a variable in C) or classes (group of tags marked to apply a particular setting)
<p id="site-description">check out my site description</p>
<p class="book-summary another-class">Algorithms</p>

NOTE: an html tag can belong to multiple classes (multiple groups/selectors)

And in CSS styles,

<style>

.book-summary { => classes starts with '.'

colors:red
}

#site-description { => id (variables/attributes) starts with #

colors:pink;
}

Colors:

.sidebars {

color: rgb(0, 0, 225) => blue
color: blue => blue
color: #0000ff => blue
color: #00f => blue (short-hand representation of 0000ff)

Selectors:

Basics: Tags, classes and IDs.
More complex selectors: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

HTML tags (trees)

Elements Link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Each page should contain: head + body
head elements are not displayed; mainly used for title, references, meta-data, CSS-styles etc
Body elements are displayed.
Each page should have only one body
Inside body we can have: divisions, header strings, links, images, buttons, paragraphs, sub-strings, super-strings, spans etc.

divisions: <div></div>: Inside divisions, you can organize header strings, buttons etc. A body can have multiple divisions
header strings: <h1-6> </h1-6>: h1 is the highest
links: <a href="https://www.gmail.com">GMAIL</a>: a means anchor here
images: <img src="https://page-containing-image" alt="some description"> [NOTE: images are similar to links: instead of href, we have src. But images dont have end tags </img>; hence, they are one of type called "void elements"
<figure>and <figcaption>=> can be used along with image to provide figure section
For ex:

<figure>
<img src="local_file.jpg" alt="description">
<figurecaption>Caption for the image which will be displayed below the image</figurecaption>
</figure>

<em></em> => for italic
<strong></strong> => for bold
<ul><li>option1</li><li>option2</li></ul> => unordered list
<ol> with numbers by default
Comments inside html:
NOTE: Comments inside CSS is same as C: /* CSS comment */