CSS/Basic Code

From r00tedvw.com wiki
(Difference between revisions)
Jump to: navigation, search
Line 87: Line 87:
 
=Box Model=
 
=Box Model=
 
The box model comprises the set of properties which define parts of an element that take up space on a web page. The model includes the content area's size (width and height) and the element's padding, border, and margin.
 
The box model comprises the set of properties which define parts of an element that take up space on a web page. The model includes the content area's size (width and height) and the element's padding, border, and margin.
[[File:CSS Box Model.png|frame|100px]]
+
[[File:CSS Box Model.png|none|100px]]
 
The Properties are:
 
The Properties are:
 
;Width and height
 
;Width and height

Revision as of 16:46, 26 November 2018

Contents

 [hide

General Info

Link - defines the css page to include for formatting the page. Should be placed in the head of the html file.

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
 type=text/css  -- defines the type of file
 rel=stylesheet -- same as above
 href= -- points to the location

General Format for most CSS (file.css)

 selector {
 property: primary value, backup value;
 property: primary value, backup value;
 }

Example:

 sets all paragraphs to the color of red
 p{
 color: red;
 }

attribute application. (example applies CSS to all elements with a class of "title")

.title {
  color: red;
}

multiple selectors with the same property application

h5,
p {
  font-family: Georgia;
}

nested selector application. in the example below only apply the red color to rows within tables that have the table class.

ul.table li {
  color: red;
}

Unique ID. goes another step after attribute application, can be used for a specific element based on an ID application.

#id_name {
  color: red;
}

Comment

/*I'm a comment!*/

Built in default fonts for CSS

serif
sans-serif
cursive

Classes & IDs
Allows you to create specific groups that you can then apply styling to, very granular

ie.
 HTML
 <p id="intro">Introduction</p>
 you can then use CSS to only apply styling to this specific ID:
 CSS
 #intro{
      color: red;
 }
 -------------------------------------------------
 HTML
 <li class="list_item">Bullet</li>
 CSS
 .list_item{
      color: red;
 }

Order of CSS application

  1. ID - the most specific, is applied over all others.
  2. Classes - applies to a group of elements with the matching class definition.
  3. tags - the least specific, applies to all matching elements, but only if ID or Class is not applied.

Selector Properties

color
use either a name like red or the HEX color code like #FFFFFF
font-size
define either using em for a general size definition or <px> for a specific pixel size
font-family
the name of the font family to be used
font-weight
how thin or thick the text is (bolding)
text-align
places text left, right, or center
background-color
defines the background color of the selector
opacity
sets the properties within a selector to an opacity between 0%-100% using fractions between 0-1.
background-image
implements a background image within the selector.

Box Model

The box model comprises the set of properties which define parts of an element that take up space on a web page. The model includes the content area's size (width and height) and the element's padding, border, and margin.

CSS Box Model.png

The Properties are:

Width and height
specifies the width and height of the content area.
Padding
specifies the amount of space between the content area and the border.
Border
specifies the thickness and style of the border surrounding the content area and padding.
Margin
specifies the amount of space between the border and the outside edge of the element.

Reset CSS

There are a lot of default values for CSS which are different between browsers, thus why pages can appear different based on the browser used.
One way to help normalize the page layout for all browsers is to "Reset" the CSS or "normalize" it. Essentially this means you explicitly define certain values rather than let the browser use its defaults. Since CSS is "cascading" style sheets, so long as you define this normalized CSS first, any element or class definitions defined after will take precedence.
Add the following to your html as the very first link:

<link type="text/css" rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css"/>

Alternatively you can download this and host it rather than call on it from another site:

 [Expand
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
Personal tools
Namespaces

Variants
Actions
Navigation
Mediawiki