1 / 13

CSS (Cascading Style Sheets): How the web is styled

CSS (Cascading Style Sheets): How the web is styled.

rania
Download Presentation

CSS (Cascading Style Sheets): How the web is styled

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web page looks, background color, font, containers (divs), forms, tables, etc. are all styled by CSS. You can even animate images and other elements using CSS3 W3Schools is quite possibly one of the best online resources to figure out how to do anything on the web. You can find how to add HTML Elements and how to use CSS. Here is a link to their CSS section http://www.w3schools.com/css/default.asp Here is a link to the new CSS3 aspects like animationshttp://www.w3schools.com/css3/default.asp

  2. CSS is used to Style the Invisible Box Around Every HTML Element HTML Block Elements Most HTML elements are defined as block level elements or as inline elements. Block level elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table> HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img> The HTML <div> Element (The powerful Container) The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.  The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data. http://www.w3schools.com/html/html_layout.asp

  3. Lets Investigate Block Elements • Block-level Elements • A block element is an element that has, but may not be limited to, the following characteristics: • If no width is set, will expand naturally to fill its parent container • Can have margins and/or padding • If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned) • By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements) • Ignores the vertical-align property • So, for a block element, it’s not necessary to give it a set width or to give it a width of 100% if you want it to fill its parent horizontally. In fact, doing either of those things may cause maintainability issues or other undesirable problems. • And, as the fourth item in the above list indicates, it’s also not necessary to “clear” a block element; assuming no floats are affecting the block element, it will be cleared automatically and will start on the next “line” in the page’s output. • Examples of Block Elements:<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.

  4. Lets Investigate Inline Elements • Inline Elements • An inline element has, but may not be limited to, the following characteristics: • Flows along with text content, thus • Will not clear previous content to drop to the next line like block elements • Is subject to white-space settings in CSS • Will ignore top and bottom margin settings, but will apply left and right margins, and any padding • Will ignore the width and height properties • If floated left or right, will automatically become a block-level element, subject to all block characteristics • Is subject to the vertical-align property • The easiest way to picture an inline element is to think of it as a box that acts like text. What happens, for example, to text that’s not separated by other elements? It flows one letter after the other. If you put an inline element next to text, it will flow next to that text just like another piece of text. • Examples of Inline Elements:<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

  5. Block elements are structural • Inline elements are text-based • You can put any block element inside another block element • You can also put any inline element inside a block element, as well as any inline element inside any other inline element • Generally, you cannot put a block element inside an inline element • You have the option to change any block-level element to an inline element, and vice-versa, using the display property • Great Block and Inline Reference: http://www.impressivewebs.com/difference-block-inline-css/ • Resource for changing block elements to inline for layout and navigation: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

  6. CSS uses Style Rules applied to HTML Elements A CSS Rule contains 2 parts: Selector & Declaration The Selector indicates which HTML element the rule is applied to, you can apply the same rule to more than one element if you separate the element names with commas p { font-family: Arial;} h1, h2, h3{ font-family: Arial; color: yellow; } The Declaration/s indicate how the HTML element/s will be styled. Declarations have 2 parts: Property & Value p { font-family:Arial;} Properties indicate the aspects of the element you want to style Values specify the style choice

  7. Link a CSS Stylesheet using this HTML tag: <link href=“name_of_stylesheet_file.css” rel=“stylesheet” type=“text/css” /> For example this week you’ll use <link href="style_intro.css” rel="stylesheet” type="text/css”/> Our stylesheet file will be named style_intro.css, the rest of the line stays the same, only the stylesheet name changes link– the link element is used to tell the browser where to find the CSS file. The <link/> element is an empty element, meaning it does now need a separate closing tag and it lives in the <head> element. It should have these 3 html attributes (html_attributes): href– specifies the path to the css file. One stylesheet in the same folder as the html files: The path would be the name of the stylesheet<link href="style_intro.css” rel="stylesheet” type="text/css"> Several stylesheets, make a folder called css: The path would be the folder and name of the stylesheet separated by a / <link href=”css/style_intro.css” rel="stylesheet” type="text/css"> Also for several stylesheets you must link each one separately, these are the stylesheet links for a responsive site, the different stylesheets define how the site looks at various sizes : <link rel="stylesheet" type="text/css" href="css/screen_style.css"/> <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css"/> <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screen_layout_small.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screen_layout_medium.css"> type– specifies the type of document being linked to: text/css rel– specifies the relationship between the HTML page and the file it is linked to: stylesheet

  8. CSS Tips • A CSS declaration always ends with a semicolon (;), and declaration groups are surrounded by curly brackets { }p {color:red;text-align:center;} • Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px • To make the CSS more readable, you can put one declaration on each line, like this:p{color:red;text-align:center;} • Do NOT start an ID name with a number! It will not work in Mozilla/Firefox • Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.A CSS comment begins with "/*", and ends with "*/", like this: • /*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;} /*Styles for body copy*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}

  9. Lets Create This Navigation (all CSS3) After Styling the HTML document from week 1 Add your own styles to the document. You will style block and inline elements, also you will create 2 <div> with div id

  10. What is an ID Selector? The W3C defines class ID as "a unique identifier to an element". But what does that actually mean? CSS IDs are similar to classes in that they define a special case for an element. The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". CSS Code: #markup{ border: 1px solid #FF0000; overflow:auto; width: 80%; background-color: #FFFFCC; color: #CC0000; padding: 10px; } HTML Code: <div id="markup"> <h2>Some other common markup styles (this is a level 2 heading)</h2> <p>Make this text and each of the following a paragraph plus the markup described in the text.<p> <p><em>Emphasize this paragraph.</em></p> <p><strong>This paragraph should be strong.</strong></p> <p><blockquote>This is a long quote that should be displayed as such.</blockquote></p> Display:

  11. What is the Class Selector? The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: CSS Code: http://www.w3schools.com/css/css_id_class.asp

  12. Color Resources http://www.colorhexa.com http://www.w3schools.com/cssref/css_colors.asp Mozilla CSS extensions https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions To Create the Navigation use the HTML and CSS Tutorial code here: http://www.red-team-design.com/css3-dropdown-menu Active Navigation Demo: http://www.red-team-design.com/wp-content/uploads/2011/03/css3-dropdown-menu-demo.html To investigate the browser specific gradient code visit: http://gradients.glrzad.com/

More Related