Learn CSS as a Beginner - day 2 | 90 Day Code

 Learn CSS as a Beginner - day 2

There are three core part in web development: 

  1. HTML
  2. CSS
  3. JavaScript
CSS - (Cascading Style Sheets) makes web page beautiful. Add makeup in text, audio, video, table, input. 

CSS can style a html tag in three ways: 
  • Inline CSS
  • Internal CSS
  • External CSS
1. Inline CSS: 
  • It's direct apply in html element 
  • use style attribute
  • Inline css override the style which are define by the internal or external CSS
  • Ex: <p style="color: blue">I am blue text</p>




2. Internal CSS:
  • write <style></style> tag under the <head> tag.
  • <style>p {color: blue;}</style>
Internal CSS Rules


3. External CSS: 
  • Professionaly every developer use external css to manage their html code.
  • In your html code write <link rel="stylesheet" href="style.css"/> in the head tag. 
  • Example: 
External CSS Rules



HTML Color: you can use color in your website in five different ways. 
  • Color names: <h1 style="color: tomato">Tomato Color</h1>
  • RGB: <h1 style="color: rgb(100, 100, 50)">RGB Color</h1>
  • RGBA: <h1 style="color: rgba(100, 50, 60, 0.5)">A for Alpha: The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)</h1>
  • HSL:  hsl(hue, saturation, lightness) hue= 0 to 360, 0 is red, 120 is green, 240 is blue, saturation= 0% to 100%, 0% means shade of gray and 100% means full color. lightness= 0% is black, and 100% is white. 
  • HSLA: <h1 style="color: hsla(10, 5%, 55%, 0.5">HSLA Color</h1>
  • HEX: In HTML, a color can be specified using a hexadecimal value. <h1 style="color: #012daa">Hexadecimal Color code</h1>
Some CSS Properties 

background-color
height
width
font-size
font-weightfont-weight sets how thik or thin text. It's normal value: 400
font-familyit is used for how text look like. There are lot of Option to sets font-family in a text.
  • you can use google font
  • you can use custom font
  • you can use default font: serif, cursive, Tahoma,  sans-serif,
spant tagapply style to part a paragraph 
borderborder: 1px solid/deshed/dotted red; border is like a wall. 
border-radius
margintop right bottom left (clock wise) 

margin-left: 10px;
margin-top: 5px;
paddingUse padding to away text from the border
padding has 4 value: top right bottom left
padding-top: 4px;
padding-right: 3px;
CSS Box Model
  • border
  • width
  • height
  • margin
  • padding
text-align
  • center
  • left
  • right
display
  • inline: span, a, b, strong tag
  • inline-block: img tag
  • block: p, h1 tag

CSS Measuring Unit: there are lot of  measuring unit in CSS. 
  • px
  • %
  • em
  • vw
  • in
  • cm
  • mm
  • pt
Selector in CSS: We can style our document in many ways by CSS selector. 
  • Element Selector: 


    element selector in css

  • Class Selector: 


class selector in css


  • ID Selector:

    ID Selector in CSS

  • Grouping Selector: div, .blue { color: blue; } <p class="blue">I am blue</p> <div>I am also</div>

  • Combine Selector: All p element won't blue. Only p element be blue which contains .blue class. 
Combine selector in CSS



  • Child Selector: 

Child Selector

  • Descendant Selector: Select all p element inside div element. 
  • div p { color: red; } <div><p>Hello</p><div>World</div></div> Here Hello text will be red. 

  • Adjacent Sibling Selector: 
  • Universal Selector: * { box-sizing: border-box;}
  • Pseudo Class Selector 



Comments

Post a Comment

Popular posts from this blog

Journey start to become a web developer and Learn HTML - day 1 | 90 Day Code

Image
Journey start to become a web developer and Learn HTML - day 1 | 90 Day Code Before start to be a web developer journey you must follow three rules until you finished.   It will take 6-7 hours every day (90 day)  Must be given priority than all other works Be unsocial and sacrifice all other enjoyable issue in this 90 day.    3 main language to build a website How to become a Front end Web Developer in four steps:  Learn HTML, CSS, Bootstrap, JavaScript Learn a Framework: React  Learn version control system: Git Learn CSS preprocessors: SASS, JS preprocessors: TypeScript frontend web development skills How to become a back end developer:   Understanding of front end web technologies: HTML, CSS, JavaScript Choose a programming language: 👉JavaScript👈 or Python or PHP Learn a framework: node js, express js, django (python framework) Learn git and github Learn Firebase, firebase authentication,  Databases: SQL and Non-SQL (MongoDB) Learn about API...
Read more

Learn javaScript Basics- Day 4

HTML : html used for describing content CSS : css used for describing presentation of the content JavaScript : javascript used for describing behaviours Run JavaScript in VS Code node filename.js or,  click run button in VS code create a launch.json file select node.js preview html and css are not programming language. JavaScript is a programming language.  Programming is a set of instruction (which is written by programmer) that telling a computer what to do.    What does the alert() function do? The alert function opens up a pop-up box with whatever text you pass to it. What does prompt() funtion do? The prompt function opens up a pop up box with a text field that allows the user to type an answer, which it will then return to code. Primitive values are hardcoded and therefore cannot be changed. if a=10, you can change the value of x you can not change 10 Javascript data types Numbers String booleans null undefined object function Numbers : JavaScript onl...
Read more

Learn Git and host your website- Day 3

 Github  Create a Github account It helps you to share you code multiple computers or collaborate with friends version control system Install Git ======= download git from Google git --version download Github desktop  https://desktop.github.com/ Configuring Git =========== git config --global user.name "coderMojnu" git config --global user.email mojnu.cse.pust@gmail.com First Push ======= mkdir first_push cd first_push touch README.md (Markdown is a language that looks a lot like plain text)  echo "foo bar bizz bang" >> README.md (saving some text in README.md) cd projects/first_push/ git init git status git add README.md (Calling git track the file)  git commit -m "Initial Commit" (Calling git to save this)  Checking Status and Branches ====================== git status Send your all Code to github ===================== create a new Repository and fill up the information and hit 'create Repository' button git remote add origin https://github...
Read more