From 234ffab8fe7e95cb52aa592a4fc29321af9a24f1 Mon Sep 17 00:00:00 2001 From: YashBhalekar07 <160022091+YashBhalekar07@users.noreply.github.com> Date: Sat, 9 Mar 2024 17:55:08 +0530 Subject: [PATCH] Delete style.css --- style.css | 488 ------------------------------------------------------ 1 file changed, 488 deletions(-) delete mode 100644 style.css diff --git a/style.css b/style.css deleted file mode 100644 index f8f502b..0000000 --- a/style.css +++ /dev/null @@ -1,488 +0,0 @@ -/* this is universal selector known as conflict selector and this not - inherited */ -* { - /* border-top: 10px solid #1098ad; */ - margin: 0; /* here margin is inherited */ - padding: 0; - box-sizing: border-box; /* not putting it in body because box sizing - not one of the property that gets inherited*/ -} - -/* pseudo element are not exist in html but it can also style in css */ - -/* element selector has higher priority than universal selector*/ - -/* PAGE SECTION */ - -body { - color: #444; /*All text is #444 which dont have deleare color*/ - font-family: sans-serif; - - border-top: 10px solid #1098ad; - /* The border property does NOT get inherited except all are inherited*/ - /* margin: 0; */ - /* margin is not inherited in body if we it inherited then use - it in universal selector */ - - position: relative; /* for the like button must be the child of body - if it not then we write position: relative; in the parent of like button*/ -} - -.main-header { - background-color: #f7f7f7; - /* padding: 20px; - padding-left: 40px; - padding-right: 40px; */ - padding: 20px 40px; - /* margin-bottom: 60px; */ - /* height: 80px; */ -} - -nav { - font-size: 18px; - /* text-align: center; This is for anchor element in center */ -} - -.post-header { - margin-bottom: 40px; -} - -article { - /* margin-bottom: 60px; */ -} - -aside { - background-color: #f7f7f7; - border-top: 5px solid #1098ad; - border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; - padding-left: 0px; - padding-right: 0px; */ - padding: 50px 40px; - - /* border-left: 5px solid #1098ad; - border-right: 5px solid #1098ad; */ -} - -/* SMALLER ELEMENTS */ - -h1, -h2, -h3 { - color: #1098ad; -} - -h1 { - font-size: 26px; - text-transform: uppercase; - font-style: italic; -} - -h2 { - font-size: 40px; - margin-bottom: 30px; -} - -h3 { - font-size: 30px; - margin-bottom: 20px; - margin-top: 40px; -} - -h4 { - font-size: 20px; - text-transform: uppercase; - text-align: center; - margin-bottom: 30px; -} - -p { - font-size: 22px; - line-height: 1.5; /* means line height is 1.5 times font size*/ - margin-bottom: 15px; -} - -ul, -ol { - margin-left: 50px; - margin-bottom: 20px; -} - -li { - font-size: 20px; - margin-bottom: 10px; - /* display: inline; */ -} - -li:last-child { - margin-bottom: 0; -} - -footer p { - font-size: 16px; -} - -/* article header p { - font-style: italic; -} */ -/* BOTH ARE SAME */ - -/* # for id & id is unique if we want to use multiple time then use class */ - -#author { - font-style: italic; - font-size: 18px; -} - -#copyright { - font-style: italic; - font-size: 16px; -} - -/* . for class & class is use multiple time */ -.related-author { - font-size: 18px; - font-weight: bold; -} - -/* mostly we use class if we want to use only once it is good for future*/ - -.related { - list-style: none; /* This is for remove bullet point*/ - margin-left: 0; -} - -aside { - background-color: #f7f7f7; - border-top: 5px solid #1098ad; - border-bottom: 5px solid #1098ad; - - /* border-left: 5px solid #1098ad; - border-right: 5px solid #1098ad; */ -} - -/* body { - background-color: orange; -} */ - -/* .first-li { - font-weight: bold; -} */ - -/* OR */ - -li:first-child { - /* means css find first li element by it self*/ - font-weight: bold; -} - -li:last-child { - font-style: italic; -} - -/* number,even,odd in () we can erite this */ -/* -li:nth-child(even) { - color: gray; -} -*/ - -/* article header h2:first-child { - color: red; -} */ -/* here first child means next item here after article first is header - and for header first(:first-child) is h2 */ - -/*Misconception this won't work */ -article p:first-child { - color: red; -} - -/* article p:nth-child(odd) { - color: orange; -} */ - -/* Styling links */ - -/* But a:link is not working */ -a:link { - color: #1098ad; - text-decoration: none; -} - -/* Mostly we dont use a:visited */ - -a:visited { - /* color: #777; */ - color: #1098ad; -} - -a:hover { - color: orangered; - font-weight: bold; - text-decoration: underline /* wavy or dotted*/ orangered; -} - -a:active { - background-color: black; - font-style: italic; -} - -.post-img { - width: 100%; - height: auto; - /* margin: 100px;*/ - /*If it is inline then it not create vertical place but it - not happen so images are inline but the behave like - inline-block */ -} - -nav a:link { - /* background-color: orangered; - margin: 20px; - padding: 20px; - display: block; */ - margin-right: 30px; - display: inline-block; -} - -nav a:link:last-child { - margin-right: 0; -} - -button { - font-size: 22px; - padding: 20px; - cursor: pointer; - - position: absolute; - /* top: 50px; - left: 50px; */ - bottom: 50px; - right: 145px; -} -/* pseudo element are not exist in html but it can also style in css -ex. ::first-letter */ -/* by default pseudo element is inline element */ -h1::first-letter { - font-style: normal; - margin-right: 5px; -} - -h3 + p::first-line { - /* color: red; */ -} - -h2 { - /* background-color: orange; */ - position: relative; -} - -h2::before { - content: "TOP"; - background-color: #ffe70e; - font-size: 16px; - font-weight: bold; - display: inline-block; - padding: 5px 10px; - position: absolute; - color: #444; - top: -10px; - right: -25px; -} - -a { - /*link has higher priority than this */ - color: royalblue; -} - -/* LVHA */ -/* - L-link - V-visited - H-hover - A-active -*/ - -/* RESOLVING CONFLICTS */ -#copyright { - /* id has higher priority than class and element selector */ - color: black; -} - -.copyright { - color: orange; -} - -.text { - color: pink; -} - -footer p { - color: yellow; /* if we use this !important then its priority is higher - */ -} - -/* nav a:link , -nav p{ - font-size: 18px; -} */ - -/* CENTER OUR PAGE */ -.container { - width: 1200px; - /* margin-left: auto; - margin-right: auto; */ - margin: 0 auto; - /* This is for like button */ -} - -/* FLOATS */ -/* -.author-img { - float: left; - margin-bottom: 20px; -} - -.author { - float: left; - margin-top: 10px; - margin-left: 20px; -} - -h1 { - float: left; -} - -nav { - float: right; -} - -// this need empty div -.clear { - clear: both; -} - - // clear fix hack -.clearfix::after { - /* two perticularity of after sudo element - 1. it only appear if we define something for content property - 2. by default they are inline element comment end here //// - - clear: both; - content: ""; - display: block; -} - -article { - width: 825px; - float: left; -} - -aside { - width: 300px; - float: right; -} - -footer { - clear: both; // for footer going down -} - -*/ - -/* Flexbox */ - -.main-header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.author-box { - display: flex; - align-items: center; - margin-bottom: 15px; -} - -.author { - margin-bottom: 0; - margin-left: 15px; -} - -.related-post { - display: flex; - align-items: center; - gap: 20px; - margin-bottom: 30px; -} - -.related-link:link { - font-size: 17px; - font-weight: bold; - font-style: normal; - margin-bottom: 5px; - display: block; -} - -.related-author { - font-size: 14px; - margin-bottom: 0; - font-weight: normal; - font-style: italic; -} - -/* Flexbox layout */ - -/* -.row { - display: flex; - gap: 75px; - margin-bottom: 60px; - align-items: flex-start; /* this is for to remove stretch of aside -} - -article { - flex: 1; - margin-bottom: 0; -} - -aside { - /* flex-basis: 300px; We dont use width in flex - /* - DEFAULTS : - flex-grow: 0; - flex-shrink: 1; - flex-basis: auto; - - - flex: 0 0 300px; -} - -*/ - -/* CSS GRID LAYOUT */ -.container { - display: grid; - grid-template-columns: 1fr 300px; - column-gap: 75px; - row-gap: 55px; - align-items: center; -} - -.main-header { - /* grid-column: 1 / span 2; */ - grid-column: 1/-1; -} - -article { -} - -aside { - height: 450px; -} - -footer { - background-color: aqua; - grid-column: 1/-1; -}