CSS (Cascading Style Sheets): An Overview

Size: px

Start display at page:

Download "CSS (Cascading Style Sheets): An Overview"

Antony Mosley
6 years ago
Views:

1 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 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. p { font-size: 100px;} span { font-family: cursive;} 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> Home Page </title> <style type="text/css"> </style> </head> tells web browser you are using CSS code Another cool advantage of CSS is that you can set many properties for one selector. <head> <title> My Second Page </title> <style type="text/css"> img {max-height: 200px; max-width: 200px;} </style> </head> 2

3 It s important to remember to put a semicolon (;) at the end of each line. The semicolon tells CSS that one property-value pair is over and it's time to move on to the next one. Don t forget: all property-value pairs for a selector are surrounded by curly braces ({}). end each property-value pair with a semicolon! 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): /*I'm a comment!*/ img {max-height: 200px; max-width: 200px;} /*sizes pictures in table*/ Remember: the computer doesn't look at comments when figuring out what your HTML and CSS should do, but writing good comments is a good habit you want to pick up! Max Width and Height Specifies the size of an element, especially used for images. (Photos of products on web page) The images must be in the same folder as your html files are located (index.html, etc.). HTML code: <body> <img src="lighthouse.jpg" /> <img src="penguins.jpg" /> <img src="koala.jpg" /> <img src="desert.jpg" /> </body> CSS code: <style type="text/css"> img {max-height: 200px; max-width: 200px;} </style> resizes all pictures in the table 3

