Embedded Files
CSS - Cascading Style Sheets. CSS is a language that describes the style of an HTML document. CSS can manipulate the HTML styling to show colors etc.
CSS is a modern and more effective way of styling your website design across multiple pages. Using references to each tag in your webpage we can customise the way your page looks.
LINKS to Best Resources:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
CSS Example
CSS Example
Here is an example of some CSS code. Each tag is referenced first and then followed by an open and closed parenthesis (curly bracket) Inside the brackets are a set attributes of each tag that can be customised.
The body tag example will display the web page with a light-blue background.
The advantage of using a separate CSS file that is attached to the HTML file is that you can change the style of all pages with just one edit, rather then editing each HTML page separately.
You can change multiple attributes of each tag including colours, font, font size, padding, alignment etc.
Setting Up a CSS File
Setting Up a CSS File
Open a new text document
Save the file by clicking save
Click all files
Name the document with the following extension .css
Importing CSS file into Website
Importing CSS file into Website
Insert the following code in between the header tag of your html file. You will need to do this on each page of your website. Href should reference the exact file name of your CSS file. Each time your edit the CSS file, those changes will be passed over to each page where the above code is entered.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Attributes / Properties
Attributes / Properties
Text Color - US Spelling
Color: red; - You can distinct names
Color: rgb(255, 0, 0); You can reference the binary RGB code
Color: #FF0000;
Font-Family
You can change the font type by call font-family
p {
font-family: "Times New Roman", Times, serif;
}
Background
Color as a background
body {
background-color: lightblue;
}
Image as Background - refer to file name in your images folder
body {
background-image: url("paper.gif");
}
DIV & Class Tags
DIV & Class Tags
Div tags divide your page into sections and is great way to customise the way your page looks for areas such as the title, footers, body and navigation. You can apply specific attributes to each division so that each division is unique.
You can use an ID or a class to define each section.
When referring to an ID use #
When referring to a Class use .
Copy and paste the following code into a notepad and save as a CSS file in a new folder.
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
header {background: black;color:red;}
footer {background: #aaa;color:red;}
.nav {background:#eee;}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
Copy and paste the following code into a new notepad file and save as HTML file in the new folder and watch the magic happen.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/complex.css">
</head>
<!-- Start editing your site from here -->
<body>
<div class="flex-container">
<header>
<h1>TITLE OF SITE</h1>
</header>
<nav class="nav">
<ul>
<li><h3> navigation</h3></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<article class="article">
<h1>Title of page content</h1>
<p>Information......</p>
<p>SInformation continued.....</p>
<p><strong>sub title for another section</strong></p>
</article>
<footer>Copyright Your name in the footer</footer>
</div>
</body>
</html>
Report abuse