CSS

  • The Element Selector

    • Based on element name
      p {
  text-align: center;
}

    • Based on id attribute of an element

      <p id="para1">This is para1</p>

      #para1 {
  text-align: right;
}
    • Based on class name
      <h1 class="center">This is header</h1>
<p class="center">This is a para</p>

      .center {
  text-align: center;
}

    • Based on element name and class name

      only <p> elements with class="center" will be center-aligned and red.

      <h1 class="center">This is header</h1>
<p class="center">This is a para</p>
<p>This is another para</p>

      p.center {
  text-align: center;
  color: red;
}
    • Refer to more then one class
      <p class="center large">This is a para</p>

      center {
  text-align: center;
}
large {
  font-size: 32px;
}
    • Group
      h1, p {
  text-align: center;
}

  • How to Insert

    • External style sheet
      <head>
  <link href="../static/styles.css" rel="stylesheet">
</head>
    • Internal style sheet
      <head>
  <style>
  p {
      text-align: center;
      color: red;
  } 
  </style>
</head>
    • Inline style
      <p style="color:blue;margin-left:30px;">This is a heading.</p>
      Cascading Order: (Priority from high to low)
      1. Inline
      2. Internal and External
      3. Browser default

  • Practise below css styles:

    • Font

      .important {
  font-family: "Times New Roman", Times, serif;
  font-size: 64px;
  font-weight: bold;
}
    • Color 
      .p {
  color: blue
}
.form-search input[type=submit] {
background-color: #337ab7;         
}
    • Padding
      body {
padding-top: 20px;
padding-bottom: 20px;
}
.footer {
padding-right: 15px;
padding-left: 15px;
}
/* clockwise rotation: top-right-bottom-left */
p {
  padding: 50px 30px 50px 80px;
}
.form-search {
padding: 15px;
}

    • Margin

      Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

      This does not happen on left and right margins! Only top and bottom margins!

      /* horizontally center the element within its container.*/
div {
  margin: 0 auto;
}
/* inherit from parent element */
div.container {
  margin-left: 100px;
}    
p.one {
  margin-left: inherit;
}

      <div class="container">
<p class="one">This is a paragraph with an inherited left margin (from the div element).</p>
</div>
    • Border
      .footer {
border-top: 1px solid #e5e5e5;
}
/* rounded border */
.form-search input[type=submit] {
border: 1px solid #337ab7;
border-radius: 3px;
}
    • Form
      /* focus input text */
input[type=text]:focus {
  background-color: lightblue;
}
input[type=text]:focus {
  border: 3px solid #555;
}
    • Table
      /* striped table */
tr:nth-child(even) {
  background-color: #f2f2f2
}
/* collapse border */
table {
  border-collapse: collapse;
}

results matching ""

    No results matching ""