HTML STYLE
The <style> tag is used to define style information (CSS) for a document.
Inside the <style> element you specify how HTML elements should render in a browser.
The <style> element must be included inside the <head> section of the document.
SYNTAX INSIDE STYLE TAG
Element { property: value; property: value; }
ID ATTRIBUTE:
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
#NAME { property: value; property: value; }
CLASS ATTRIBUTE
The HTML class attribute is used to specify a class for an HTML element.
Multiple HTML elements can share the same class.
.NAME { property: value; property: value; }
DIV ELEMENT <DIV>:
The <div> element is used as a container for other HTML elements.
HTML COLORS
COLOR NAME: actual names of colors. Example: blue, alice blue, aqua.
HEX CODE: a six-digit alphanumeric code used in web design and coding to define specific colors.
Example: #F54927)
RGB: An RGB color value represents RED, GREEN, and BLUE light sources. An RGBA color value is an
extension of RGB with an Alpha channel (opacity).
Example:
rgb(255, 99, 71)
rgba(255, 99, 71, .5)
BACKGROUND-IMAGE:
Use an image as a background of an element
Example
background-image: url(‘address of image’);
BACKGROUND-SIZE:
Set the size of the background image.
Example
background-size: 100%;
BACKGROUND-ATTACHMENT:
The background-attachment property sets whether a background image scrolls with the rest of the
page, or is fixed.
Example
background-attachment: fixed;
BORDER:
Set the style of the borders for different elements
Example:
border: 5px solid red;
thickness style color
BORDER STYLES
BORDER-RADIUS:
Gives elements rounded corners
Example:
border-radius: 5px;
BOX-SHADOW/TEXT-SHADOW:
The box-shadow property attaches one or more shadows to an element.
Example:
box-shadow: 5px 10px 3px black;
h-offset v-offset blur color
MARGIN AND PADDING
padding is the space inside an element's border, between the content and the edge of the element,
while margin is the space outside an element's border, separating it from other elements.