4 There is also min width and min height, but they are not used very much. Line Spacing Line spacing puts space between the lines. Element is line-height and a percentage. <style type="text/css"> p {color: #0F0FF5; line-height: 150%;} </style> Paragraph Indent Indents the paragraph. Syntax is text-indent: amount of pixels; p {color:#0f0ff5; line-height: 150%; text-indent: 50px;} Font Weight Determines the boldness of text. Syntax: font-weight: bold; <head> <title> My First Webpage </title> <style type="text/css"> ol {font-weight: bold;} </style> </head> Font Style Sets the font style of the text. Syntax: font-style: italic; <style type="text/css"> ol {font-weight: bold; font-style: italic;} 4

5 </style> Text Align Aligns text either right, center, left, or justified. Syntax is text-align: alignment; h1{text-align: center;} Text Color Sets the color of the text. Syntax is color: color; body { color: green} all text in body of Webpage will be the color green Hexadecimal Values CSS understands millions of colors in the form of hexadecimal values. Hexadecimal counting is base-16. Each digit can be the numbers 0 through 9 or the letters a through f! Hex values always start with a pound sign (#), are up to six "digits" long, and are caseinsensitive: that is, they don't care about capitalization. #FFC125 and #ffc125 are the same color. h1 { color: #8a2be2;} RGB Values Search Google for rgb values to get the values of the colors. RGB color system, constructs all the colors from the combination of the Red, Green and Blue colors. p { color: #0F0FF5;} Background Color Sets the color of the web page s background. Syntax is background-color: color; p {color:#0f0ff5; background-color: grey; line-height: 150%; text-indent: 50px;} 5

6 Background Images Code needs to be in the body tags. Images need to be in the same folder as the Index.html file. body {background-image: url(lighthouse.jpg);} sets the image as the background of the webpage Fonts CSS has some built-in default fonts meant to ensure your users see what you intend. They are: serif sans-serif, or cursive. h3 { font-family: cursive;} h1 { font-family: Times, serif;} h2 { font-family: Verdana, sans-serif;} h3 { font-family: Vivaldi, cursive;} Element Width and Height Width p { width: 350px;} Height p { height: 500px;} Link Styles Links are composed of what are called states. A State is when and how you press the link. Links have the following four states: 1. When the page is first visited (a:link) 2. When the link has been clicked (a:visited) 3. As you mouse over the link (a:hover) 4. As you are clicking the link (a:active) 6

7 a:link default state a = anchor a:link { color: black; text-decoration: none; } a:visited { color: purple;} a:hover { background-color: blue; color: red; text-decoration: underline; font-weight: bold;} a:active { background-color: orange;} what it normally looks like on the webpage underline or none when it has been clicked when you mouse over it underline or none when you are clicking the link Text Decoration Links have a lot of the same properties as regular text: you can change their font, color, size, and so on. But links also have a property, text-decoration, that you can change to give your links a little more custom flair. You're probably used to seeing links that are blue and underlined, right? Well, that's not the way it has to be! Either underline or none. a { color: #cc0000; text-decoration: none;} Table Styles To set various table properties. table{border: 3px solid blue;} sets the table border tr{background-color: yellow;} sets the background color of the table cells td{border: 2px dashed red; sets the table cell borders (table data/cell) height:50px;} 7

8 Multiple Element Styles To apply the same style to more than one element (header, paragraph, etc.) h1, p {color: red;} Span To apply a style to part of a tag element and not the entire tag. For example, we want to apply bold to just one word in a paragraph tag. Surround the part with the span tags: <span> </span> In HTML code: Add <span> before each heading in the paragraph about bald eagles. <span>diet</span> <span>population</span> <span>range</span> <span>behavior</span> <span>reproduction</span> <span>did You Know?</span> In the CSS code enter: span {font-weight: bold; color: green;} We can take much of the styling such as controlling font family, font color, and text alignment and put it in its own separate file. By doing that, we can use tags like <div> and <span> to impart style to our pages without writing style="color:green" every single time! Unordered List Styles To set various unordered list properties. ul{list-style-type: square;} ul{list-style-image:url(check.png);} ul(border: 1px solid red;} ul{list-style-type: none;} ul{padding:6px;} changes bullet to a square (circle, etc.) changes bullet to an image adds a border to the list removes bullets from list moves list without bullets to the left 8

9 HTML Elements 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> HTML code: <div>this is the next section of my web page. CSS code: div { background-color: #cc0000; height: 100px; width: 100px;} border: 2px solid red; position: absolute;} Link You can make <div>s clickable by wrapping them in <a></a> tags. <a href="website address"><div></a> <a href=" style="width: 50px; height: 50px; background-color: yellow"></a> Buttons Create buttons with <div> tags. In the CSS code, add a div selector and add property: value pairs of: 1. height: 50px 2. width: 120px 3. border-color: #6495ED 4. background-color: #BCD2EE. 9

10 Your border-style can be any type (dashed, solid, and so on) and you can use any borderwidth you want. (We like 2px.) Shape This involves a new property called border-radius. This property modifies the corners of HTML objects; it's how you get those cool rounded buttons! Set your div's border-radius to 5px. div { height: 50px; width: 120px; border: 2px solid #6495ED; border-radius: 5px; background-color: #BCD2EE;} Position 1. margin: auto; is the CSS you use to tell the browser: "Hey! Make sure to set equal margins on each side of this HTML element." When the margins are equal, the object is centered. 2. text-align: center; is how you center text elements. Link Use <span></span> tags to create a different font color for "button text": <a href=" us on <span>facebook!</span></a> HTML Code <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>about Me</title> </head> <body> <img src=" <p>we're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href=" us on <span>facebook!</span></a> </body> </html> 10

CSS Code div { span { a { height: 50px; width: 120px; border: 2px solid #6495ED; border-radius: 5px; background-color: #BCD2EE; margin: auto; text-align: center;} color: green;} color: #cc0000;

11 CSS Code div { span { a { height: 50px; width: 120px; border: 2px solid #6495ED; border-radius: 5px; background-color: #BCD2EE; margin: auto; text-align: center;} color: green;} color: #cc0000; font-family: Comic Sans MS; text-decoration: none;} 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,) Textbox Allows user to enter text in a box. HTML code: <body> 11

12 <form> First and Last Name: <input type= "text" name="username" size:"12" maxlength= "16" value="enter Name Here"/> </form> </body> Radio Button Allows user to select only one option. <body> <form> Male: <input type="radio" name="sex" value="male" /> Female: <input type="radio" name="sex" value="female" /> </form> </body> Check Box Allows user to select one or more options. <body> <form> <p>select the pizza you would like to order!</p> Cheese <input type="checkbox" name="pizza" value="cheese" /> Pepperoni <input type="checkbox" name="pizza" value="pepperoni" /> Sausage <input type="checkbox" name="pizza" value="sausage" /> Chicken <input type="checkbox" name="pizza" value="chicken" /> </form> </body> Drop-down Lists Allows user to select from a list of several options. The options are enclosed in the <select> tags and between the <option> tags. The drop-down list box will by default be the width of the widest option. <form> <p>what do you want to do today?</p> <select name="activities"> <option value="play">play the guitar</option> <option value="read">read a book</option> <option value="drive">go for a drive in the country</option> <option value="movie">go to a movie</option> 12

13 <option value="eat">go out to eat</option> </select> </form> Text Areas A larger text field than just a single line of text (for feedback, etc.). Attributes: Rows determines the height of the text field. Cols (columns) determines the width of the text field. <form> <p> Explain what you need help with: </p> <textarea name="help" rows="8" cols="40" /> </textarea> </form> Upload Button Used to upload a file. If you need to have multiple files uploaded, you have to put in multiple buttons. <form> <p>submit a file!</p> <input type="file" name="homework" /> </form> Password Action the filename where the data will be stored (usually a database). Method how the browser sends the data to the action (file). 1. Get 2. Post <form action="login" method="post"/> Username: <input type="text" name="username" /> Password: <input type="password" name="pword /> </form> Submit Form Button Creates a button to click to submit forms to the file that stores the information. Attributes: <form action="login" method="post"/> Username: <input type="text" name="username" /> Password: <input type="password" name="pword" /> 13

14 <br /> <input type="submit" value="submit!"> </form> 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> Rounded corner image <body> <div class= container > <img src= Lighthouse.jpg class= img-rounded width= 200 height= 200 > <br/> <br/> Circle image <img src= Desert.jpg class= img-circle width= 200 height= 200 > <br/> <br/> </body> 14

15 Create a separate CSS file: File New File Save As main.css Code:.nav a {display: inline;} 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. Regular ul element. To do so, make the class equal nav nav-tabs. <ul class="nav nav-tabs"> <li><a href="#">primary</a></li> <li class="active"><a href="#">social</a></li> <li><a href="#">promotions</a></li> <li><a href="#">updates</a></li> </ul> The open tab is specified by the class active. Change which tab is open by moving class="active" <ul class="nav nav-tabs"> <li><a href="#">primary</a></li> <li class="active ><a href="#">social</a></li> <li><a href="#">promotions</a></li> <li><a href="#">updates</a></li> </ul> <body> <div class="nav"> 15

16 <div class="container"> <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 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. <body> <div class="nav"> <div class="container"> <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> Dropdown Menu in Navbar  <li class= dropdown > right after above code 16

17 </ul> </body> </li> <a href= # class= dropdown-toggle datatoggle= dropdown >My Profile <span class= caret ></span></a> caret down arrow <ul class= dropdown-menu > <li><a href= popupwindow data-toggle= modal data-target= #popupwindow >Login</a></li> <li><a href= # >Logout</a></li> <li><a href= # >Settings</a></li> </ul> Login Modal Modal or dialog a pop-up window. right after drop-down menu code <div class="container"> <div class="modal fade" id="popupwindow"> <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 In</h3>  <div class="modal-body"> <form role="form"> <div class="form-group"> <input type=" " class="form-control" placeholder=" "> placeholder="password"> </form> <div class="form-group"> <input type="password" class="form-control" 17

18  <div class="modal-footer"> <button class="btn btn-primary btn-block">log In</button> External Style Sheet Allows you to style elements with the same styles throughout all of your web pages. Your HTML file can see the CSS information by putting a <link> tag between the <head>...</head> tags of your HTML page. Your <link> tag needs three attributes: 1. A type attribute that should always be equal to "text/css" 2. A rel attribute that should always be equal to "stylesheet" 3. A href attribute that should point to the web address of your CSS file <link type="text/css" rel="stylesheet" href="css file address"/> Self-closing tags Because nothing ever goes between <link></link> tags, it's okay to use a single set of <>s to be the opening and closing tags. < /> <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="style Sheet.css"/> </head> </html> Paste <link type="text/css" rel="stylesheet" href="style Sheet.css"/> into the HTML code of each webpage between the <head> tags. Create a New Page File New Save As: Style Sheet.css (to the same folder as the html files). 18

19 Enter the CSS Code h1 {color: green;} p {font-family: Tahoma; Color: purple; Font-size: 20 px;} a {color: orange;} 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. <style type= text/css > h1 {color: blue;} </style> The CSS properties display, position, and float can be used to control where an element sits on the page. 19

CSS (Cascading Style Sheets)

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