1 / 15

More CSS and Bootstrap

More CSS and Bootstrap. Styling Backgrounds. CSS Properties background-color HEX, RGB, or named color background-image url to image file background-repeat background-attachment background-position Shorthand background: # ffffff url (‘ img.png ’) no-repeat right top;. Styling Text.

draco
Download Presentation

More CSS and Bootstrap

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. More CSS and Bootstrap

  2. Styling Backgrounds • CSS Properties • background-color • HEX, RGB, or named color • background-image • url to image file • background-repeat • background-attachment • background-position • Shorthand • background: #ffffffurl(‘img.png’) no-repeat right top;

  3. Styling Text • Text Color • {color:value;} • Value in HEX RGB or name • Text Alignment • {text-align:value;} • left, centered, right, justified • Text Decoration • {text-decoration:value;} • none, overline, line-through, underline, inherit • Text Transformation • {text-transform:value;} • none, uppercase, lowercase, capitalize, inherit

  4. Styling Links • Link selectors • a:link– unvisited • a:visited – visited • a:hover – mouse over link • a:active – selected link • Common properties • text-decoration • color • background-color

  5. Styling Lists • CSS Properties • list-style-image • {list-style-image:url(‘square.png’); • list-style-position • {list-style-position:value;} • inside, outside, inherit • list-style-type • {list-style-type:value;} • disk, decimal, circle, square, none, … • Shorthand • {list-style:square inside url(‘square.png’) • type, position, image

  6. CSS Box Model • All HTML elements are considered as boxes Margin – clear area around the border, no background Border – area around the padding, background Padding – clear area around content, background Content – content of the element, background Margin Border Padding Content

  7. Controlling the Box • <div class=“box”>Hello World</div> • .box { • width:250px; • padding:10px; • border:5px solid gray; • margin:10px; • } • How wide is the <div>?

  8. Four sided Properties • Margin and Padding • margin-top, margin-right, margin-bottom, margin-left • Shorthand • margin: 25px 50px 75px 100px; • top is 25px • right is 50px • bottom is 75px • left is 100px • padding: 25px 50px 75px; • top is 25px • right and left is 50px • bottom is 75px • margin: 25px 50px; • top and bottom is 25px • right and left is 50px • padding: 30px • top, right, bottom and left are 30px

  9. CSS3 Styles • Some new properties are defined in CSS3 • The support for these properties varies by browser • background-size-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover; • CSS functions • background-image: -webkit-gradient(linear,background-image: -webkit-linear-gradient(top, …background-image: -moz-linear-gradient(top, ...background-image: -ms-linear-gradient(top, …background-image: -o-linear-gradient(top, …background-image: linear-gradient(top, … • http://www.w3schools.com/cssref/css3_browsersupport.asp

  10. QQ #2 • <body> • <header>This is the header</header> • <nav> • <a href="/html/">HTML</a> | • <a href="/css/">CSS</a> | • <a href="/js/">JavaScript</a> | • <a href="/jquery/">jQuery</a> • </nav> • <article> • <header>Article1 Header • <p>blah, blah, blah</p> • </header> • <p>Article Text</p> • </article> • <aside> • <header>Aside Header</header> • <p>Aside text</p> • </aside> <article> • <header>Article2 Header • <p>blah, blah, blah</p> • </header> • <p>Article Text</p> • </article> • <aside> • </body> • </html> What is the CSS selector to style all articles’ text? What is the CSS selector to style only the page’s header? What is the selector to style only article 2’s text?

  11. Responsive Web Design • Creating Web sites that adjust to the media that renders them • CSS 2.1 provided media types • all • handheld • print • screen • … • Allows selecting the style sheet based upon the device <link rel=“stylesheet” type=“text/css” href=“core.css” media=“screen”/> <link rel=“stylesheet” type=“text/css” href=“print.css” media=“print”/>

  12. CSS3 Media Queries • Allows inspection of physical characteristics of the device rendering the page • Media features • width: min-width, max-width • height: min-height, max-height • device-width: min and max • device-height: min and max • orientation: portrait or landscape • aspect-ratio: min and max • device-aspect-ratio: min and max • color: number of bits of color • monochrome

  13. Media Queries • Media Query Format • media=“<operator>+ <media_type>+ (<media_feature>:<value>)+” • <link rel=“stylesheet” media=“not screen and (color)” href=“example.css”/> • @media <operator>+<media_type>+ (<media_feature>:<value>)+ • @media (max-width: 979px)

  14. Combining Media Queries and CSS • Allows us to set the style of the web page based upon the device viewing the page • Large Screen • Printer • Tablet • Laptop • Phone • Mark the HTML element with classes • Style the classes differently based upon the Viewer

  15. Twitter Bootstrap • Bootstrap uses HTML5 so use the right <!DOCTYPE> • Bootstrap is mobile first or responsive

More Related