This is a simple html/css crash course repo by The Net Ninja
.error //class level property
{
color: red;
}
p{ /* This is tag level declaration*/
color: azure;
}
p.error{ /tag and class level property declaration/
color: red;
}
p.success{
color: green;
}
p.feedback.success{ /multi class level declaration/
margin: 20px;
border:2px solid grey;
}
#content{ /*id attribute is used to */
border: 2px dashed pink;
padding: 20px;
background-color: aqua;
}
div#content{ /ID property is used alongside tag property/
border: 2px dashed pink;
padding: 20px;
background-color: aqua;
}
div p{ //parent child tag property to give some styling
color: blueviolet;
}
div .error{ //parent and class attribute used
color: blueviolet;
}
a[href] //tag and attribute related styling
{
color: yellowgreen;
}
a[href="www.google.com"]//tag and attribute spicified also called as attribute selector
{
color: brown;
}
*= -> includes
$= -> ends
div{
border: 2px dashed pink;
padding: 20px;
background-color: aqua;
margin: 20px;
}
p{
border: inheritance;
padding: inheritance;
}
for the main page content of a page, unique to that page.
like navigation menus, sidebars etc., it can be nested inside another element such as div
defines a certain section of a webpage (e.g. blog list, contact info)
defines a bit of content which makes up an article (e.g. a blog post) - defines an article within a website and should contain all related information about this topic
(e.g. news articles). It's often displayed in its own box with additional details e.g. author name, date published etc..
defines some content related to something else (e.g. similar blogs) - aside tag specifies some text which will appear outside the flow of normal document layout but still remain associated with the rest of the document
defines header of your website - contains the nav, title etc for the footer of a website , , - these tags are not visible by default when you view source code or inspect elements.