djames617.com MadSay.com SayMad.com

Beginner CSS

Welcome to my CSS page.

So I have been learning about CSS or Cascading Style Sheets. CSS is a really cool way to control how your website looks and behaves baby
(sorry, couldn't resist the Austin Powers reference).


AustinP class=

You can control everything from the backgroound color and image; it's position and behavior; borders; margins; fonts, fontsize, alignment, even the color.
You can even give your page a completely different look, just by editing the CSS.

These are just some of the things I've covered in my first week of web development. I'm going to try to show you what I'm learning. Right now I'm learning so I will have to come back later and explain everything. I will even comment up the source code a some point.
But it's after 1am right now and all I want to do is finish editing this page.


Everything That I've learned so far is still completely self taught using MDN.com and W3Schools.com tutorials.

On the next few pages I will try to show some of the CSS concepts I have been working with.
So far it's all still very basic, but it's helping me learn. In a week I've learned so much about HTML and CSS and how they work together that I want to demonstrate what I know.
I think the best way to learn something is to teach to others. I will put what I learn on these pages and hopefully you will get something out of this too.



I have already started showing you in a very basic way.
All of the CSS related pages will have a similar formatting.
Nothing Earth shattering.
Just a gray background with the uzamaki symbol in the right upper coner.
On all pages the uzamaki symbol should remain fixed, meaning that it stays visible as you scroll through the page.


The first topic I want to cover is some syntax then on to Borders. I know that sounds as much fun as watching your grass grow, but when applied correctly; borders add a professional finish to your webpage that you cannot achieve with HTML alone.


CSS uses selectors to apply formatting to elements. The structure of a CSS statement is

selector: {
declaration: value;
declaration: value;
}



CSS selectors can be separated into 5 categories.


Simple selectors select elements based on name, id, or class.
Combination selectors select elements based on a specific relationship between them.
Pseudo-Class selectors select elements based on a certain state.
Pseudo-Element selectors select and style part of an element.
Attribute selectors select elements based on an attribute or attribute value.


CSS element selectors select HTML elements based on the element name.
CSS ID selectors ussed the id attribute of an HTML element to select a specific element. The ID of an element is unique within a page, so the ID selector is used to select one unique element.


NOTE:An ID can not start with a number.
CSS Universal selector (*) selects all HTML elements on the page.
CSS Grouping selector selects all the HTML elements with the same style definitions. To group selectors separate each selector with a comma.
For example, the following statement would include all elements on the page with an h1, h2, or P heading. The the text under these headers would all be centered and red.
h1, h2, p {
text-align: center;
color red;
}

(Simple Selectors:) Example - Usage
(#id:) #firstnatme - Selects the element with the id "firstname"
(.class:) .intro - Selects all elements with class="into"
(element.class:) p.intro - Selects only P elements with class="into"
(*:) * - Selects all elements
(element:) p - Selects all P elements
(element, element) div, p - Selects all Div and P elements

CSS can be applied in multiple ways. Inline, externally, and internally.
Inline CSS may be used to apply a unique style for a single element. To use inline styles add the style attribute to the to the element in the body. Inline CSS can contain any CSS property.
Internal style sheets can be used if one single HTML page has a unique style. The internal style is defined in the "style" element of the head section of an HTML page.
External style sheets can be created using any text editor and must be saved with the .css extention. External CSS files should not contain any HTML tags. Each HTML page ust include a reference to the external style sheet file inside the "link" element. link rel="stylesheet" href="mycssfile.css"

Below I've formatted a calendar using CSS. The Calendar doesn't actually highlight the active day of the week yet. That will take a little javascript. I'm not trying to cover that here. The point of the calendar is to demonstrate just how useful CSS is arranging the way your site looks and behaves.
Using pure CSS you can create structures on your page.

CSS Calendar



The following is the CSS code that explains how the calendar will look when called. This section goes in the style section of the webpage head section. I'm able to put the CSS in pretty easily as you can put CSS statements in the Body section of a page but not HTML code.

.month {
padding: 70px 25px;
width: 100%;
background: #1abc9c;
text-align: center;
}

.month ol {
margin: 0;
padding: 0;
}
.month ol li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}

.month .next {
float: right;
padding-top: 10px;
}

.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}

.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}

.days li .active {
padding: 5px;
background: #1abc9c;
color: white
}

I will put the HTML code that calls the calendar here when I figure out how to post the code without escaping every < or > character in the code. If that's what I have to do I will, but not right now. If anyone knows of a better way to do it let me know. In the meantime it goes on the todo list.
So much to learn.

Borders
Home