SlideShare a Scribd company logo

CSS

1 of 7
Download to read offline
Cascading Style Sheets (CSS) and Dreamweaver

Outline
About Cascading Style Sheets ............................................................................................................................................................................ 1
   Types of style sheets ...................................................................................................................................................................................... 1
Steps to create an external style sheet .............................................................................................................................................................. 2
   Open CSS styles tab ........................................................................................................................................................................................ 2
   Create style sheet ........................................................................................................................................................................................... 2
Save your stylesheet........................................................................................................................................................................................... 3
Link a style sheet to an HTML page.................................................................................................................................................................... 3
Experiment with the CSS features on your new document ............................................................................................................................... 4
So what if you want to add to or edit the existing styles provided? ................................................................................................................. 5
   Edit Tag styles ................................................................................................................................................................................................. 5
   Other styles .................................................................................................................................................................................................... 6
Understanding Styles and Making Additions ..................................................................................................................................................... 6
   Adding block tag styles ................................................................................................................................................................................... 6
   Adding class styles .......................................................................................................................................................................................... 6
   Deleting styles ................................................................................................................................................................................................ 7
Additional Resources .......................................................................................................................................................................................... 7

About Cascading Style Sheets
Cascading Style Sheets (CSS) keep style separate from text and define how things appear in a browser. Example, you can use CSS to
define how all Heading 1 elements look on all pages in your site.

Types of style sheets
     1) External style sheets – by far the most powerful way to use CSS. You define styles in a text file saved with a .css extension. Then
        link your web pages to that style sheet.
            • Use external style sheets when you want a style to be global (applied to multiple pages in a website). Then when you
                revise a style in an external style sheet, the change is reflected on every page linked to the style sheet.
     2) Internal style sheet – Styles are defined in the <head> section of an individual webpage. Internal styles apply only to the page
        they are defined in. They may be useful if you wish to make exceptions to your site’s style rules for just one page.




12/23/2008                                                                                                                                                                                         Page 1
Copyright, Office of Technology, Bloomsburg University
Cascading Style Sheets (CSS) and Dreamweaver

Steps to create an external style sheet
Open CSS styles tab
In Dreamweaver, click Window along the top menu bar > then choose CSS Styles.

Create style sheet
To get used to how CSS style sheets work, the easiest way to proceed is to apply an already created sheet in Dreamweaver.

Choose File > New > Page from Sample > CSS Style Sheet.

For this exercise click Text: Verdana and then press the Create button near the bottom of the window.




12/23/2008                                                                                                                  Page 2
Copyright, Office of Technology, Bloomsburg University
Cascading Style Sheets (CSS) and Dreamweaver
The following is what populates the screen once you pick Text: Verdana.


                                                                                                              Note the tag is written first
                                                                                                              followed by a bracket {
                                                                                                              Next there are specific
                                                                                                           Save your defined
                                                                                                              properties
                                                                                                                           stylesheet
                                                                                                           Click Filea closing bracket }
                                                                                                              Lastly – Save As and save
                                                                                                           your style sheet. The most
                                                                                                           common naming to delete is
                                                                                                              Be careful not convention
                                                                                                           style.css or punctuation or the
                                                                                                              brackets
                                                                                                              style will not work correctly!




Link a style sheet to an HTML page
To see the new stylesheet in action, create a new basic HTML page.
File > New > Blank > HTML and Create.

In the Title area type Test of CSS

To link a CSS sheet to your new page, look in the CSS panel on the right side of the Dreamweaver screen.
If not available click Window – CSS Styles.




Click the Attach Style Sheet icon.




12/23/2008                                                                                                                     Page 3
Copyright, Office of Technology, Bloomsburg University
Cascading Style Sheets (CSS) and Dreamweaver
A window appears asking if you wish to link or import, either would work. However, most web designers choose the link option.
Click the Browse button to select your new style sheet. Choose Link and then OK.




You have now linked a style sheet to an HTML document. Now the fun begins!

Experiment with the CSS features on your new document
Apply heading1, heading2 and heading3 tags to your new document to see how they appear.
Type a line – “this is a sample of the small text option.” Highlight the word small and select .small from the Styles menu.
Type “here’s a sample of xbig styled text and use the .xbig style
Type “here’s text surrounded by a box style” and use the .box1 or .box2 style.




12/23/2008                                                                                                                    Page 4
Copyright, Office of Technology, Bloomsburg University
Cascading Style Sheets (CSS) and Dreamweaver




So what if you want to add to or edit the existing styles provided?
Edit Tag styles
To edit a tag style, click on it in the CSS styles panel. These are the main items such as body, td, th, those items without a period (.) in
front of them (such as the .bodystyle item). You will see all the Properties for the style directly below the item you selected. Example:
Click on Body tag. If you wanted to apply a different background color, select that under background-color. Click in the box next to that
item to use the color picker. You could apply many items this way. As you apply new options they will be automatically written in your
css stylesheet. You will need to save both files to keep your new changes.




                                                  Note: You may also select the tag (i.e., body),
                                                  and then click the Pencil icon which will open a
                                                  window to apply changes. Either way is fine.



12/23/2008                                                                                                                       Page 5
Copyright, Office of Technology, Bloomsburg University
Cascading Style Sheets (CSS) and Dreamweaver
Other styles
To edit the other styles, those with a period (.) in front of them (i.e., .bodystyle), select the item and edit the properties as described
above.

Understanding Styles and Making Additions
When you use a predefined style choice in
Dreamweaver, you are offered regular tags plus
style choices. There are many, many other things
you can do with CSS. More so than we have time
to go through in this tutorial.




Adding block tag styles
In the CSS properties area, click the + icon to add a new rule.



                                                         Select Tag radio button.
                                                         Select the tag you wish to define by using the drop down arrow.
                                                         The Define In area should have your active style sheet listed.
                                                         Click OK.
Add properties as you desire.


Adding class styles
In the CSS properties area, click the + icon to add a new rule.




12/23/2008                                                                                                                          Page 6
Copyright, Office of Technology, Bloomsburg University

Recommended

Css for Development
Css for DevelopmentCss for Development
Css for Developmenttsengsite
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
Web Hosting Operations Guide
Web Hosting Operations GuideWeb Hosting Operations Guide
Web Hosting Operations Guidewebhostingguy
 

More Related Content

Similar to CSS

TIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideTIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideRohan Chandane
 
Building a Silverstripe Page Elements template for Web designers
Building a Silverstripe Page Elements template for Web designersBuilding a Silverstripe Page Elements template for Web designers
Building a Silverstripe Page Elements template for Web designersicecaster
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsQA TrainingHub
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Sutinder Mann
 
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004brighteyes
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalorerajkamal560066
 
Dreamweaver Notes
Dreamweaver NotesDreamweaver Notes
Dreamweaver Notessmasi27
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designersSingsys Pte Ltd
 
Website development using dreamweaver
Website development using dreamweaverWebsite development using dreamweaver
Website development using dreamweaverTekblink Jeeten
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2Sutinder Mann
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder
 

Similar to CSS (20)

TIBCO General Interface - CSS Guide
TIBCO General Interface - CSS GuideTIBCO General Interface - CSS Guide
TIBCO General Interface - CSS Guide
 
CSS_tutorial_2
CSS_tutorial_2CSS_tutorial_2
CSS_tutorial_2
 
CSS_tutorial_2
CSS_tutorial_2CSS_tutorial_2
CSS_tutorial_2
 
Building a Silverstripe Page Elements template for Web designers
Building a Silverstripe Page Elements template for Web designersBuilding a Silverstripe Page Elements template for Web designers
Building a Silverstripe Page Elements template for Web designers
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
 
Kajol52
Kajol52Kajol52
Kajol52
 
Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10Using Templates And Cascading Style Sheets10
Using Templates And Cascading Style Sheets10
 
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
Using Stylesheets To Design A Web Site In Dreamweaver Mx 2004
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
 
Full
FullFull
Full
 
Dreamweaver Notes
Dreamweaver NotesDreamweaver Notes
Dreamweaver Notes
 
Themes
ThemesThemes
Themes
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
CSS 101
CSS 101CSS 101
CSS 101
 
Website development using dreamweaver
Website development using dreamweaverWebsite development using dreamweaver
Website development using dreamweaver
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
 
Css Founder.com | Cssfounder se
Css Founder.com | Cssfounder seCss Founder.com | Cssfounder se
Css Founder.com | Cssfounder se
 
CSS_tutorial_1
CSS_tutorial_1CSS_tutorial_1
CSS_tutorial_1
 
CSS_tutorial_1
CSS_tutorial_1CSS_tutorial_1
CSS_tutorial_1
 

More from tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 

More from tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 

Recently uploaded

The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxNeo4j
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Umar Saif
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...ShapeBlue
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...SearchNorwich
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Product School
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Product School
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsEvangelia Mitsopoulou
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubShapeBlue
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarThousandEyes
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientKari Kakkonen
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriSafe Software
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyMustafa Kuğu
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...BookNet Canada
 
TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024ThousandEyes
 

Recently uploaded (20)

The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptxThe Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
The Art of the Possible with Graph by Dr Jim Webber Neo4j.pptx
 
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
Progress Report: Ministry of IT under Dr. Umar Saif Aug 23-Feb'24
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
 
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
ChatGPT's Code Interpreter: Your secret weapon for SEO automation success - S...
 
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...Relationship Counselling: From Disjointed Features to Product-First Thinking ...
Relationship Counselling: From Disjointed Features to Product-First Thinking ...
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...
 
Battle of React State Managers in frontend applications
Battle of React State Managers in frontend applicationsBattle of React State Managers in frontend applications
Battle of React State Managers in frontend applications
 
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHubHow We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
How We Grew Up with CloudStack and its Journey – Dilip Singh, DataHub
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes Webinar
 
AI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficientAI improves software testing to be more fault tolerant, focused and efficient
AI improves software testing to be more fault tolerant, focused and efficient
 
Geospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & EsriGeospatial Synergy: Amplifying Efficiency with FME & Esri
Geospatial Synergy: Amplifying Efficiency with FME & Esri
 
PrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5CompanyPrismCRM-RealEstate-SalesCRM_byCode5Company
PrismCRM-RealEstate-SalesCRM_byCode5Company
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...Transcript: Trending now: Book subjects on the move in the Canadian market - ...
Transcript: Trending now: Book subjects on the move in the Canadian market - ...
 
TrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI InnovationsTrustArc Webinar - TrustArc's Latest AI Innovations
TrustArc Webinar - TrustArc's Latest AI Innovations
 
New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024New ThousandEyes Product Features and Release Highlights: February 2024
New ThousandEyes Product Features and Release Highlights: February 2024
 

