CSS - NEEDS SORTING INTO MORE SNIPPETS

4/16/2018 - 7:20 PM

CSS - NEEDS SORTING INTO MORE SNIPPETS

HTML AND CSS WORKING TOGETHER
TABLE WITH 3 ROWS/COLUMNS WITH CSS
ALBUM WITH IMAGE USING TABLE/CSS
ALBUM WITH CLICKABLE IMAGES
VARIOUS CSS EXAMPLES
CSS VERY BASIC EXAMPLE
FONT SIZING
FONT STYLE

#####################################################
# FONT STYLE
# Each pc has default styles installed to it
# Css also has default styles installed to it
# More styles can be loaded
# Classic styles: (Default)
#		1, serif
#		2. sans-serif
#		3. cursive
#		4. verdana
#		5. courier
#		6. garamond


h1 {
    font-family: serif
}

h2 {
    font-family: sans-serif
}

h3 {
    font-family: cursive
}

# In case we want to try to apply any style, if it exists, we can declared
# them in order;
# if it doesnt find "Times" it will use "serif"

/*Add your CSS below!*/

h1 {
    font-family: Times, serif
}

h2 {
    font-family: Verdana, sans-serif
}

h3 {
    font-family: Vivaldi, cursive
}


# or


h1 {
 font-family: Verdana, sans-serif, serif;
 color: #576D94;
    
}

p {
    font-size: 18px;
    color: #4A4943;
    font-family: Garamond, serif;
}

#a1 {
    
 background-color: blue;   
}


#a2 {
    
 background-color: yellow;   
}

#a3 {
    
 background-color: red;   
}

FONTSIZING.CSS

#################################################
# FONT SIZING

# EITHER USE px or em

# px : Specific number of cpitures

# em : relative, 1 em = default font screen size
# we style with 1 em, 0.5em, 2em etc

<!DOCTYPE html>
<html>
	<head>
		<title>Result</title>
	</head>
	<body>
		<p style="font-size: 1em">One em!</p>
		<p style="font-size: 0.5em">Half an em!</p>
		<p style="font-size: 2em">TWO EM!</p>
	</body>
</html>

CSSEXAMPLE.CSS

########################################

CSS INTRO

Index.html :

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Fancy Fonts</title>
	</head>
	<body>
		<p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>
	</body>
</html>

stylesheet.css

p {
	color: red;
}


###########
##############################################

<!-- Sample CSS uses: -->

<!-- Make all h3 headings red : -->

h3 {
    color: red;
}

<!-- Make all paragraph tags have font courier -->
p {
    font-family: Courier;
}

<!-- Make span assign a bg color -->
span {
    background-color: yellow;
}

<!-- Make all h2 headers of a certain font and color (2 css elements) -->
h2 {
	font-family: Verdana;
	color: blue;
}

<!-- Assign colors or font color or bg color with hex value -->
h1 {
	color: #8B1C62;
}



span {
	/*Write your CSS here!*/
	color:blue;
}

CSSEXAMPLES.CSS

#######################################################3
# CSS EXAMPLE

# We set tags, and assign attribute to tags
# Some tags will have #, those are custom div tags declared in html with <div name="name">
# All the other tags, ie body, h2, and so on, are styling default elements, table rows and so on.




body {
	background-color: #b7d1c4
}

h2 {
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
	padding-top: 25px;
	padding-bottom: 25px;
	color: #acd1b2;
}

img {
	height: 170px;
	width: 170px;
	box-shadow: rgba(0,0,0,0.2) 10px 10px;

}

#navbar {
	position: fixed;
	top:10px;
	left:50%;
	margin-left:-254px;
}

#header {
	position: relative;
	top: -10px;
	background-color: #3c4543;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

ul{
	list-style-type: none;
	position: fixed;
	margin: -10px;
}

li {
	display: inline;
	border: 2px solid #000000;
	font-family: Futura, Tahoma, sans-serif;
	color: #ffffff;
	padding: 5px;
	border-radius: 5px 5px;
	background-color: #cc0323
}

#left{
	width: 45%;
	float: left;
}

p {
	font-family: Tahoma;
	font-size: 1em;
}

#right{
	width: 45%;
	float: right;
}

table {
	border: #000000 1px solid;
	background-color: #acd1b2;
	float: right;
	margin-right: 10px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}

td {
	height: 75px;
	width: 75px;
}

td img {
	height: 75px;
	width: 75px;
	box-shadow: none;
}

th {
	font-family: Verdana;
	font-size: 1em;
	font-weight: normal;
	color: #3c4543
}

#bottom_left{
	border-bottom-left-radius: 15px;
}

#bottom_right{
	border-bottom-right-radius: 15px;
}

#footer{
	clear: both;
	position: relative;
	bottom: -20px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	height: 75px;
	background-color: #3c4543;
}

#button{
	border: 2px solid #000000;
	float:left;
	position: relative;
	left: 229px;
	bottom: -20px;
	border-radius: 5px;
	background-color: #cc0323;
	height: 30px;
	width: 150px;
	
}

#button p{
	position: relative;
	bottom: 10px;
	font-size: 0.8em;
	color: #acd1b2;
	text-align: center;
}

.bold{
	font-family: tahoma;
	font-weight: bold;
	font-size: 1.2em;
	font-variant: small-caps;
	color: #ffffff;
}

ALBUMTABLECLICKABLELINK.CSS

################################################################################
# ALBUM WITH CLICKABLE IMAGES

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css" />
		<title>My Photo Page</title>
	</head>
	<body>
	    <table>
	        <thead>
	            <tr>
	                <th colspan="3">ALALALALA</th>
	            </tr>
	        </thead>
	        <tbody>
	            <tr>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	            </tr>
	            <tr>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	            </tr>
	            <tr>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	                <td><a href="http://codecademy.com"><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></a></td>
	            </tr>
	        
	        </tbody>
	    </table>
	
	
	</body>
</html>

img {
	width:100px;
	height:100px;
}

table, td {
	border: 10px #70b8ff dashed;
}

ALBUMIMAGESTABLE.CSS

###############################################################################3
# ALBUM WITH IMAGES READY CODE

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css" />
		<title>My Photo Page</title>
	</head>
	<body>
	    <table>
	        <thead>
	            <tr>
	                <th colspan="3">ALALALALA</th>
	            </tr>
	        </thead>
	        <tbody>
	            <tr>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	            </tr>
	            <tr>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	            </tr>
	            <tr>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	                <td><img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" /></td>
	            </tr>
	        
	        </tbody>
	    </table>
	
	
	</body>
</html>


img {
	width:100px;
	height:100px;
}

table, td {
	border: 10px #70b8ff dashed;
}

TABLE3ROWSCOLUMBS.CSS

##############################################################################
# TABLE WITH 3 ROWS/COLUMSN AND CSS


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css" />
		<title>My Photo Page</title>
	</head>
	<body>
	    <table>
	        <thead></thead>
	        <tbody>
	            <tr>
	                <td></td>
	                <td></td>
	                <td></td>
	            </tr>
	            <tr>
	                <td></td>
	                <td></td>
	                <td></td>
	            </tr>
	            <tr>
	                <td></td>
	                <td></td>
	                <td></td>
	            </tr>
	        
	        </tbody>
	    </table>
	
	
	</body>
</html>

#CSS:

img {
	width:100px;
	height:100px;
}

table, td {
	border: 1px #70b8ff dashed;
}
	</body>
</html>

HTMLCSSWORKINGTOGETHER.css

#############################################################################
# HTML AND CSS WORKING TOGETHER


# HTML CONTAINS REFERENCE TO CSS FILE in <link type...>


<!DOCTYPE html>
<html>
	<head>
		<title>Ye Olde Fancye Booke</title>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	</head>
	<body>
		<h3>Ye Olde Storye</h3>
		<p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>


# CSS CONTAINS STYLE SHEETS FOR 

p {
	font-family:Garamond;
	font-size:16px;
}

h3 {
	font-family:cursive;
	color:#36648b;
	text-align:center;
}

span {
	color:#cc0000;
	font-size:24px;
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

CSS - NEEDS SORTING INTO MORE SNIPPETS