Cascading Style Sheet & Layout

| Syntax

  • The selector points to the HTML element/tag you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name and a value, separated by a colon.
  • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

| CSS selectors

  1. Element Selector

/ Element Selector:

p {
text-align: center;
color: green;
}

/ ID Selector:

<p id="paragraph">Test Example</p>
#paragraph {
text-align: center;
color: red;
}

/ Class Selector:

<p class="paragraph">Test Example</p>
.paragraph {
text-align: center;
color: red;
}

/ Units

  • Absolute Lengths

/ Box Model

  • Content — The content of the box, where text and images appear
  • Padding — Clears an area around the content. The padding is transparent
  • Border — A border that goes around the padding and content
  • Margin — Clears an area outside the border. The margin is transparent

/ Colors

<h1 style="background-color:yello;">Hello World</h1>
<h3 style="border:2px solid red;">Hello World</h3>
<p style="color:green;">Lorem ipsum...</p>

/ Spacing

  • CSS Margins
div {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div {
margin: 100px;
}

/ CSS Padding

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
div {
margin: 100px;
}

/ Sizing

  • Setting height and width
div {
height: 200px;
width: 50%;
background-color: powderblue;
}

/ Fonts

  • Font Family
p {
font-family: "Times New Roman", Times, serif;
}

/ Font Style

  • normal — The text is shown normally
  • italic — The text is shown in italics
  • oblique — The text is “leaning” (oblique is very similar to italic, but less supported)
.normal {
font-style: normal;
}

.italic {
font-style: italic;
}

.oblique {
font-style: oblique;
}

/ Font Size

h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}

/ Font Weight

p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}

/ Positioning

  • static
  • relative
  • fixed
  • absolute
  • sticky
  • position: relative;
div.relative {   
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store