General: CSS Basics

index.html

<!DOCTYPE html>
<html>
<head>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<p>I want to be SIZE 44 font!</p>
</body>
</html>

stylesheet.css

p {
font-size: 44px;
}

A selector can be any HTML element, such as<p>, <img>, or <table>. You just take off the<>s! To make a paragraph's text red with CSS, you'd type:

For example:

selector {
    property: value;
    property: value;
    property: value
}

Can be written as:

p{
    color: green;
    font-family: Garamond;
    font-size: 24px
}

Multiple Selectors

As you've seen, it's possible to nest HTML elements inside one another, like so:

HTML:
<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <h3>I'm plain old font!</h3>
  <div>
   <h3>Me, too!</h3>
   <div>
    <h3>Me three!</h3>
    <div>
     <h3>Forget you guys. I'm about to be red!</h3>
    </div>
   </div>
  </div>
 </body>
</html>

CSS:
div div div h3{
    color:red
}

One Selector to rule them all

There's also a very special selector you can use to apply CSS styling to every element on the page: the * selector. For example, if you type:

HTML:
<!DOCTYPE html>

<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <h3>Boxes within boxes!</h3>
  <div>
   <p>Paragraph One</p>
  </div>
  <div>
   <p>Paragraph Two</p>
  </div>
  <div>
   <p>Paragraph Three</p>
  </div>
 </body>
</html>

CSS:
*{
    border: 1px dashed #3A5FCD    
}

Class and ID Selectors:
classes and IDs

HTML:
<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <h3 class="red">I'm an h3 header in the red class!</h3>
  <h3>I'm just a regular old h3 header.</h3>
  <p class="red">I'm a paragraph in the red class!</p>
  <p>I'm just a regular old paragraph.</p>
  <p id="rogue">I'm a rogue paragraph! I do what I want!</p>
 </body>
</html>

CSS:
.red {
 color: red;
}

#rogue {
 color: #FF00FF;
 font-weight: bold;
 font-family: cursive;
}

Psuedo-Class Selectors:
A way of accessing HTML items that aren't part of the document tree

selector:pseudo-class_selector {
    property: value;
}

HTML:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
 <ul>
  <li><a href="http://www.codecademy.com/">Codecademy Home</a></li>
  <li><a href="http://www.codecademy.com/learn">Learn</a></li>
  <li><a href="http://www.codecademy.com/create/creator">Teach</a></li>
  <li><a href="http://www.codecademy.com/edit_account/basic_info">Settings</a></li>
 </ul>
 </body>
</html>

CSS:

a:hover {
 color: #cc0000;
 font-weight: bold;
 text-decoration: none;
}

Another useful pseudo class selector is the First Child

HTML:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title></title>
 </head>
 <body>
  <div>
   <p>I'm the first child!</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>   
  </div>
 </body>
</html>

CSS:

/*Add your CSS below!*/
p:first-child{
    font-family:cursive    
}

Another pseudo class selector, this time using the nth-child

HTML:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title></title>
 </head>
 <body>
  <div>
   <p>I'm the first child!</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>
   <p>We're not.</p>   
  </div>
 </body>
</html>

CSS:

p:nth-child(2){
    font-family:Tahoma
}
p:nth-child(3){
    color:#CC0000
}
p:nth-child(4){
    background-color:#00FF00
}
p:nth-child(5){
    font-size:22px
}

Another pseudo class selector example, this time with link

HTML:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>Result</title>
 </head>
 <body>
  <!--Add your HTML below!-->
  <ol>
      <li><a href="http://www.yahoo.com">Yahoo</a></li>
      <li><a href="http://www.google.com">Google</a></li>
      <li><a href="http://www.bing.com">Bing</a></li>
  </ol>
 </body>
</html>

CSS:

a:hover{
    text-decoration:none    
}
a:link{
    color:#CDBE70    
}
a:nth-child(3){
    color:#FFC125    
}

Sorting/Classifying your classes and ids

HTML:

<!DOCTYPE html>
<html>
 <head>
  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
  <title>My Social Network</title>
 </head>
 <body>
  <!--Add your HTML below!-->
  <div class="friend" id="best_friend">
      
  </div>
  
  <div class="family">
      
  </div>
  
  <div class="enemy" id="archnemesis">
      
  </div>
  
 </body>
</html>

CSS:

div {
 display: inline-block;
 margin-left: 5px;
 height:100px;
 width:100px;
 border-radius:100%;
 border:2px solid black;
}

.friend{
    border:2px dashed #008000
}

.family{
    border:2px dashed #0000FF
}

.enemy{
    border:2px dashed #FF0000
}

#best_friend{
    border:4px solid #00C957
}

#archnemesis{
    border:4px solid #CC0000
}

CSS Positioning property - display:

block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.

inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.

inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).

none: This makes the element and its content disappear from the page entirely!

CSS:

display: inline-block

CSS Box Model:

The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or farther from each other.

The border is the edge of the element. It's what we've been making visible every time we set the border property.

The padding is the spacing between the content and the border. We can adjust this value with CSS to move the border closer to or farther from the content.

The content is the actual "stuff" in the box. If we're talking about a <p> element, the "stuff" is the text of the paragraph.

CSS:

margin:auto
margin-top: 20px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 5px

even negative numbers:
margin-top: -20px

border: 4px solid #FF0000;

padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 40px;

CSS Floats:

CSS:

float:right;

float:right;

clear: both;

CSS Absolute, Relative and Fixed positioning

CSS:

position: absolute;

position: relative;

position: fixed;

General

Thursday, March 24, 2016

CSS Basics

No comments:

Post a Comment