Just a little bit about HTML and CSS

HTML

<!DOCTYPE html> is placed at the start of an HTML file to indicate to the browser that HTML5 is being used.

Tags:

  • <html></html> : contents of website
  • <head></head> : metadata about the page that is useful for the browser when displaying the page
  • <title></title> : title of the page
  • <body></body> : body of the page
  • <a href=“path/to/hello.html”>Click here!</a> : link to hello.html
  • <img src=“path/to/img.jpg” height=”200″ width=”300″> : image stored at src attribute: height=50% to automatically scale the image to a certain portion of the page
  • <table></table> : table
    • <th></th> : table header
    • <tr></tr> : table row
    • <td></td> : table data (cell)
  • <form></form> : form that can be filled out and submitted by the user
  • <input type=“text” placeholder=“Full Name” name=“name”> : input field
    • type indicates the type of data
    • placeholder is the greyed-out text shown before the field is filled
    • name is an identifier for the input field
  • <button></button> : button used to submit form

CSS

CSS (Cascading Style Sheets) is a language used to interact with and style HTML.

A separate .css file: add <link rel=”stylesheet” href=”path/to/styles.css”> to the header

Sectioning with HTML and CSS

A lot of CSS properties, more here.

  • <div></div> : vertical division of a webpage
  • <span></span> : section of a webpage inside, for example, text

References for different sections of a webpage:

  • id attribute – uniquely, use #id in CSS
  • class attribute – use .class in CSS

Selections of element p:

p::selection {
color: red;
background-color: yellow;
}

hovering over a button or not:

button:hover {
background-color: orange;
}

Responsive design

@media is a media query, which means the following CSS will be applied only in certain situations, namely when the webpage is being printed. 

<style>
@media print {
.screen-only {
display: none;
}
}
</style>
<body>
<p class="screen-only">This will not appear when printed</p>
</body>

.screen-only is a class selector which identifies what content we want to be print only

@media (min-width: 500px) {
body {
background-color: red;
}
}
@media (max-width: 499px) {
body {
background-color: yellow;
}
}

When the width of the screen is at least 500px, the background color of body will be red, while if it is less than 499px, the background color of body will be yellow.

Flexbox

.container {
display: flex;
flex-wrap: wrap;
}

By setting display: flex and flex-wrap: wrap, the content will wrap vertically if necessary, so no content is lost when the width of the screen is shrunk.


Bootstrap

Bootstrap is a CSS library written to help make clean, responsive, and nice-looking websites without having to remember the gritty details about flexboxes or grids every time a layout needs to be set up.

How to add:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Bootstrap’s columns and rows are referenced in HTML with class=”row” and class=”col-3″ attributes, where the number after col- is the number of columns the element should use.

Bootstrap’s documentation


Sass

SASS-Syntactically Awesome Style Sheets. You need to install it first installed. Execute sass style.scss style.css to compile Sass file style.scss into style.css, which can actually be linked to an HTML file.

Sass variables

$color: blue;

#myHeader {
  background-color: $color;
  color: black;
  text-align: center;
  font-style: italic;
  text-shadow: 1px 1px 10px green;
  font-size: 3vw;
}

$color: red: Anywhere $color is passed as a value for a CSS property, e.g. color: $color, red will be used.

Sass nesting

div {
  font-size: 18px;
   p {
    color: blue;
      }
   ul {
   color: green;
   }
}

In this example, all ps inside divs will be have color: blue, but also font-size: 18px, while uls inside divs will have color: green instead, but still also font-size: 18px.

Sass inheritance

%message {
font-family: sans-serif;
font-size: 18px;
font-weight: bold;
}

.specificMessage {
@extend %message;
background-color: green;
}

%message defines a general pattern that can be inherited in other style definitions using the @extend %message syntax.

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *