> > > > Cascading Style Sheets basics

Size: px

Start display at page:

Download "> > > > Cascading Style Sheets basics"

Allen Griffith
6 years ago
Views:

1 > > > > Cascading Style Sheets basics CSS A style language used to control the design layout of an.html or.php document more efficiently and globally than using HTML attributes. Good Stuff Gives you greater type and layout control, separates the style from structure, creates smaller html files, and is much easier to maintain the site, because of easier style updates. When you are working with many pages, a simple update to all using one style sheet file is clearly easier than updating each file separately. Bad Stuff Uneven browser support, especially with Internet Explorer! Case sensitive with Mozilla based browsers (Netscape 6 and up, Firefox, and Mozilla). Basic Example You will list properties with styles using : and separating them with ; Embedded and linked can be on one line or on separate lines. property: style; For example: color: blue; The Cascade Which style is dominant? 1. Inline has most weight 2. Embedded is next 3. Linked next 4. Browser default Another thing to note, the cascade also references the ORDER of the listing, double listed, the second will override the first: body {color: blue; body {color: red; makes it so that the body's text color will be red, not blue. Using Multiple CSS Text Properties Separating Styles The semicolon (;) separates out each style. Many people also put them at the end in anticipation of the next style. This is not necessary, but often done. h1{font-size: 12px; color: blue; line-height: 18px; You can also vary this approach, like using line breaks like this: h1{font-size: 12px; color: blue; line-height: 18px; > > > > Inline, Embedded, and Linked Inline Style Style information goes inside the HTML tags of your.html file <p style="property: style; property: style; property: style;"> </p> Inline Example <span style="color:blue; font-family:arial;"> This text is blue Arial </span> Embedded Style Within the <head></head> tags of your HTML file: <html>

2 <head> <tile> My Page</title> <style type="text/css"> h1 {color:red; font-size:18px; </style> </head> <body> p {color:blue; font-size:12px;.something {color:teal; font-size:20px; <h1> Welcome to my website! This text is red</h1> <p>here is blue text<span class="something">this text is teal </span> and some more blue text. </p> </body> </html> Linked Style THIS IS THE PREFERRED TECHNIQUE, even though it has less weight than the examples above! Make a document named style.css, or mystylesheet.css and put information in there like: h1 {color:red; font-size:18px; p {color:blue; font-size:12px;.something {color:teal; font-size:20px; Next, on your.html page you need to state that you are linking your style to another document: <head> <title>my Web Page</title> <link rel="stylesheet" href="yourstylesheetfile.css" /> </head> > > > > HTML Tags Used Specifically for CSS link <link /> To link to an external style sheet. rel="stylesheet" this is always "stylesheet" href="filename.css" tells the.html the name and path of your stylesheet type="text/css" this is always "text/css"

3 <link rel="stylesheet" href="title of style sheet, like style.css" type="text/css" /> span <span>to format a portion of text</span> <span style="color:blue; font-weight:bold;">to format a portion of text</span> To link or embedd style, set up ".blue" information in you style area of the header, or in your linked style sheet, like:.blue {color:blue; Then label your html tag as class="blue" <span class="blue">this text is blue</span> The "class" is the name you are calling this text formatting. Again, this will only work when you set up ".blue" information in your embedded or linked style, that gives your class a style attribute. div <div> For a division of some sort, like a container, or a box, or a block, or text </div> <div style="color:blue; font-weight:bold;">to format a division</div> To link or embedd style, set up "#blue" information in your style, like: #blue {color:blue; Then label your html tag as id="blue" <div id="blue">this text is blue</div> The "id" is the name you are calling this formatting. Again, this will only work when you set up "#blue" information in your embedded or linked style, that gives your division identity a style attribute. *Today we are going to focus on text formatting, and next class on boxes and the grid. > > > > CSS Text Formatting color For a font color or background-color, use color name or #hex or rgba color: red; color: #; color: rgba(100,22,35,1) font-family Selects the font for the text. There are very few available by default: font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: 'Bookman Old Style', serif; font-family: 'Comic Sans MS', cursive; font-family: Courier, monospace; font-family: 'Courier New', Courier, monospace; font-family: Garamond, serif; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: Symbol, sans-serif;

4 font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; font-family: Webdings, sans-serif; font-family: Wingdings, 'Zapf Dingbats', sans-serif; For code access to more fonts, go here: Google Web Fonts Font Squirrel font-style normal (default) italic oblique font-style: italic; font-variant small caps normal (default) font-variant: small-caps; font-weight bold normal (default) a number giving it weight (400=normal, 700=bold, or other number) font-weight: bold; font-weight: 900; font-size can use: em #% #px #in cm (centimeters), ex (x-height, generally half the font size), pt (points), pc (pica), mm (millimeters) font-size: 1em; (this is the preferred unit, 1 em equals 12pt text) font-size: 12pt; line-height controls space between lines, leading normal (default) number length percentage line-height: 14px; background-color adds background color behind text, like a highlighter would background-color: yellow; text-decoration normal underline overline line-through blink. Use this to remove underlines from your links! text-decoration: none; class Class is specified by including a period (.) before the selector name. For elements that are going to be different, but this same treatment might get repeated elsewhere on the page. The syntax for declaring a Class selector is as follows: You can give text a class (identifying them, so that you can reference it in your CSS) Example: <h1 class="something"> </h1> You would reference the "something" class in your CSS like this:.something {color:#0000ff; Two classes would look like this: <h1 class="something anotherthing"> </h1> You would reference the two things separately in CSS:.something {color: red;.anotherthing {font-family: arial; id ID's CSS is an HTML element, followed by a "#", and finally ID's name. IDs are usu-

5 ally elements that are totally different from everything else on the page. Example: <p id="exampleid1">this paragraph has an ID name of "exampleid1" and has a white CSS defined background</p> CSS p#exampleid1 { background-color: white; Two ids would look like this: <h1 id="something anotherthing"> </h1> You would reference the two things separately in CSS: #something {color: red; #anotherthing {font-family: arial; Both! You can apply both a class and an id to your HTML/CSS, to further categorize. <h1 id="something" id="anotherthing"> </h1> > > > > CSS Style For Linked Text Link's States a:link a:visited a:hover a:active *put this in your style.css document, or embedded / inline in your.html document. Link Styling a:link {color: red; font-size: 12px; a:visited {color: maroon; font-size: 12px; a:hover {color: green; font-size: 12px; text-decoration: none; a:active {color: teal; font-size: 12px; That is it In your.html file you don't have to do anything. Any text link will be styled More than one... If you want to have more than one link style, you will have to give your links a "class," like what we did with spans of text. We will call our class "tiny." a.tiny:link {color: red; font-size: 12px; a.tiny:visited {color: maroon; font-size: 12px; a.tiny:hover {color: green; font-size: 12px; text-decoration: none; a.tiny:active {color: teal; font-size: 12px; In the.html file, to reference this link formatting: <a href="linktoapage.html" class="tiny">click here</a> Linking to another part of the page <a id="top"> </a> No information needed here, simply open and close the link. A common example: Some paragraphs of text so that the page is long and you don t want the user to have to scroll all the way back up, so name the link at the bottom of the page like this: <a href="#top"> Back to top</a> And at the top of the page, where you want the link to make the jump to, put this: <a id="top"> </a>

6 > > > > CSS Page Background Options body This is the tag you use to style of your entire page. background-color <body style="background-color: teal;"> INLINE or body {background-color: teal; EMBEDDED or LINKED background-image To make an image the background of your page. body {background-image: url(images/imagename.jpg); <p> or <span>, so this is a straightforward and easy way to layer text with images, with minimal tags. Try it out! p {background-image:url(images/imagename.gif) background-repeat To make, or not make your background image repeat repeat repeat-x repeat-y no-repeat body {background-repeat: no-repeat; fixed background to fix your background to not move: background: url(images/logo.png) no-repeat fixed left top #FFFFFF; background same effect as above but allows you to add multiple styles to your body background at once: body {background: teal url(images/logo.gif) no-repeat; background scale in the code below, center can also be top or bottom and left or right: > > > > Display { background: url(images/bg.jpg) no-repeat center center fixed; background-size: cover; display: inline; when closing a tag there is no line break tags that are default inline include: <a> <img> <span> <b> <i> display: block; when closing a tag there is a line break, like a lego block tags that are default block include: <p> <div> <ul> <h1> <h2> etc. display: inline-block; there is no line break, but allows there to be more space and ability for a box to be applied to the tag (like a box for a button) *we will talk about display: flex and display: grid later...

7 > > > > CSS Selectors (some examples) Selecting a HTML element to style with CSS Selector example description.class.intro Selects all elements with class="intro" #id #firstname Selects the element with id="firstname" * * Selects all elements element p Selects all <p> elements element,element div, p Selects all <div> elements and all <p> elements element element div p Selects all <p> elements inside <div> elements element>element div > p Selects all <p> elements where the parent is a <div> element element+element div + p Selects all <p> elements that are placed immediately after <div> elements :first-child p:first-child Selects every <p> element that is the first child of its parent ::first-letter p::first-letter Selects the first letter of every <p> element ::first-line p::first-line Selects the first line of every <p> element :last-child p:last-child Selects every <p> element that is the last child of its parent :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent :not(selector) :not(p) Selects every element that is not a <p> element :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child

Introduction to Web Design CSS Reference

Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example: