IANR WEB MANAGER NETWORK Meeting 5/19/2016 9:00am

IANR WEB MANAGER NETWORK Meeting 5/19/2016 9:00am

IANR Web Manager Network Update – Anne Holz Basic CSS– Anne Holz
Meeting Agenda IANR Web Manager Network Update – Anne Holz Basic CSS– Anne Holz

IANR Web Manager Network Update
You should receive a blog survey in the next week. A WDN blog task force is exploring blog usage at UNL by faculty and staff to determine the benefits of offering a blogging solution. If you’re interested in having a blog or currently have a blog, I highly encourage you to complete the survey. The UNL website privacy policy, link to in the global footer, was updated this month. A couple sites have asked about collecting demographic data in Google Analytics. Demographic data is part of Google Analytics Advertising Reporting Features. In order to use this option, in addition to turning it on, Google Analytics policy requires sites to disclose specific information regarding the use of the feature in the site’s privacy policy. Currently the UNL website privacy policy does not include the information required by Google Analytics to use the demographics feature however, it does state that, “Individual units of the university may provide clarification or extension to this policy regarding their handling of private data”. The WDN governance board is working to provide a guide on how your site can extend the privacy policy to include Google Analytics demographic data. The Web Developer Network meeting will be held on East Campus next week, Tuesday, May 24 at 2:00pm in the Great Plains Room. The UNL Web Developer Network group is open to anyone managing or developing UNL websites. The WDN site is in the process of reorganizing the site. They’ve been adding and updating documentation. Some of your favorite pages may have moved, however, they’ve added links on the front page of the site to help you more readily find the most visited content. You should be seeing the new “N” on your website. The official rollout for using the new “N” is July 1st. If your site currently displays the old N that means your site has not been updated to the new UNL framework. The deadline to have your site updated is July 1st. The WDN Governance Board will be contacting site owners/managers in the next couple weeks inquiring about the status of their sites. Blog survey Privacy policy WDN’s next meeting on East Campus WDN website documentation The new “N” on sites Icon Factory update

CSS and HTML Work Together
Basic CSS CSS and HTML Work Together HTML describes content CSS determines how content will look

If you were building a house…
Basic CSS If you were building a house… HTML would be the structure Roof Rooms Foundation CSS would be the decor Paint Furniture Carpet

Regardless of how you decorate it, a kitchen will still be a kitchen.
Basic CSS Regardless of how you decorate it, a kitchen will still be a kitchen.

Basic CSS These sites have the same HTML but different CSS Similarly, you can change how a page looks with CSS while the HTML remains the same.

About CSS CSS stands for Cascading Style Sheet
Basic CSS About CSS Style sheets cascade like a waterfall. Though the water may fall in different directions from top to bottom, how the water falls at the bottom determines how it will flow into the river. CSS stands for Cascading Style Sheet A page can load multiple style sheets The style closest to the content takes precedence

What can you do with CSS? Basic CSS Change colors Add backgrounds
Position elements on the page Size elements Set an opacity Apply fonts Crop images Add gradients Add borders Animate Add responsiveness more…

There are three ways to apply CSS
Basic CSS There are three ways to apply CSS External style sheet (linked to in the <head>) Internal style sheet (written in the <head>) Inline style (written in the <body>)

Three different ways of applying the same style
Basic CSS Three different ways of applying the same style External style sheet Internal style sheet Inline style <head> <link rel=“stylesheet” type=“text/css” href=“styles.css”> </head> _________________________________ An external style sheet file ends in .css and should not contain any HTML. The file linked to above, styles.css, would contain only the contents below: p { color: green; font-weight: bold; } <style> </style> <p style=“color: green; font-weight: bold;”> This is sample paragraph text. The applied style would color this text green and make it bold. </p> Result: This is sample paragraph text. The applied style would color this text green and make it bold.

Which ones do you use? Basic CSS
Recommended Internal style sheets are typically not used in UNLcms. In UNLcms the contents of the <head> displays on all pages. Internal style sheets are intended for sites where the <head> can be different on a specific page. Inline styles: The UNLcms WYSIWYG editor unavoidingly applies inline styles. When writing your own CSS, use them sparingly or not at all. They are more work to update, they muddy up the HTML by mixing form with content and, unlike external css, they are not cached. Caching speeds up page loading time. External style sheet (linked to in the <head>) Internal style sheet (written in the <head>) Inline style (written in the <body>) Inline styles, though valid, are not ideal.

Inline Style Basic CSS Should be used sparingly
Inserted by UNLcms WYSIWYG editor Easy to apply but more work to update Muddies up the HTML by mixing form with content Unlike external CSS, they are not cached. Caching speeds up page loading time. Takes precedence over internal and external stylesheets

Inline styles need the following to work
Basic CSS Inline styles need the following to work The style attribute in an HTML tag <p style=“color: green;”>contents that gets styled goes in here </p>

CSS Syntax (inline style)
Basic CSS CSS Syntax (inline style) Separate declarations with a semi-colon HTML Tag Style attribute <p style=“color: green;”>contents that gets styled goes in here </p> Property Value Separate the property and value with a colon