CSS

  • 1. Cascading Style Sheets (CSS) and Dreamweaver Outline About Cascading Style Sheets ............................................................................................................................................................................ 1 Types of style sheets ...................................................................................................................................................................................... 1 Steps to create an external style sheet .............................................................................................................................................................. 2 Open CSS styles tab ........................................................................................................................................................................................ 2 Create style sheet ........................................................................................................................................................................................... 2 Save your stylesheet........................................................................................................................................................................................... 3 Link a style sheet to an HTML page.................................................................................................................................................................... 3 Experiment with the CSS features on your new document ............................................................................................................................... 4 So what if you want to add to or edit the existing styles provided? ................................................................................................................. 5 Edit Tag styles ................................................................................................................................................................................................. 5 Other styles .................................................................................................................................................................................................... 6 Understanding Styles and Making Additions ..................................................................................................................................................... 6 Adding block tag styles ................................................................................................................................................................................... 6 Adding class styles .......................................................................................................................................................................................... 6 Deleting styles ................................................................................................................................................................................................ 7 Additional Resources .......................................................................................................................................................................................... 7 About Cascading Style Sheets Cascading Style Sheets (CSS) keep style separate from text and define how things appear in a browser. Example, you can use CSS to define how all Heading 1 elements look on all pages in your site. Types of style sheets 1) External style sheets – by far the most powerful way to use CSS. You define styles in a text file saved with a .css extension. Then link your web pages to that style sheet. • Use external style sheets when you want a style to be global (applied to multiple pages in a website). Then when you revise a style in an external style sheet, the change is reflected on every page linked to the style sheet. 2) Internal style sheet – Styles are defined in the <head> section of an individual webpage. Internal styles apply only to the page they are defined in. They may be useful if you wish to make exceptions to your site’s style rules for just one page. 12/23/2008 Page 1 Copyright, Office of Technology, Bloomsburg University
  • 2. Cascading Style Sheets (CSS) and Dreamweaver Steps to create an external style sheet Open CSS styles tab In Dreamweaver, click Window along the top menu bar > then choose CSS Styles. Create style sheet To get used to how CSS style sheets work, the easiest way to proceed is to apply an already created sheet in Dreamweaver. Choose File > New > Page from Sample > CSS Style Sheet. For this exercise click Text: Verdana and then press the Create button near the bottom of the window. 12/23/2008 Page 2 Copyright, Office of Technology, Bloomsburg University
  • 3. Cascading Style Sheets (CSS) and Dreamweaver The following is what populates the screen once you pick Text: Verdana. Note the tag is written first followed by a bracket { Next there are specific Save your defined properties stylesheet Click Filea closing bracket } Lastly – Save As and save your style sheet. The most common naming to delete is Be careful not convention style.css or punctuation or the brackets style will not work correctly! Link a style sheet to an HTML page To see the new stylesheet in action, create a new basic HTML page. File > New > Blank > HTML and Create. In the Title area type Test of CSS To link a CSS sheet to your new page, look in the CSS panel on the right side of the Dreamweaver screen. If not available click Window – CSS Styles. Click the Attach Style Sheet icon. 12/23/2008 Page 3 Copyright, Office of Technology, Bloomsburg University
  • 4. Cascading Style Sheets (CSS) and Dreamweaver A window appears asking if you wish to link or import, either would work. However, most web designers choose the link option. Click the Browse button to select your new style sheet. Choose Link and then OK. You have now linked a style sheet to an HTML document. Now the fun begins! Experiment with the CSS features on your new document Apply heading1, heading2 and heading3 tags to your new document to see how they appear. Type a line – “this is a sample of the small text option.” Highlight the word small and select .small from the Styles menu. Type “here’s a sample of xbig styled text and use the .xbig style Type “here’s text surrounded by a box style” and use the .box1 or .box2 style. 12/23/2008 Page 4 Copyright, Office of Technology, Bloomsburg University
  • 5. Cascading Style Sheets (CSS) and Dreamweaver So what if you want to add to or edit the existing styles provided? Edit Tag styles To edit a tag style, click on it in the CSS styles panel. These are the main items such as body, td, th, those items without a period (.) in front of them (such as the .bodystyle item). You will see all the Properties for the style directly below the item you selected. Example: Click on Body tag. If you wanted to apply a different background color, select that under background-color. Click in the box next to that item to use the color picker. You could apply many items this way. As you apply new options they will be automatically written in your css stylesheet. You will need to save both files to keep your new changes. Note: You may also select the tag (i.e., body), and then click the Pencil icon which will open a window to apply changes. Either way is fine. 12/23/2008 Page 5 Copyright, Office of Technology, Bloomsburg University
  • 6. Cascading Style Sheets (CSS) and Dreamweaver Other styles To edit the other styles, those with a period (.) in front of them (i.e., .bodystyle), select the item and edit the properties as described above. Understanding Styles and Making Additions When you use a predefined style choice in Dreamweaver, you are offered regular tags plus style choices. There are many, many other things you can do with CSS. More so than we have time to go through in this tutorial. Adding block tag styles In the CSS properties area, click the + icon to add a new rule. Select Tag radio button. Select the tag you wish to define by using the drop down arrow. The Define In area should have your active style sheet listed. Click OK. Add properties as you desire. Adding class styles In the CSS properties area, click the + icon to add a new rule. 12/23/2008 Page 6 Copyright, Office of Technology, Bloomsburg University
  • 7. Cascading Style Sheets (CSS) and Dreamweaver Select Class radio button. Create a name for the style. Precede with a period (.) – example: .redtext The Define In area should have your active style sheet listed. Click OK. Add properties as you desire. Deleting styles Should you wish to delete a style, click on the item in the Styles properties area and click the trash can icon. Additional Resources This tutorial provides a very basic overview of CSS. There is so much more that can be done using CSS. Two recommended resources: • Book – Stylin’ with CSS by Charles Wyke-Smith • W3 Schools Online CSS Tutorials - http://www.w3schools.com/css/default.asp 12/23/2008 Page 7 Copyright, Office of Technology, Bloomsburg University