CSS (Cascading Style Sheets)

Size: px

Start display at page:

Download "CSS (Cascading Style Sheets)"

Jesse Hines
5 years ago
Views:

1 CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that define how different elements, such as headers and links, appear on a Web page. These style sheets can then be applied to any Web page. Style Sheet is a file that describes how an HTML file should look. These style sheets are cascading because multiple style sheets can be applied to the same Web page. Syntax The spelling and grammar rules of a programming language. Each program defines its own syntactical rules that control which words the computer understands, which combinations of words are meaningful, and what punctuation is necessary to be a correctly structured document. CSS Syntax (rules) CSS syntax is different from the HTML syntax you're used to. The general format looks like this: selector { property: value; } <style selector (element to be changed) {property (what s being changed): value (what property is being changed to);} A selector specifies which HTML elements to style. A selector can be any HTML element, such as <p>, <img>, or <table>. You just take off the <>s tags! Inside the braces { }, a property and its value define what aspect of the elements to style. A property is an aspect of a selector. For instance, you can change the font-family, color, and font-size of the text on your web pages (in addition to many more). A value is a possible setting for a property. Color can be red, blue, black, or almost any color; font-family can be several different fonts; and so on. You need to end each property-value with a semi-colon (;). That's how CSS knows you're done with one pair and ready for the next. h1 { color: red;} 1

2 There are two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML): 1. You can apply the same formatting to several HTML elements without rewriting code (e.g. style="color: red") over and over 2. You can apply similar appearance and formatting to several HTML pages from a single CSS file. Put your CSS code between <style></style> tags, right in the same file as your HTML or as a separate CSS file. These <style> tags go inside the <head></head> of your webpage: <!doctype html> <html> <head> <title> </title> <style type="text/css"> </style> </head> tells web browser you are using CSS code Comments It s also a good idea to write comments as you go along. Good comments will help remind you why you did something a certain way (or will help someone else out if they're reading your code without you there to explain it). CSS comments look like this (works only for a separate CSS file): Division One of the most versatile structure tags available to you is the <div> tag. Short for "division," <div> allows you to divide your page into containers (that is, different pieces). <div>s will allow you to create visual HTML objects like sidebars, menus, buttons and more. There are three properties you'll need to set values for: 1. background-color, which you set to a color or hex value 2. height, which you set to a value in pixels 3. width, which is also measured in pixels Surround the element in your HTML code with the tags: <div> 2

3 Forms Used to input data on a web page. Username, upload image, drop-down list, radio-button, selecting options, etc. Attributes: Type the kind of element in the form (textbox). Name what is it used for. Identifies it from other elements. Size the width of the element as it appears on the web page. For a textbox they can still enter in any number of character not matter the size of the textbox. Maxlength the maximum number of character that can be entered into a textbox. Value the text that will populate the textbox by default. Start code with the text that will be seen on the web page (Username, Male, Cheese,) Bootstrap Bootstrap is a collection of prewritten CSS rules used to build web pages faster. Bootstrap provides styles out of the box for several common components on a web page, such as grid layouts, navigation, showcases, and much more. To use Bootstrap in a web page, you need to link to it from index.html. In index.html inside the head element, link to " before you link to main.css. <head> <link rel="stylesheet" href=" <script src=" <script src=" > <link rel="stylesheet" href="main.css"> </head> Create a separate CSS file: File New File Save As main.css Code:.nav a {display: inline;} 3

4 Navigation menus The navigation menus are made up of two ul elements. In each ul, the li elements display on new lines because they are block elements. To style the li elements so that they display on the same line use the display property. Tabs Tabs are a common navigation technique that give links to different parts of a site. Bootstrap makes it easy to create tabbed navigation. <body> <div class="nav"> <ul class="nav nav-tabs"> or <ul class= nav nav-pills > <li class="active"><a href="second.html" title="go to Page 2">Page 2</a></li> <li><a href="login.html" title="go to Log In Page">Log In</a></li> <li><a href="feedback.html" title="go to Feedback Page">Feedback</a></li> <li><a href="help.html" title="go to Help Page">Help</a></li> <li><a href="mailto:terry.wilhelmi@k12.sd.us" title=" Mr. Wilhelmi">Contact</a></li> </ul> </body> Pills Pills are a set of buttons that give links to different parts of a site. Change the tab navigation to pill navigation, replace the class nav-tabs with nav-pills. Make the class equal nav navpills. 4

5 <body> <div class="nav"> <ul class="nav nav-pills"> <li class="active"><a href="second.html" title="go to Page 2">Page 2</a></li> <li><a href="login.html" title="go to Log In Page">Log In</a></li> <li><a href="feedback.html" title="go to Feedback Page">Feedback</a></li> <li><a href="help.html" title="go to Help Page">Help</a></li> <li><a title=" Mr. Wilhelmi">Contact</a></li> </ul> </body> Dropdown Menu in Navbar  right after above code <li class= dropdown > before </ul> tag <a href= # class= dropdown-toggle datatoggle= dropdown >My Profile <span class= caret ></span></a> caret down arrow </ul> </body> </li> <ul class= dropdown-menu > <li><a href= popupwindow data-toggle= modal data-target= #popupwindow >Login</a></li> <li><a href= popupwindow data-toggle= modal data-target= #popupwindow2 >Logout</a></li> <li><a href= popupwindow data-toggle= modal data-target= #popupwindow3 >Settings</a></li> </ul> Login Modal Modal or dialog a pop-up window. right after drop-down menu code <div class="modal fade" id="popupwindow"> <div class="modal-dialog"> 5

6 <div class="modal-content">  <div class="modal-header"> <button type="button" class="close" datadismiss="modal"> </button> <h3 class="modal-title">log In</h3>  <div class="modal-body"> <form role="form"> <input type=" " class="form-control" placeholder=" "> placeholder="password"> </form> <input type="password" class="form-control"  <div class="modal-footer"> <button class="btn btn-primary btn-block">log In</button>  <div class="modal fade" id="popupwindow2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" datadismiss="modal"> </button> <h3 class="modal-title">log Out</h3> 6

7 Out</button> <div class="modal-footer"> <button class="btn btn-primary btn-block">log  <div class="modal fade" id="popupwindow3"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" datadismiss="modal"> </button> <h3 class="modal-title">settings</h3> <div class="modal-body"> <form role="form"> <input type="username" class="form-control" placeholder="new Username"> <input type="password" class="form-control" placeholder="new Password"> <input type=" " class="form-control" placeholder="new "> </form> <div class="modal-footer"> <button class="btn btn-primary btnblock">save</button> 7

8 Overriding Styles When you want to override External Style Sheet because you want one web page to be different from all of the others. Use the <style>...</style> tags of your HTML code on the web page that you want to have the different styles for. Put the style change(s) you want to make. 8

CSS (Cascading Style Sheets): An Overview

CSS (Cascading Style Sheets): An Overview CSS (Cascading Style Sheets) is a language used to describe the appearance and formatting of your HTML. It allows designers and users to create style sheets that