External Stylesheet Basic CSS
CSS is cached allowing pages to load quicker You can make a change in one file that will apply to all the pages on the site You can have multiple external CSS files The last CSS file linked to in the <head> takes precedence over the ones above it

External Stylesheets need the following to work
Basic CSS External Stylesheets need the following to work In UNLcms, a .css file has already been created and linked to in the <head>. An external .css file A link to the file in the <head> A selector in the HTML

External Stylesheet in UNLcms
Basic CSS External Stylesheet in UNLcms To edit the CSS file in UNLcms, go to: Appearance>Settings

Keep in mind… Basic CSS Unlike HTML, CSS is not very forgiving.
A missing colon or bracket can break the CSS Hidden characters copy and pasted from other documents can also break the CSS Unlike pages in UNLcms, the CSS text box has no revisions tab. It’s a good idea to save a backup copy of your CSS in a text file before making extensive changes.

CSS Syntax (external style sheets)
Basic CSS CSS Syntax (external style sheets) Separate declarations with a semi-colon Selector Declaration p {color: green;} Property Value Separate the property and value with a colon

Types of CSS Selectors Basic CSS Element Pseudo-class Class
Descendant selector id Group selector Attribute

CSS Element Selector Basic CSS HTML elements are pre-defined
body caption em form h1 head html table Obsolete ELEMENTS (no longer used) font center frame strike acronym u blink marquee In a Webaudit report you may see an error that says “…element is obsolete. Use CSS instead. “ HTML elements are pre-defined There are 142 HTML5 elements Some obsolete HTML elements and attributes have been replaced with CSS

CSS Class Selector Basic CSS
Class selectors are not pre-defined, you create them The class selector displays in the CSS file with a period (.) in front of the name .quote {font-size: 2em; color: blue;} The corresponding class attribute displays in the HTML inside an HTML tag <p class=“quote”>content goes in here</p>

p.quote {font-size: 2em; color: blue;}
Basic CSS CSS Class Selector You can get more specific and style only p elements with class=“quote” by adding the element before the class in the CSS file p.quote {font-size: 2em; color: blue;} The more specific, the more precedence it has over other styles.

UNLcms Class Selectors
Basic CSS UNLcms Class Selectors The WDN site has a list of pre-defined classes you can apply. The styles already exist in an external css file.

UNLcms Class Selectors
Basic CSS UNLcms Class Selectors All you have to do is add the class attribute in your HTML, inside an HTML tag (do not include the period in front of the name). <div class=“wdn-pull-right”>content floats to the right</div>

CSS id Selector Basic CSS
id selectors are similar to class selectors with the exception that id’s must be unique. You can’t use the same id more than once on a page.

CSS id Selector Basic CSS
The id selector displays in the CSS file with a pound symbol (#) in front of the name #bio {font-size: .85em; color: brown;} The corresponding id attribute displays in HTML inside an HTML tag <p id=“bio”>content goes in here</p>

Class and id naming convention
Basic CSS Class and id naming convention Use all lowercase letters Separate words with a hyphen Describe the function or define the content Avoid describing how something looks or where it’s positioned on the page

Class and ID naming convention
Basic CSS Class and ID naming convention Don’t name a class or id the same as the HTML tag, consider if the tag itself will work as the selector <img class=“img” src=“house.jpg” alt=“brick house”> redundant

Class or ID names Basic CSS Good quote biography feature statistic
Not as Good red-text left-circle img table

Additional CSS Selectors
Basic CSS Additional CSS Selectors Attribute Descendant selector a[target] { span a { background-color: black; background-color: yellow; } Pseudo-class Group selectors a:hover { h2, .headline { color: red; font-weight: bold;

CSS Colors Basic CSS Three ways to specify a color in CSS Name
RGB value HEX value There are 140 supported color names p {color: green;} p {color: rgb (51,102,0);} p {color: #336600;}

CSS Backgrounds Basic CSS
Default color is transparent It’s good practice to set a background color By default the background image is placed in the top left corner of an element By default background image scrolls with the page By default the background will repeat both horizontally and vertically. Other values include repeat-x, repeat-y, no-repeat. Position can be left, right, center matched with top, center, bottom Position can be x%y% (% over and % down) Background color and images can be added to elements. You don’t have to include all of the background properties but they have to be listed in order. body { background: #ffffff url(”corn-field.jpg") no-repeat fixed right top; } Color image repeat attachment position

Basic CSS CSS comments Comments help to keep your CSS file organized and easier to reference Comments in HTML look like this:  Comments in a CSS file look like this: /* this is a CSS comment */

More information on CSS
Basic CSS More information on CSS

Next Meeting Thursday, June. 16th at 9 a.m.

IANR WEB MANAGER NETWORK Meeting 5/19/2016 9:00am

Similar presentations

Presentation on theme: "IANR WEB MANAGER NETWORK Meeting 5/19/2016 9:00am"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

IANR WEB MANAGER NETWORK Meeting 5/19/2016 9:00am

Similar presentations

Presentation on theme: "IANR WEB MANAGER NETWORK Meeting 5/19/2016 9:00am"— Presentation transcript:

Similar presentations

About project

Feedback