CSS Fundamentals

In my last blog here, I talked about ways to put CSS in an HTML, the preferred method using external style sheets, and how styles are overwritten when using more than one method.  I also talked about the syntax for declaring a CSS property.

Here I am going to go through some of the basic CSS properties that one would need to know in order to have a good understanding of the capabilities of the CSS, and also a means to brush up one’s CSS knowledge if it ever becomes rusty.  So here they are:

/* comments */
/*
* declaring a CSS property */
p {
border-style: solid;
}
/*
* declaring multiple CSS properties */
p {
background-color: #00FF00;
font-size: 8px;
}
/*
* setting font-size using em which is a relative measure
* 1em = default font size, 2em = twice as big, and 0.5em = half the size */
p {
font-size: 2em;
}
/*
* declaring fall back fonts in case user's computer does not have the font
* note CSS has default fonts and they are serif, sans-serif, and cursive */
p {
font-family: Verdana, serif;
}
/*
* styling a table's border property to 1px, solid line, and color black */
table {
border: 1px solid black;
}
/*
* styling a link's text-decoration property to hide the underline */
a {
text-decoration: none;
color: #cc0000;
}
/*
* creating a button
* use border-radius property to give the button a rounder look
* use margin: auto to put equal left and right margin on the button,
* centering it on the page
* use text-align to set alignment of text inside the button */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
border-radius: 5px;
margin: auto;
text-align: center;
}
/*
* styling every element on the page using the universal (*) selector */
* {
color: black;
}
/*
* styling an element nested somewhere inside another element or
* is a child of another element using nested selectors */
div h3 {
color: red;
}
/*
* styling an element nested directly inside another element or
* is a direct child of another element */
body > div > p {
color: #7ac5cd;
}
/*
* note that more specific selectors will override other selectors
* e.g. <p> selector will be overridden by nested selector body > div > p
* nested selectors can be overridden too by the class and id selectors */
/*
* so far we have used HTML element selectors and the universal selector */
/*
* styling using the class selector - the . selector */
.myClass {
font-family: cursive;
color: #0000cd;
}
/*
* styling using the id selector - the # selector */
#myID {
font-family: Courier;
color: #cc0000;
}
/*
* note that the id selector is more specific than the class selector,
* thus the id selector will override the class selector */
/*
* using pseudo-class selectors - the : selector,
* to select HTML items not part of the document tree */
/*
* styling a link's unvisited link */
a:link {
text-decoration: none;
color: #008b45;
}
/*
* styling a link's visited link */
a:visited {
color: #ee9a00;
}
/*
* styling a link when it's hovered over by the mouse */
a:hover {
color: #00ff00;
}
/*
* styling elements that are the first children of their parents */
p:first-child {
font-family: cursive;
}
/*
* styling elements that are not the first children of their parents -
* the second, or the third, and so on... */
p:nth-child(2) {
font-family: Tahoma;
}
/*
* CSS positioning */
/*
* positioning using the display property
* 4 possible values:
* block - stacks the elements on top of each other like blocks in a column
* inline-block - puts the elements next to each other like blocks in a row
* inline - puts the elements next to each other but not as blocks:
* they don't keep their dimensions
* none - hides the element and it's contents from the page */
div {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
display: block;
}
/*
* CSS box model
* every element follows the box model in CSS,
* where each element contains the content surrounded by padding, which
* in turn is surrounded by border, which in turn is surrounded by margin
* margin is the space around the element,
* the space between the element and the elements around it
* border is the edge of the element; set using the border property
* padding is the space between the border and the content of the element
* content is the actual stuff
/*
* setting the margin using margin: auto */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
margin: auto;
}
/* setting the margin using margin: top right bottom left */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
margin: 20px 50px 10px 5px;
}
/* setting the margin using margin-top, margin-right, margin-bottom,
* and margin-left properties */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
margin-top: 20px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 5px;
}
/*
* note that you can use negative values on the margins,
* which will move the element in the other direction */
/*
* setting the padding is similar to setting the margin
* you can use padding property to set top, right, bottom, left padding
* you can use padding property to give it one value,
* to apply same value of padding on all sides
* or you can use the padding-top, padding-right, padding-bottom,
* and padding-left properties */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
padding: 10px;
}
/*
* positioning using the float property
* setting float to right will put the element on right side of the page
* setting float to left will put the element on left side of the page */
div {
height: 50px;
width: 120px;
border: 2px solid #6495ed;
background-color: #bcd2ee;
float: right;
}
/*
* note that floating elements will go on top of non-floating elements,
* unless you set the clear property to the following values:
* left will move the non-floating element below any floating elements
* on the left side
* right will move the non-floating element below any floating elements
* on the right side
* both will move it below any floating elements on left and right sides */
div {
height: 50px;
background-color: #69D2E7;
clear: both;
}
/*
* positioning using the position property
* CSS positioning, by default, is static,
* meaning elements are positioned where they would normally go
* setting position to absolute will position the element relative
* to the first parent element that does not have a static position
* if there is no such element then it is positioned relative to <html>
* setting position to relative will position the element relative
* to where it would have been placed if it had a default static position
* setting position to fixed will anchor the element to the browser window
* and stays put even when you scroll up or down */
div {
height: 50px;
background-color: #69D2E7;
position: fixed;
}

 

You could also look at this link for a quick review of CSS basics.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s