Learn CSS - vidyasekaran/current_learning GitHub Wiki

Learning from Udemy Free CSS Course by - Ryan Bonhardt

Build Your First Website in 1 Week with HTML5 and CSS3

Lessons Learnt

  1. Go to https://getbootstrap.com/docs/3.3/getting-started/

  2. Download BootStrap and unzip - rename it to firstSite where we have 3 folders css, fonts, js

  3. In the same site in 1 go down and find - Using the framework - so that you can select any Template to quickly start with. Click the link and view source and you can copy it and save is as index.html (create custom.css and modify index.html to point to it )

  4. You can check other Templates see the view source and add it in your styles - custom.css. Cool..

  5. From boot starter template - view source copied nav bar and reused in my index.html and then to move the navbar to right do next step 6. ]NOTE: Click on Inspect to see which component maps to which in the index.html by moving cursor

  6. Goto https://getbootstrap.com/docs/3.3/getting-started/ and Click on Components on top - find example Nav Bar component and you click on component alignment if you want the alignment. I have used navbar-right to move the menu component to the right.

  7. Right click and Inspect to see from where the style comes from the .css file and modify it and see the result in output. You can click on different part of html to see where to change.

Example : you can modify styles while inspecting - add border: 1px solid; to see it puts a border and text-align : center to center text.

  1. In inspect you can right click each element and change the style and modify and see result.

  2. You may check css to change styles for example from blue to red button use btn-danger instead of btn-primary

https://getbootstrap.com/docs/3.3/getting-started/

  1. To apply text alignment to all jumbotron class elements add below in .css file

.jumbotron{ text-align: center; }

  1. 3 different ways to implement css are

a. Add it in .css file like .jumbotron{ text-align: center; }

b. add <style> </style> in header.

c. add

  1. If you want to change the font text size of a button inspect that element and check the font size in bootstrap css file and then override it by modify it by putting it in .css file example:

.btn-lg{ font-size: 24px; }

  1. To change the color of text for class - jumbotron p to blue add like below in custom.css (OR) you can specifically add like below

.jumbotron p{ color:blue; }

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more »

can use the

  1. To change the font of below to some cursive writing go to http://google.com/fonts select font and in the right hand side take link and add in header You will always need to inspect the page to find where to modify what?

Hello, world!

and in .css add below font-family: 'Send Flowers', cursive;

.jumbotron h1{ font-family: 'Send Flowers', cursive; }

  1. To change font for - ul.nav add below mentioned ul.nav { font-family: 'Send Flowers', cursive; }

      <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>

ul.nav{ font-family: 'Send Flowers', cursive; }

  1. To combine selectors and add same style do like below

ul.nav,.jumbotron h1{ font-family: 'Send Flowers', cursive; }

  1. Each div is kind of a box where for each element we can add margin , border and padding. Padding is within border where we can add some space between margin and element.

you can also use margin-top:10px for top space and margin-bottom : 20 px for bottom space beyond border.

⚠️ **GitHub.com Fallback** ⚠️